:root {
  --ink: #18212a;
  --muted: #667085;
  --paper: #fffaf3;
  --panel: #ffffff;
  --line: #eadfce;
  --accent: #b97a20;
  --accent-dark: #80500d;
  --soft: #f5efe5;
  --deep: #141b22;
  --ok: #19633a;
  --bad: #9f1d1d;
  --shadow: 0 20px 60px rgba(52, 39, 20, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(20, 27, 34, 0.035), transparent 280px),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: var(--accent-dark);
}

.app-header,
.app-footer {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  min-height: 72px;
}

.app-header nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.app-header nav a {
  font-weight: 800;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}

.app-header nav a:hover {
  background: rgba(185, 122, 32, 0.1);
}

.brand {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

.brand span {
  color: var(--accent);
}

.app-footer {
  padding: 36px 0;
  color: var(--muted);
  font-size: 14px;
}

.story-home,
.wide {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.hero-panel,
.narrow-card,
.story-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: clamp(30px, 6vw, 72px);
  margin: 18px 0 28px;
  background:
    linear-gradient(135deg, #ffffff 0%, #fff8ee 100%);
}

.hero-panel h1,
.story-shell h1,
.narrow-card h1,
.wide h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
}

.narrow-card h1,
.wide h1 {
  font-size: clamp(28px, 5vw, 44px);
}

.eyebrow {
  color: var(--accent-dark);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 12px;
}

.actions,
.page-title {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.button:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(52, 39, 20, 0.1);
}

.button.primary,
button.primary {
  background: linear-gradient(135deg, var(--accent), #dba24a);
  border-color: transparent;
  color: #fff;
}

.button.danger,
button.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

.button.small {
  min-height: 34px;
  padding: 7px 10px;
  margin-right: 6px;
  font-size: 13px;
}

.feature-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.feature-grid article,
.story-card,
.narrow-card,
.story-form,
.media-preview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 12px 34px rgba(52, 39, 20, 0.055);
}

.story-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.story-card h2 {
  margin: 0;
}

.story-card p {
  margin: 0;
}

.opening-mode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0;
  padding: 14px;
  border: 1px solid rgba(128, 80, 13, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(246, 252, 248, 0.88));
}

.opening-mode-card div {
  display: grid;
  gap: 3px;
}

.opening-mode-card span {
  color: #8a5b0f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opening-mode-card strong {
  color: var(--ink);
}

.opening-mode-card small,
.opening-mode-card em {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.opening-mode-card button {
  flex: 0 0 auto;
}

.opening-mode-disabled {
  background: rgba(246, 243, 236, 0.72);
}

.media-help {
  margin-top: -4px;
  color: var(--muted);
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.media-preview-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf3;
}

.media-preview-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.media-actions form,
.media-actions button {
  width: 100%;
}

.narrow-card {
  width: min(520px, calc(100% - 32px));
  margin: 48px auto;
}

.flash {
  width: min(1120px, calc(100% - 32px));
  margin: 8px auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: #eaf7ee;
  color: var(--ok);
  border: 1px solid #bde3c7;
}

.flash.error {
  background: #fff1f1;
  color: var(--bad);
  border-color: #f0b8b8;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

textarea {
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.story-form {
  display: grid;
  gap: 16px;
}

.memory-layer-editor {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff8ed 100%);
}

.memory-layer-summary {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.memory-layer-summary h2 {
  margin: 0;
}

.memory-layer-checks,
.memory-layer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff8ed;
  font-weight: 800;
}

.memory-layer-chip,
.memory-layer-inline {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff2d8;
  color: #7a4c09;
  font-size: 0.78rem;
  font-weight: 900;
}

.memory-layer-inline {
  display: block;
  max-width: max-content;
}

.memory-layer-head h2,
.memory-layer-head p {
  margin: 0;
}

.memory-layer-head p:not(.eyebrow) {
  color: var(--muted);
  margin-top: 5px;
}

.current-voice {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.current-voice audio {
  width: 100%;
}

.voice-recorder {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid rgba(128, 80, 13, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 8%, rgba(219, 162, 74, 0.16), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fff8ed 100%);
}

.voice-recorder-copy {
  display: grid;
  gap: 5px;
}

.voice-recorder-copy strong {
  font-size: 1.15rem;
  color: var(--ink);
}

.voice-recorder-copy span {
  color: var(--muted);
}

.voice-recorder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.voice-recorder audio {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.voice-recorder-error {
  color: var(--bad);
  font-weight: 800;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.admin-section {
  margin: 18px 0 24px;
}

.admin-section h2 {
  margin: 0 0 6px;
}

.section-action-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

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

.info-panel,
.danger-zone {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.danger-zone {
  border-color: #f0b8b8;
  background: #fff8f8;
}

.field-note {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.checkbox-row {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  font-weight: 700;
}

.checkbox-row input {
  width: auto;
  margin-top: 4px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.status-active {
  background: #eaf7ee;
  color: var(--ok);
}

.status-pending {
  background: #fff6df;
  color: var(--accent-dark);
}

.status-blocked {
  background: #fff1f1;
  color: var(--bad);
}

.status-draft {
  background: #fff6df;
  color: var(--accent-dark);
}

.status-published {
  background: #eaf7ee;
  color: var(--ok);
}

.status-archived {
  background: #f2f4f7;
  color: var(--muted);
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}

.admin-summary-card {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(52, 39, 20, 0.055);
}

.admin-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-summary-card strong {
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

.admin-summary-card small {
  color: var(--muted);
  line-height: 1.35;
}

.customer-dashboard {
  display: grid;
  gap: 18px;
}

.customer-dashboard-hero,
.story-editor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(219, 162, 74, 0.18), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #fff7e8 100%);
  box-shadow: var(--shadow);
}

.customer-dashboard-hero h1,
.story-editor-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.04;
}

.customer-dashboard-hero p,
.story-editor-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
}

.customer-help-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(128, 80, 13, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.customer-help-card strong {
  font-size: 18px;
}

.customer-help-card span {
  color: var(--muted);
}

.customer-quick-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.customer-quick-steps span {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  text-align: center;
}

.customer-story-grid {
  align-items: stretch;
}

.customer-story-card {
  gap: 14px;
  border-radius: 16px;
  padding: 20px;
}

.customer-story-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.customer-story-head h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.12;
}

.customer-story-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-story-meta span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.customer-story-meta strong {
  color: var(--ink);
}

.customer-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.customer-empty-card {
  justify-items: start;
}

.customer-advanced-section {
  opacity: 0.92;
}

.setup-progress {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.setup-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-weight: 900;
}

.setup-progress > div:first-child span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.setup-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1e6d4;
}

.setup-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), #dba24a);
}

.setup-ready .setup-progress-bar i {
  background: linear-gradient(135deg, #1f7a44, #56b06e);
}

.setup-needs .setup-progress-bar i {
  background: linear-gradient(135deg, #b97a20, #e7b65f);
}

.setup-progress-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.setup-progress-items span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.setup-progress-items .is-done {
  background: #eaf7ee;
  color: var(--ok);
}

.setup-progress-items .is-missing {
  background: #fff6df;
  color: var(--accent-dark);
}

.setup-progress-compact {
  min-width: 220px;
  padding: 10px;
  gap: 8px;
}

.setup-progress-compact > div:first-child {
  display: grid;
  gap: 2px;
}

.setup-progress-compact .setup-progress-items {
  display: none;
}

.story-editor {
  display: grid;
  gap: 18px;
}

.story-editor-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

.guided-story-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.setup-step-card {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 12px 34px rgba(52, 39, 20, 0.055);
}

.setup-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.setup-help-grid span {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(128, 80, 13, 0.18);
  border-radius: 12px;
  background: #fffaf3;
  color: var(--muted);
  font-weight: 700;
}

.setup-step-head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.setup-step-head > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #18212a;
  color: #fff;
  font-weight: 900;
}

.setup-step-head h2,
.setup-step-head p {
  margin: 0;
}

.setup-step-head h2 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.12;
}

.setup-step-head p {
  margin-top: 5px;
  color: var(--muted);
}

.publish-step-card {
  background:
    radial-gradient(circle at top right, rgba(31, 122, 68, 0.08), transparent 28%),
    #fff;
}

.preview-before-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(31, 122, 68, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 96% 10%, rgba(31, 122, 68, 0.1), transparent 26%),
    #f7fff9;
}

.preview-before-publish div {
  display: grid;
  gap: 4px;
}

.preview-before-publish strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.preview-before-publish span {
  color: var(--muted);
}

.public-story {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
}

.story-shell {
  overflow: hidden;
  margin-top: 14px;
  border-color: rgba(234, 223, 206, 0.95);
}

.story-shell > :not(.story-hero-link) {
  margin-left: clamp(18px, 5vw, 56px);
  margin-right: clamp(18px, 5vw, 56px);
}

.story-hero-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-hero-image {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  background: var(--soft);
  cursor: zoom-in;
}

.lead {
  color: var(--muted);
  font-size: 20px;
  max-width: 760px;
}

.date-line,
.location-line {
  margin-top: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.story-text {
  margin-top: 26px;
  margin-bottom: 32px;
  font-size: 18px;
}

.voice-memory,
.time-capsule {
  margin-top: 20px;
  margin-bottom: 22px;
  border-radius: 8px;
}

.voice-memory {
  background: var(--deep);
  color: #fff;
  overflow: hidden;
}

.voice-memory-gate {
  display: grid;
  justify-items: start;
  gap: 5px;
  width: 100%;
  min-height: 118px;
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 55%),
    var(--deep);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.voice-memory-gate strong {
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.05;
}

.voice-memory-gate span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.voice-memory-player {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.voice-memory-player p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.voice-memory-player audio {
  width: 100%;
  max-width: 680px;
}

.time-capsule {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  background: #fff8ec;
  overflow: hidden;
}

.time-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

.time-capsule > * {
  position: relative;
  z-index: 1;
}

.time-capsule.is-locked {
  border-color: rgba(159, 29, 29, 0.48);
  background:
    linear-gradient(135deg, #4a0808 0%, #7c1515 45%, #171016 100%);
  color: #fff;
  box-shadow: 0 26px 70px rgba(94, 9, 9, 0.28);
}

.time-capsule-pending {
  border-color: rgba(128, 80, 13, 0.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(216, 160, 59, 0.18), transparent 30%),
    linear-gradient(135deg, #fff8ec 0%, #f5efe5 58%, #eadfce 100%);
}

.time-capsule-featured {
  margin-top: 30px;
  margin-bottom: 34px;
}

.time-capsule h2,
.time-capsule p {
  margin: 0;
}

.time-capsule h2 {
  max-width: 860px;
  font-size: clamp(30px, 7vw, 64px);
  line-height: 0.98;
  letter-spacing: 0;
}

.time-capsule.is-locked .eyebrow,
.time-capsule.is-locked .capsule-sealed,
.time-capsule.is-locked .capsule-warning {
  color: rgba(255, 255, 255, 0.84);
}

.capsule-alert {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capsule-sealed {
  font-size: clamp(17px, 3vw, 22px);
}

.capsule-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 2px;
}

.capsule-countdown span {
  display: grid;
  gap: 4px;
  min-height: 108px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  font-weight: 900;
}

.capsule-countdown strong {
  font-size: clamp(34px, 7vw, 70px);
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.capsule-countdown small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capsule-warning {
  max-width: 760px;
  font-weight: 800;
}

.time-capsule.is-open {
  background:
    linear-gradient(135deg, #f8fbf8 0%, #fff8ec 100%);
  border-color: #d7e6d9;
}

.time-capsule.is-open .capsule-open-message {
  padding: 18px;
  border: 1px solid #d7e6d9;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  line-height: 1.75;
  font-size: 18px;
}

.collection-strip,
.collection-legacy-line,
.collection-cta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 16px;
}

.collection-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  background: #fff8ec;
}

.collection-strip p {
  margin: 0;
  font-weight: 800;
}

.collection-page .story-shell {
  padding-bottom: 34px;
}

.collection-page {
  width: min(1040px, calc(100% - 24px));
}

.collection-shell {
  background:
    linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
}

.collection-shell .lead {
  max-width: 760px;
}

.collection-legacy-line {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 24px;
  background: #f8fbf8;
  border-color: #d7e6d9;
}

.collection-legacy-line strong {
  font-size: 20px;
}

.collection-legacy-line span {
  color: var(--muted);
}

.collection-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.collection-tree-wrap {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 22px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(52, 39, 20, 0.07);
}

.collection-tree-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 78px;
  bottom: 32px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(185, 122, 32, 0.45), transparent);
}

.collection-tree-root {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  margin: 0 auto;
  padding: 18px;
  border-radius: 8px;
  background: var(--deep);
  color: #fff;
  text-align: center;
}

.collection-tree-root strong,
.collection-tree-node strong {
  display: block;
  line-height: 1.25;
}

.collection-tree-root span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
}

.collection-tree-branches {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.collection-tree-node {
  min-height: 92px;
  padding: 14px 52px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf3;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(52, 39, 20, 0.055);
}

.collection-tree-node span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.collection-tree-node::after {
  content: "QR";
  position: absolute;
}

.collection-tree-node {
  position: relative;
}

.collection-tree-node::after {
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
}

.collection-tree-more {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.collection-story-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(52, 39, 20, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.collection-story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(52, 39, 20, 0.11);
}

.collection-story-card a {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.collection-story-card img,
.collection-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}

.collection-placeholder {
  display: grid;
  place-items: center;
  color: var(--accent-dark);
  font-weight: 800;
}

.collection-story-card div {
  padding: 16px;
}

.collection-story-card span {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.collection-story-card h2 {
  margin: 6px 0;
  font-size: 22px;
}

.collection-story-card p {
  margin: 0;
  color: var(--muted);
}

.empty-collection {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed #d9c7aa;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.empty-collection strong {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}

.empty-collection p {
  margin: 0;
  color: var(--muted);
}

.collection-cta {
  display: grid;
  gap: 8px;
  justify-items: start;
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

.collection-cta h2,
.collection-cta p {
  margin: 0;
}

.collection-cta p {
  color: rgba(255, 255, 255, 0.78);
}

.collection-cta .button.primary {
  background: #fff;
  color: var(--deep);
}

.story-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding-bottom: 34px;
}

.story-gallery a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.video-panel iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  margin: 10px 0 28px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 13, 18, 0.88);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  display: block;
  max-width: min(100%, 1100px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.lightbox-close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  body {
    background: var(--paper);
  }

  .app-header,
  .page-title,
  .section-action-row,
  .collection-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-header {
    width: min(100% - 20px, 1120px);
    gap: 10px;
    padding: 12px 0;
  }

  .app-header nav {
    width: 100%;
    gap: 8px;
  }

  .app-header nav a {
    background: #fff;
    border: 1px solid var(--line);
  }

  .brand {
    font-size: 18px;
  }

  .story-home,
  .wide {
    width: min(100% - 20px, 1120px);
  }

  .hero-panel,
  .narrow-card,
  .story-form,
  .media-preview {
    padding: 18px;
  }

  .hero-panel h1,
  .story-shell h1,
  .narrow-card h1,
  .wide h1 {
    font-size: clamp(30px, 12vw, 48px);
  }

  .public-story,
  .collection-page {
    width: min(100% - 12px, 960px);
  }

  .story-shell > :not(.story-hero-link) {
    margin-left: 16px;
    margin-right: 16px;
  }

  .story-hero-image {
    max-height: 48vh;
  }

  .lead,
  .story-text {
    font-size: 16px;
  }

  .memory-layer-editor,
  .voice-memory-gate,
  .voice-memory-player,
  .time-capsule {
    padding: 16px;
  }

  .capsule-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capsule-countdown span {
    min-height: 88px;
  }

  .media-actions {
    grid-template-columns: 1fr;
  }

  .collection-story-grid {
    grid-template-columns: 1fr;
  }

  .collection-tree-wrap::before {
    left: 28px;
    top: 88px;
  }

  .collection-tree-root {
    width: 100%;
    text-align: left;
  }

  .collection-tree-branches {
    grid-template-columns: 1fr;
  }

  .collection-cta .button,
  .collection-strip .button {
    width: 100%;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table thead {
    display: none;
  }
}

/* Premium public QR story polish */
.story-public-body {
  background:
    linear-gradient(180deg, rgba(20, 27, 34, 0.06), transparent 300px),
    radial-gradient(circle at 18% 0%, rgba(185, 122, 32, 0.11), transparent 28%),
    var(--paper);
}

.story-shell {
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(52, 39, 20, 0.13);
}

.story-hero-placeholder {
  min-height: clamp(220px, 46vw, 440px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(20, 27, 34, 0.94), rgba(128, 80, 13, 0.86)),
    var(--deep);
  color: #fff;
  font-weight: 900;
  font-size: clamp(26px, 6vw, 60px);
}

.story-intro-card,
.story-text-card,
.story-gallery-wrap,
.video-panel {
  margin-top: clamp(18px, 4vw, 34px);
}

.story-kicker-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.story-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.story-meta-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.story-meta-item span,
.story-section-title span {
  display: block;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.story-meta-item strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(16px, 3vw, 22px);
}

.story-section-title {
  margin-bottom: 14px;
}

.story-section-title h2 {
  margin: 4px 0 0;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
}

.story-text-card {
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.story-text-card .story-text {
  margin: 0;
  max-width: 78ch;
}

.story-text-empty {
  background:
    linear-gradient(135deg, rgba(255, 248, 236, 0.92), rgba(255, 255, 255, 0.72));
}

.voice-memory {
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(20, 27, 34, 0.2);
}

.voice-memory-gate {
  min-height: 168px;
  padding: clamp(24px, 5vw, 42px);
  border-radius: 14px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.2), transparent 22%),
    linear-gradient(135deg, #111820 0%, #23313d 50%, #80500d 100%);
}

.voice-memory-pill {
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.voice-memory-player p {
  display: grid;
  gap: 3px;
}

.voice-memory-player p span {
  color: rgba(255, 255, 255, 0.78);
}

.time-capsule {
  border-radius: 14px;
}

.story-gallery-wrap {
  padding-bottom: 18px;
}

.story-gallery {
  margin-top: 12px;
}

.inline-delete-form {
  display: inline-flex;
  margin: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.access-add-row {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.access-add-row h3 {
  margin: 0 0 12px;
}

.media-preview-card {
  position: relative;
}

.media-role-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(20, 27, 34, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .customer-dashboard-hero,
  .story-editor-hero,
  .customer-quick-steps,
  .customer-story-meta,
  .admin-summary-grid,
  .setup-help-grid {
    grid-template-columns: 1fr;
  }

  .customer-dashboard-hero,
  .story-editor-hero {
    border-radius: 16px;
    padding: 20px;
  }

  .customer-dashboard-hero h1,
  .story-editor-hero h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .customer-dashboard-hero p,
  .story-editor-hero p {
    font-size: 16px;
  }

  .customer-story-head {
    display: grid;
  }

  .customer-primary-actions,
  .customer-primary-actions .button,
  .customer-primary-actions button,
  .preview-before-publish,
  .preview-before-publish .button,
  .voice-recorder-actions,
  .voice-recorder-actions .button,
  .voice-recorder-actions button {
    width: 100%;
  }

  .preview-before-publish {
    display: grid;
  }

  .setup-progress > div:first-child {
    display: grid;
  }

  .setup-progress > div:first-child span {
    white-space: normal;
  }

  .setup-step-head {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .setup-step-head > span {
    width: 40px;
    height: 40px;
  }

  .story-shell {
    border-radius: 0;
    margin-top: 0;
  }

  .story-meta-grid {
    grid-template-columns: 1fr;
  }

  .story-kicker-row {
    gap: 8px;
  }

  .voice-memory-gate {
    min-height: 150px;
  }

  .button-row,
  .inline-delete-form,
  .button-row .button,
  .button-row button,
  .opening-mode-card,
  .opening-mode-card button {
    width: 100%;
  }

  .opening-mode-card {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Premium Smart Stone public renderer */
.story-public-body {
  background:
    radial-gradient(circle at 18% 0%, rgba(219, 162, 74, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 18%, rgba(24, 33, 42, 0.08), transparent 24rem),
    linear-gradient(180deg, #fffaf3 0%, #f5efe5 100%);
}

.story-public-body .app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  padding: 14px max(18px, calc((100vw - 1120px) / 2));
  background: rgba(255, 250, 243, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(234, 223, 206, 0.82);
}

.public-story {
  width: min(1040px, calc(100% - 24px));
  padding-bottom: 34px;
}

.public-story .story-shell {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 90px rgba(52, 39, 20, 0.12);
}

.story-hero-link,
.story-hero-placeholder {
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.story-hero-image {
  aspect-ratio: 16 / 10;
  max-height: min(68vh, 720px);
  object-fit: cover;
}

.story-intro-card,
.memory-showcase,
.story-text-card,
.video-panel,
.story-gallery-wrap {
  margin-top: clamp(18px, 4vw, 32px);
  margin-bottom: clamp(18px, 4vw, 32px);
}

.story-intro-card h1 {
  max-width: 860px;
}

.memory-layer-chips {
  align-items: center;
}

.memory-layer-chip {
  box-shadow: inset 0 0 0 1px rgba(185, 122, 32, 0.1);
}

.memory-showcase {
  padding: clamp(16px, 4vw, 26px);
  border: 1px solid rgba(234, 223, 206, 0.9);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(219, 162, 74, 0.12), transparent 32%),
    #fffaf3;
}

.memory-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.memory-showcase-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 136px;
  padding: 18px;
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(52, 39, 20, 0.06);
}

.memory-showcase-card::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(185, 122, 32, 0.13);
}

.memory-showcase-card span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff2d7;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.memory-showcase-card strong {
  max-width: 220px;
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.05;
}

.memory-showcase-card small {
  color: var(--muted);
  font-weight: 800;
}

.memory-showcase-voice {
  background: linear-gradient(135deg, #f8fffc 0%, #ffffff 100%);
}

.memory-showcase-voice::after {
  background: rgba(30, 126, 105, 0.13);
}

.memory-showcase-secret {
  background: linear-gradient(135deg, #fff8f1 0%, #ffffff 100%);
}

.memory-showcase-secret::after {
  background: rgba(159, 29, 29, 0.12);
}

.voice-memory,
.time-capsule,
.story-text-card,
.video-panel,
.story-gallery-wrap {
  border-radius: 24px;
}

.voice-memory {
  position: relative;
  border: 1px solid rgba(114, 223, 208, 0.22);
  background:
    radial-gradient(circle at 78% 10%, rgba(114, 223, 208, 0.2), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(219, 162, 74, 0.16), transparent 26%),
    linear-gradient(135deg, #101c1e 0%, #141b22 58%, #0b1115 100%);
  box-shadow: 0 30px 84px rgba(10, 16, 20, 0.24);
}

.voice-memory-gate {
  position: relative;
  min-height: 230px;
  padding: clamp(24px, 6vw, 42px);
  border-radius: 24px;
  background: transparent;
}

.voice-memory-pill,
.capsule-alert {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.voice-memory-gate strong {
  max-width: 720px;
  font-size: clamp(32px, 8vw, 72px);
  letter-spacing: 0;
}

.voice-play-symbol {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-top: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1c56b, #d69225);
  color: #171016;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 20px 48px rgba(216, 160, 59, 0.34);
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 84px;
  width: min(560px, 100%);
  margin-top: 16px;
}

.voice-wave i {
  display: block;
  width: 9px;
  height: var(--wave-height, 48%);
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6d78f, #75dfd0);
  opacity: 0.92;
  animation: voicePulse 1.55s ease-in-out infinite alternate;
}

.voice-wave i:nth-child(2n) {
  animation-delay: 0.18s;
}

.voice-wave i:nth-child(3n) {
  animation-delay: 0.34s;
}

@keyframes voicePulse {
  from { transform: scaleY(0.62); opacity: 0.62; }
  to { transform: scaleY(1); opacity: 1; }
}

.voice-memory-player {
  padding: clamp(24px, 5vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.voice-memory-player audio {
  max-width: none;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.16));
}

.time-capsule {
  border-radius: 24px;
  box-shadow: 0 28px 86px rgba(94, 9, 9, 0.12);
}

.time-capsule.is-locked {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 208, 138, 0.24), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.1), transparent 26%),
    linear-gradient(135deg, #4a0808 0%, #7c1515 46%, #171016 100%);
}

.time-capsule h2 {
  text-wrap: balance;
}

.capsule-countdown span {
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.capsule-letter-preview,
.capsule-open-message {
  position: relative;
  box-shadow: 0 22px 54px rgba(52, 39, 20, 0.1);
}

.capsule-letter-preview {
  display: grid;
  gap: 10px;
  max-width: 420px;
  padding: 22px;
  border: 1px solid rgba(185, 122, 32, 0.18);
  border-radius: 18px;
  background: #fff;
}

.capsule-letter-preview span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eadfce, transparent);
}

.capsule-letter-preview span:nth-child(2) {
  width: 72%;
}

.capsule-letter-preview span:nth-child(3) {
  width: 52%;
}

.capsule-open-message {
  padding: clamp(22px, 5vw, 42px);
  border-radius: 22px;
}

.capsule-open-label {
  display: block;
  margin-bottom: 12px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-text-card,
.video-panel,
.story-gallery-wrap {
  padding: clamp(20px, 5vw, 34px);
  border: 1px solid rgba(234, 223, 206, 0.95);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 52px rgba(52, 39, 20, 0.065);
}

.story-text {
  max-width: 820px;
  line-height: 1.78;
}

.story-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.story-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #f5efe5;
  box-shadow: 0 14px 36px rgba(52, 39, 20, 0.09);
}

.story-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 220ms ease;
}

.story-gallery a:hover img {
  transform: scale(1.04);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(8, 10, 12, 0.9);
  backdrop-filter: blur(14px);
}

.lightbox.is-open {
  display: grid;
}

.lightbox img {
  max-width: min(100%, 1120px);
  max-height: 86vh;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.45);
}

.lightbox-close,
.lightbox-nav {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.lightbox-close {
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
}

.lightbox-nav {
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  font-size: 28px;
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-counter {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}

.lightbox-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .story-public-body .app-header {
    padding: 12px 16px;
  }

  .public-story {
    width: min(100% - 12px, 1040px);
  }

  .public-story .story-shell {
    border-radius: 22px;
  }

  .story-shell > :not(.story-hero-link) {
    margin-left: 14px;
    margin-right: 14px;
  }

  .story-hero-link,
  .story-hero-placeholder {
    border-radius: 22px 22px 0 0;
  }

  .story-hero-image {
    aspect-ratio: 4 / 5;
    max-height: 72vh;
  }

  .memory-showcase-grid {
    grid-template-columns: 1fr;
  }

  .voice-memory-gate {
    min-height: 260px;
  }

  .voice-wave {
    gap: 4px;
  }

  .voice-wave i {
    width: 7px;
  }

  .capsule-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capsule-countdown span {
    min-height: 92px;
  }

  .story-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lightbox {
    padding: 10px;
  }

  .lightbox img {
    max-height: 80vh;
    border-radius: 14px;
  }

  .lightbox-nav {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .lightbox-prev {
    left: 16px;
  }

.lightbox-next {
    right: 16px;
  }
}

/* Final Smart Stone polish: public QR pages and customer setup */
.story-public-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(185, 122, 32, 0.18), transparent 34vw),
    radial-gradient(circle at 92% 12%, rgba(30, 126, 105, 0.14), transparent 30vw),
    linear-gradient(180deg, #fffaf3 0%, #f8f1e8 48%, #fffaf3 100%);
}

.public-story .story-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(234, 223, 206, 0.92);
}

.public-story .story-shell::before {
  content: "";
  position: absolute;
  inset: -120px -120px auto auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 139, 0.32), transparent 68%);
  pointer-events: none;
}

.story-hero-link {
  display: block;
  background: #151b20;
}

.story-hero-image {
  display: block;
  width: 100%;
}

.story-intro-card {
  position: relative;
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid rgba(234, 223, 206, 0.72);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 243, 0.78));
  box-shadow: 0 22px 70px rgba(52, 39, 20, 0.08);
}

.story-intro-card .lead {
  max-width: 820px;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.55;
}

.memory-showcase-card {
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.memory-showcase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 122, 32, 0.35);
  box-shadow: 0 22px 58px rgba(52, 39, 20, 0.12);
}

.story-text-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 243, 0.72));
}

.story-text {
  font-size: clamp(17px, 2.1vw, 20px);
}

.voice-memory {
  overflow: hidden;
}

.voice-memory::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 38%, transparent 70%);
  transform: translateX(-100%);
  animation: voiceGlow 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes voiceGlow {
  0%, 38% { transform: translateX(-100%); }
  72%, 100% { transform: translateX(100%); }
}

.voice-memory-gate {
  border: 0;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.voice-memory-gate:hover .voice-play-symbol {
  transform: scale(1.04);
}

.voice-play-symbol {
  transition: transform 180ms ease;
}

.time-capsule {
  overflow: hidden;
}

.time-capsule.is-locked .capsule-alert {
  background: rgba(255, 255, 255, 0.92);
  color: #7c1515;
}

.time-capsule.is-open {
  background:
    radial-gradient(circle at 72% 18%, rgba(246, 213, 143, 0.32), transparent 30%),
    linear-gradient(135deg, #fffaf3 0%, #ffffff 100%);
}

.capsule-open-message {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.65;
}

.capsule-ready-message button {
  margin-left: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #7c1515;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.story-gallery a {
  position: relative;
}

.story-gallery a::after {
  content: "Open";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 27, 34, 0.76);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 180ms ease;
}

.story-gallery a:hover::after,
.story-gallery a:focus-visible::after {
  opacity: 1;
}

.customer-dashboard-hero,
.story-editor-hero,
.setup-step-card {
  border-radius: 24px;
}

.customer-story-card {
  position: relative;
  overflow: hidden;
}

.customer-story-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), rgba(30, 126, 105, 0.82));
}

.customer-primary-actions .button,
.preview-before-publish .button {
  min-height: 46px;
}

.customer-control-section {
  background:
    radial-gradient(circle at top right, rgba(185, 122, 32, 0.09), transparent 28%),
    #ffffff;
}

.customer-control-grid {
  display: grid;
  gap: 16px;
}

.customer-control-card {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 20px;
  background: #fffaf3;
  box-shadow: 0 16px 42px rgba(52, 39, 20, 0.06);
}

.customer-control-card.admin-owned {
  background: #f8fbff;
}

.customer-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.customer-control-head h3,
.customer-control-head p {
  margin: 0;
}

.customer-control-head h3 {
  overflow-wrap: anywhere;
  font-size: clamp(20px, 3vw, 30px);
}

.customer-control-head p {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 750;
}

.customer-control-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.customer-control-meta span,
.activation-copy {
  padding: 10px 12px;
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 12px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 750;
}

.customer-control-meta strong {
  color: var(--ink);
}

.activation-copy {
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.activation-copy.is-active {
  border-color: rgba(31, 122, 68, 0.18);
  background: #f7fff9;
}

.customer-control-stories {
  display: grid;
  gap: 10px;
}

.customer-control-story {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 16px;
  background: #ffffff;
}

.customer-control-story > div:first-child {
  display: grid;
  gap: 3px;
}

.customer-control-story > div:first-child strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.customer-control-story > div:first-child span,
.customer-control-story-meta {
  color: var(--muted);
  font-weight: 800;
}

.customer-control-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.admin-details {
  padding: 0;
  overflow: hidden;
}

.admin-details summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
}

.admin-details > p,
.admin-details > table {
  margin-left: 20px;
  margin-right: 20px;
}

.admin-details > table {
  margin-bottom: 20px;
}

@media (max-width: 720px) {
  .story-intro-card {
    padding: 20px;
  }

  .story-kicker-row {
    align-items: flex-start;
    gap: 12px;
  }

  .memory-layer-chips {
    width: 100%;
  }

  .memory-layer-chip {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .voice-memory-gate strong {
    font-size: clamp(30px, 11vw, 48px);
  }

  .voice-play-symbol {
    width: 66px;
    height: 66px;
  }

  .customer-primary-actions {
    gap: 10px;
  }

  .customer-control-head {
    display: grid;
  }

  .customer-control-meta span,
  .activation-copy {
    width: 100%;
  }
}

/* Final Smart Stone public experience polish */
.story-public-body {
  background:
    linear-gradient(180deg, #15110e 0%, #231912 260px, #fff6e8 640px, #fffaf3 100%);
  color: var(--ink);
}

.story-public-body .app-header {
  width: min(1180px, calc(100% - 28px));
  color: #fff;
}

.story-public-body .brand {
  color: #fff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.story-public-body .app-header nav a {
  color: rgba(255, 255, 255, 0.86);
}

.story-public-body .app-header nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.story-public-body .app-footer {
  width: min(1120px, calc(100% - 28px));
  color: rgba(24, 33, 42, 0.58);
  text-align: center;
}

.public-story {
  width: min(1120px, calc(100% - 20px));
}

.public-story .story-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 238, 210, 0.9);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 243, 0.98) 100%);
  box-shadow: 0 36px 110px rgba(15, 12, 10, 0.26);
}

.public-story .story-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: 6px;
  background: linear-gradient(90deg, #b97a20, #f1c56b, #141b22, #f1c56b, #b97a20);
}

.story-shell > :not(.story-hero-link) {
  margin-left: clamp(16px, 5vw, 64px);
  margin-right: clamp(16px, 5vw, 64px);
}

.story-hero-link,
.story-hero-placeholder {
  position: relative;
  isolation: isolate;
  border-radius: 34px 34px 0 0;
  background:
    linear-gradient(135deg, #342719, #111820);
}

.story-hero-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 12, 0.52));
}

.story-hero-image {
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 760px);
  object-fit: cover;
  transform: scale(1.001);
}

.story-hero-hint {
  position: absolute;
  right: clamp(14px, 4vw, 30px);
  bottom: clamp(14px, 4vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.story-hero-placeholder {
  min-height: clamp(340px, 64vh, 620px);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.88);
}

.story-hero-placeholder span {
  font-size: clamp(34px, 8vw, 84px);
  font-weight: 950;
}

.story-intro-card {
  position: relative;
  z-index: 2;
  margin-top: clamp(20px, 4vw, 38px);
  padding: clamp(22px, 5vw, 44px);
  border: 1px solid rgba(234, 223, 206, 0.94);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 243, 0.92));
  box-shadow: 0 22px 70px rgba(52, 39, 20, 0.1);
}

.story-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.story-intro-card h1 {
  max-width: 940px;
  margin-top: 10px;
  font-size: clamp(40px, 8vw, 92px);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.story-intro-card .lead {
  margin-top: 18px;
  max-width: 860px;
  color: #49515b;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.58;
}

.story-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  max-width: 620px;
  margin-top: 20px;
}

.story-meta-item {
  padding: 14px 16px;
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(52, 39, 20, 0.06);
}

.story-meta-item span {
  display: block;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-meta-item strong {
  display: block;
  margin-top: 3px;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.12;
}

.memory-layer-chips {
  gap: 8px;
}

.memory-layer-chip {
  border-radius: 999px;
  background: #fff7e8;
  color: #80500d;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(185, 122, 32, 0.18), 0 10px 26px rgba(52, 39, 20, 0.06);
}

.memory-showcase {
  border-radius: 28px;
  background:
    linear-gradient(135deg, #fffaf3 0%, #ffffff 62%, #f7efe2 100%);
  box-shadow: 0 22px 70px rgba(52, 39, 20, 0.09);
}

.smart-tree-experience {
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-height: 100svh;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 236, 191, 0.58), transparent 20%),
    radial-gradient(circle at 50% 54%, rgba(255, 166, 112, 0.3), transparent 32%),
    linear-gradient(180deg, #efb693 0%, #f8d8a8 34%, #8c3f2d 68%, #150d0b 100%);
  color: #fff;
  box-shadow:
    0 48px 150px rgba(34, 18, 10, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  touch-action: none;
}

.smart-tree-experience::before,
.smart-tree-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.smart-tree-experience::before {
  background:
    linear-gradient(90deg, rgba(72, 30, 26, 0.2), transparent 28%, transparent 70%, rgba(72, 30, 26, 0.18)),
    radial-gradient(circle at 39% 26%, rgba(255, 250, 221, 0.5), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0.92;
}

.smart-tree-experience::after {
  background:
    linear-gradient(180deg, rgba(255, 234, 205, 0.08) 0%, transparent 35%, rgba(9, 8, 7, 0.1) 68%, rgba(9, 8, 7, 0.64) 100%);
  opacity: 0.86;
}

.smart-tree-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.smart-tree-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: inherit;
  width: 100%;
  margin: 0;
  padding:
    clamp(86px, 14vh, 140px)
    max(16px, calc((100% - 760px) / 2))
    clamp(42px, 8vh, 82px);
  text-align: center;
  transition: opacity 680ms ease, transform 680ms ease, filter 680ms ease;
}

.smart-tree-gate .eyebrow {
  background: rgba(255, 245, 224, 0.18);
  color: #fff4d8;
  border: 1px solid rgba(255, 241, 207, 0.28);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
}

.smart-tree-gate h2 {
  margin: 14px 0 12px;
  color: #fff;
  font-size: clamp(52px, 11vw, 128px);
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 0 24px 70px rgba(72, 28, 15, 0.58);
}

.smart-tree-gate p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255, 249, 238, 0.88);
  font-size: clamp(16px, 2vw, 22px);
  text-shadow: 0 16px 42px rgba(72, 28, 15, 0.48);
}

.smart-tree-enter {
  position: relative;
  justify-self: center;
  min-height: 62px;
  margin-top: clamp(22px, 4vw, 34px);
  padding: 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 218, 151, 0.88));
  color: #4d2118;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 24px 70px rgba(72, 28, 15, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.smart-tree-enter:hover,
.smart-tree-enter:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 30px 86px rgba(72, 28, 15, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


.smart-tree-experience.is-loading-scene .smart-tree-canvas,
.smart-tree-experience.is-loading-scene .smart-tree-content {
  opacity: 0;
  pointer-events: none;
}

.smart-tree-experience.is-scene-ready .smart-tree-canvas {
  opacity: 1;
  transition: opacity 720ms ease;
}

.smart-tree-experience.is-loading-scene::after {
  content: "Loading memory world...";
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 211, 122, 0.24), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(255, 247, 219, 0.12), transparent 18%),
    linear-gradient(135deg, rgba(9, 7, 6, 0.96), rgba(27, 18, 12, 0.94) 52%, rgba(8, 7, 6, 0.98));
  color: rgba(255, 241, 211, 0.94);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 24px rgba(255, 193, 91, 0.52);
  opacity: 1;
}

.smart-tree-experience.is-loading-scene::before {
  z-index: 61;
  inset: 50% auto auto 50%;
  width: 86px;
  height: 86px;
  margin: -86px 0 0 -43px;
  border: 1px solid rgba(255, 219, 146, 0.32);
  border-top-color: rgba(255, 245, 212, 0.92);
  border-radius: 999px;
  background: transparent;
  animation: slateMemoryLoadingRing 1.25s linear infinite;
  mix-blend-mode: normal;
  opacity: 1;
}

@keyframes slateMemoryLoadingRing {
  to { transform: rotate(360deg); }
}

.smart-tree-experience.is-waiting .smart-tree-content {
  opacity: 0;
  pointer-events: none;
  transform: translateY(28px);
}

.smart-tree-experience.is-entered .smart-tree-gate {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-22px) scale(0.98);
  filter: blur(6px);
}

.smart-tree-experience.is-entered .smart-tree-content {
  animation: memoryWorldOpened 900ms ease both;
}

@keyframes memoryWorldOpened {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smart-tree-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: start;
  min-height: inherit;
  width: 100%;
  margin: 0;
  padding:
    clamp(36px, 6vh, 64px)
    max(18px, calc((100% - 1280px) / 2))
    clamp(18px, 5vh, 48px);
  background:
    linear-gradient(180deg, rgba(12, 8, 5, 0.02) 0%, rgba(12, 8, 5, 0.02) 42%, rgba(12, 8, 5, 0.08) 100%);
}

.smart-tree-content .eyebrow {
  width: fit-content;
  background: rgba(18, 12, 8, 0.58);
  color: #ffe0a0;
  border: 1px solid rgba(255, 224, 160, 0.28);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.smart-tree-content h2 {
  max-width: 330px;
  margin: 8px 0 10px;
  color: #fff;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 0.96;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.smart-tree-content p:not(.eyebrow) {
  max-width: 330px;
  margin: 0;
  color: rgba(255, 248, 235, 0.9);
  font-size: clamp(13px, 1vw, 15px);
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

.smart-tree-hint {
  align-self: end;
  justify-self: start;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 226, 166, 0.22);
  border-radius: 999px;
  background: rgba(20, 12, 8, 0.34);
  color: rgba(255, 248, 235, 0.76);
  font-size: 13px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.tree-branch-grid {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 6vh, 68px);
  display: grid;
  gap: clamp(12px, 2vw, 22px);
  width: min(760px, calc(100vw - 28px));
  margin: 0;
  transform: translateX(-50%);
  perspective: 1100px;
}

.smart-tree-sign-count-1 .tree-branch-grid {
  grid-template-columns: minmax(220px, 360px);
  justify-content: center;
}

.smart-tree-sign-count-2 .tree-branch-grid {
  grid-template-columns: repeat(2, minmax(220px, 340px));
  justify-content: center;
}

.smart-tree-sign-count-3 .tree-branch-grid {
  grid-template-columns: repeat(3, minmax(190px, 300px));
  justify-content: center;
}

.tree-branch {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px 15px 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 223, 151, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 242, 202, 0.24), rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(65, 35, 18, 0.72), rgba(22, 13, 9, 0.72));
  color: #fff8e8;
  text-decoration: none;
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 5px rgba(96, 54, 22, 0.24),
    inset 0 0 0 7px rgba(255, 224, 150, 0.12);
  opacity: 0;
  transform: translateY(-72px) rotateX(-18deg) scale(0.94);
  transition: opacity 520ms ease, transform 520ms ease, border-color 220ms ease, background 220ms ease, filter 220ms ease;
}

.tree-branch::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 226, 166, 0.34);
  border-radius: 12px;
  pointer-events: none;
}

.tree-branch.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: memoryBranchDrop 860ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.tree-branch.is-active {
  border-color: rgba(255, 238, 185, 0.96);
  filter: brightness(1.08);
  transform: translateY(-10px) scale(1.025);
  box-shadow:
    0 34px 110px rgba(255, 186, 92, 0.26),
    0 22px 76px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 5px rgba(96, 54, 22, 0.24),
    inset 0 0 0 7px rgba(255, 224, 150, 0.2);
}

.smart-tree-experience.is-layer-open .tree-branch:not(.is-active) {
  opacity: 0.34;
  filter: saturate(0.7) brightness(0.78);
  transform: translateY(10px) scale(0.94);
}

@keyframes memoryBranchDrop {
  0% {
    opacity: 0;
    transform: translateY(-96px) rotateX(-22deg) scale(0.94);
  }
  62% {
    opacity: 1;
    transform: translateY(10px) rotateX(4deg) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }
}

.tree-branch:hover,
.tree-branch:focus-visible {
  border-color: rgba(255, 221, 141, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 220, 145, 0.34), rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(84, 45, 22, 0.78), rgba(24, 14, 9, 0.74));
  transform: translateY(-6px) scale(1.012);
}

.tree-branch::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 160, 0.34), rgba(255, 224, 160, 0.05) 62%, transparent 70%);
}

.tree-branch-time_capsule::after {
  background:
    radial-gradient(circle, rgba(241, 197, 107, 0.34), rgba(241, 197, 107, 0.06) 62%, transparent 70%);
}

.tree-branch span {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 224, 160, 0.18);
  color: #ffe1a8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tree-branch strong {
  position: relative;
  z-index: 1;
  max-width: 260px;
  color: #fff9ec;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.04;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.memory-function-stage {
  position: absolute;
  left: 50%;
  top: clamp(92px, 14vh, 150px);
  z-index: 2;
  width: min(620px, calc(100vw - 28px));
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(255, 226, 166, 0.22);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(34, 20, 12, 0.56), rgba(14, 9, 7, 0.36));
  color: #fff7e8;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px) scale(0.98);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
  transition: opacity 460ms ease, transform 460ms ease;
}

.memory-function-stage.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.memory-function-stage span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 224, 160, 0.16);
  color: #ffe1a8;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.memory-function-stage h3 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.96;
}

.memory-function-stage p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 248, 235, 0.9);
  font-size: clamp(15px, 2vw, 18px);
}

.memory-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.memory-stage-actions a,
.memory-stage-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 226, 166, 0.34);
  border-radius: 999px;
  background: rgba(255, 241, 205, 0.12);
  color: #fff4d6;
  font-weight: 950;
  text-decoration: none;
}

@media (min-width: 920px) {
  .smart-tree-content {
    grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1fr);
    align-items: end;
    column-gap: clamp(24px, 5vw, 72px);
  }

  .smart-tree-content .eyebrow,
  .smart-tree-content h2,
  .smart-tree-content p:not(.eyebrow) {
    grid-column: 1;
  }

  .tree-branch-grid {
    grid-column: 2;
    align-self: end;
    justify-self: end;
  }
}

@media (max-width: 720px) {
  .smart-tree-experience {
    min-height: 100svh;
    border-radius: 0 0 32px 32px;
  }

  .smart-tree-content {
    width: 100%;
    padding: 86px 14px 26px;
  }

  .smart-tree-content h2 {
    max-width: 330px;
    font-size: clamp(34px, 12.4vw, 48px);
  }

  .smart-tree-content p:not(.eyebrow) {
    max-width: 320px;
    font-size: 15px;
  }

  .tree-branch-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .tree-branch {
    min-height: 88px;
    padding: 14px;
    border-radius: 20px;
  }

  .tree-branch strong {
    font-size: 20px;
  }
}

.public-story .story-shell > .smart-tree-experience {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.public-story .story-shell > .story-page-content {
  margin-left: 0;
  margin-right: 0;
}

.story-page-content > :not(.story-hero-link):not(.story-hero-placeholder) {
  margin-left: clamp(16px, 5vw, 64px);
  margin-right: clamp(16px, 5vw, 64px);
}

.story-immersive-body .app-header {
  display: none;
}

.story-immersive-body {
  min-height: 100svh;
}

.story-immersive-body.memory-experience-ready {
  overflow: hidden;
}

.story-immersive-body.memory-experience-ready .app-footer {
  display: none;
}

.story-immersive-body .app-header .brand,
.story-immersive-body .app-header nav a {
  color: rgba(255, 255, 255, 0.92);
}

.story-immersive-body .app-header nav a {
  background: rgba(28, 17, 12, 0.24);
  backdrop-filter: blur(14px);
}

.story-immersive-body .app-header nav a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.story-immersive-body .public-story {
  width: 100%;
  margin-top: 0;
}

.story-immersive-body .public-story .story-shell {
  overflow: visible;
  border: 0;
  border-radius: 0 0 34px 34px;
  background: transparent;
  box-shadow: none;
}

.story-immersive-body .public-story .story-shell::before {
  display: none;
}

.story-immersive-body.memory-experience-ready .story-page-content {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.memory-showcase-card {
  min-height: 156px;
  border-radius: 22px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.memory-showcase-card:hover,
.memory-showcase-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(185, 122, 32, 0.36);
  box-shadow: 0 24px 64px rgba(52, 39, 20, 0.12);
}

.memory-showcase-card::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(185, 122, 32, 0.12));
}

.story-text-card,
.video-panel,
.story-gallery-wrap {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 243, 0.9));
  box-shadow: 0 24px 76px rgba(52, 39, 20, 0.09);
}

.story-section-title span {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1d7;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-section-title h2 {
  margin-top: 8px;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.story-text {
  max-width: 880px;
  color: #2f3742;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.82;
}

.video-panel iframe,
.video-panel video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 20px 62px rgba(20, 27, 34, 0.14);
}

.story-gallery {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.story-gallery a {
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(52, 39, 20, 0.1);
}

.story-gallery a::after {
  content: "Tap to open";
  opacity: 1;
  background: rgba(20, 27, 34, 0.7);
  backdrop-filter: blur(10px);
}

.story-gallery img {
  aspect-ratio: 4 / 5;
}

.voice-memory {
  border-radius: 34px;
  background:
    linear-gradient(135deg, #081114 0%, #132025 48%, #080d10 100%);
  box-shadow: 0 36px 110px rgba(5, 12, 14, 0.34);
}

.voice-memory::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117, 223, 208, 0.7), transparent);
}

.voice-memory-gate {
  min-height: clamp(300px, 56vh, 560px);
  align-content: center;
}

.voice-memory-gate strong {
  max-width: 860px;
  font-size: clamp(40px, 8.5vw, 94px);
  line-height: 0.95;
  text-wrap: balance;
}

.voice-memory-gate > span:not(.voice-memory-pill) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 2.2vw, 22px);
}

.voice-play-symbol {
  width: 86px;
  height: 86px;
  font-size: 0;
}

.voice-play-symbol::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #171016;
}

.voice-wave {
  opacity: 0.96;
}

.voice-memory-player {
  background: rgba(255, 255, 255, 0.04);
}

.voice-memory-player p {
  display: grid;
  gap: 3px;
}

.voice-memory-player p strong {
  color: #fff;
  font-size: 20px;
}

.voice-memory-player p span {
  color: rgba(255, 255, 255, 0.72);
}

.time-capsule {
  border-radius: 34px;
  padding: clamp(26px, 6vw, 56px);
}

.time-capsule.is-locked {
  min-height: clamp(420px, 62vh, 700px);
  align-content: center;
  border-color: rgba(255, 207, 136, 0.34);
  box-shadow: 0 38px 120px rgba(94, 9, 9, 0.34);
}

.time-capsule.is-locked h2,
.time-capsule.is-open h2 {
  font-size: clamp(42px, 8.8vw, 96px);
  line-height: 0.94;
}

.capsule-countdown {
  max-width: 860px;
  gap: 12px;
}

.capsule-countdown span {
  min-height: clamp(100px, 18vw, 150px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.13);
}

.capsule-countdown strong {
  font-size: clamp(38px, 8vw, 86px);
}

.time-capsule.is-open {
  background:
    linear-gradient(135deg, #fffaf3 0%, #ffffff 48%, #f8efe0 100%);
  border-color: rgba(185, 122, 32, 0.24);
}

.time-capsule.is-open .capsule-open-message {
  max-width: 880px;
  padding: clamp(26px, 5vw, 54px);
  border-radius: 28px;
  border-color: rgba(185, 122, 32, 0.22);
  background:
    linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  font-size: clamp(20px, 2.7vw, 28px);
  line-height: 1.72;
}

.time-capsule-pending {
  border-radius: 34px;
  min-height: clamp(320px, 48vh, 560px);
  align-content: center;
}

.capsule-letter-preview {
  border-radius: 24px;
}

.lightbox {
  background:
    linear-gradient(180deg, rgba(8, 10, 12, 0.96), rgba(8, 10, 12, 0.9));
}

.lightbox-close,
.lightbox-nav {
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .story-public-body {
    background:
      linear-gradient(180deg, #15110e 0%, #231912 220px, #fff6e8 560px, #fffaf3 100%);
  }

  .public-story {
    width: min(100% - 10px, 1120px);
  }

  .public-story .story-shell {
    border-radius: 24px;
  }

  .story-shell > :not(.story-hero-link) {
    margin-left: 10px;
    margin-right: 10px;
  }

  .story-hero-link,
  .story-hero-placeholder {
    border-radius: 24px 24px 0 0;
  }

  .story-hero-image {
    aspect-ratio: 4 / 5;
    max-height: 74vh;
  }

  .story-hero-hint {
    left: 12px;
    right: 12px;
    justify-content: center;
  }

  .story-intro-card,
  .memory-showcase,
  .story-text-card,
  .video-panel,
  .story-gallery-wrap,
  .voice-memory,
  .time-capsule {
    border-radius: 22px;
  }

  .story-intro-card {
    padding: 20px;
  }

  .story-intro-card h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .story-meta-grid,
  .memory-showcase-grid {
    grid-template-columns: 1fr;
  }

  .memory-showcase-card {
    min-height: 132px;
  }

  .story-gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .story-gallery a {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .story-gallery img {
    aspect-ratio: 4 / 5;
  }

  .voice-memory-gate {
    min-height: 420px;
  }

  .voice-memory-gate strong {
    font-size: clamp(40px, 14vw, 62px);
  }

  .voice-play-symbol {
    width: 78px;
    height: 78px;
  }

  .voice-wave {
    min-height: 72px;
    overflow: hidden;
  }

  .time-capsule.is-locked {
    min-height: 500px;
  }

  .time-capsule.is-locked h2,
  .time-capsule.is-open h2 {
    font-size: clamp(38px, 13vw, 62px);
  }

  .capsule-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capsule-countdown span {
    min-height: 112px;
  }

  .lightbox {
    padding: 10px;
  }

  .lightbox img {
    max-height: 82vh;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-wave i {
    animation: none;
  }

  .memory-showcase-card,
  .story-gallery img {
    transition: none;
  }
}

/* Final customer setup polish */
.customer-dashboard,
.story-editor {
  padding-bottom: 42px;
}

.customer-dashboard-hero,
.story-editor-hero {
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 30px;
  background:
    linear-gradient(135deg, #ffffff 0%, #fff8ed 58%, #f7efe2 100%);
  box-shadow: 0 26px 82px rgba(52, 39, 20, 0.12);
}

.customer-dashboard-hero h1,
.story-editor-hero h1 {
  letter-spacing: 0;
  text-wrap: balance;
}

.customer-help-card,
.setup-progress {
  border-radius: 22px;
  box-shadow: 0 18px 52px rgba(52, 39, 20, 0.08);
}

.customer-quick-steps article,
.customer-story-card,
.setup-step-card {
  border-radius: 26px;
  box-shadow: 0 20px 62px rgba(52, 39, 20, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.customer-quick-steps article:hover,
.customer-story-card:hover,
.setup-step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 122, 32, 0.3);
  box-shadow: 0 26px 76px rgba(52, 39, 20, 0.12);
}

.setup-step-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}

.setup-step-head > span {
  background:
    linear-gradient(135deg, #141b22 0%, #2a3540 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(20, 27, 34, 0.16);
}

.setup-step-head h2 {
  letter-spacing: 0;
}

.setup-help-grid span,
.preview-before-publish,
.memory-layer-summary,
.info-panel {
  border-radius: 20px;
}

.guided-story-form input,
.guided-story-form textarea,
.guided-story-form select {
  border-radius: 16px;
}

.guided-story-form input:focus,
.guided-story-form textarea:focus,
.guided-story-form select:focus {
  border-color: rgba(185, 122, 32, 0.64);
  box-shadow: 0 0 0 4px rgba(185, 122, 32, 0.12);
}

.voice-recorder {
  border-radius: 22px;
  background:
    linear-gradient(135deg, #f7fffc 0%, #ffffff 62%, #fff8ec 100%);
  box-shadow: 0 18px 46px rgba(52, 39, 20, 0.07);
}

.voice-recorder-actions .button,
.customer-primary-actions .button,
.preview-before-publish .button {
  border-radius: 999px;
}

.media-preview-card {
  border-radius: 20px;
  overflow: hidden;
}

.media-preview-card img {
  transition: transform 220ms ease;
}

.media-preview-card:hover img {
  transform: scale(1.025);
}

@media (max-width: 720px) {
  .customer-dashboard,
  .story-editor {
    width: min(100% - 14px, 1120px);
  }

  .customer-dashboard-hero,
  .story-editor-hero,
  .setup-step-card,
  .customer-story-card {
    border-radius: 22px;
  }

  .setup-step-head {
    gap: 12px;
  }

  .setup-step-head > span {
    width: 44px;
    height: 44px;
  }

  .customer-primary-actions .button,
  .voice-recorder-actions .button,
  .voice-recorder-actions button {
    min-height: 48px;
  }
}


/* Smart Stone GLB experience pass */
.smart-tree-experience[data-smart-tree] {
  background: #080706;
}

.tree-branch span {
  align-items: center;
  gap: 7px;
}

.tree-branch span img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 216, 137, 0.72));
}

.tree-branch small {
  position: relative;
  z-index: 1;
  max-width: 260px;
  color: rgba(255, 246, 224, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.memory-function-stage {
  max-height: min(74svh, 680px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 217, 138, 0.45) rgba(255, 255, 255, 0.08);
}

.memory-function-stage::-webkit-scrollbar {
  width: 8px;
}

.memory-function-stage::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 217, 138, 0.45);
}

.memory-stage-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.memory-stage-body p,
.memory-stage-letter p,
.memory-stage-muted {
  margin: 0;
  color: rgba(255, 249, 235, 0.86);
  line-height: 1.65;
}

.memory-stage-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.memory-stage-gallery button {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 166, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
}

.memory-stage-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 180ms ease;
}

.memory-stage-gallery button:hover img,
.memory-stage-gallery button:focus-visible img {
  transform: scale(1.055);
}

.memory-stage-video {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 166, 0.24);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
}

.memory-stage-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.memory-stage-voice {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 226, 166, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 217, 138, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.06);
}

.memory-stage-voice button {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff3d0, #d89b36);
  color: #3b1c0d;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 18px 52px rgba(216, 155, 54, 0.24);
}

.memory-stage-voice audio {
  width: 100%;
}

.memory-stage-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 9px;
  margin: 18px 0 10px;
}

.memory-stage-countdown b,
.memory-stage-countdown small {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(255, 226, 166, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.memory-stage-countdown b {
  border-radius: 14px 14px 4px 4px;
  color: #fff4d6;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 1000;
}

.memory-stage-countdown small {
  min-height: 28px;
  margin-top: -9px;
  border-radius: 4px 4px 14px 14px;
  border-top: 0;
  color: rgba(255, 244, 214, 0.72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.memory-stage-letter {
  margin-top: 16px;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(255, 226, 166, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 244, 214, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(40, 20, 8, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  .smart-tree-gate {
    padding: 84px 18px 38px;
  }

  .smart-tree-gate h2 {
    font-size: clamp(44px, 15vw, 72px);
  }

  .smart-tree-content {
    align-content: start;
    padding: 84px 12px 22px;
  }

  .tree-branch-grid {
    bottom: 18px;
    width: calc(100vw - 20px);
  }

  .memory-function-stage {
    top: 84px;
    width: calc(100vw - 20px);
    max-height: calc(100svh - 112px);
    border-radius: 22px;
  }

  .memory-stage-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.smart-tree-loading {
  margin-top: 14px;
  color: rgba(255, 245, 224, 0.66);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.smart-tree-experience.is-scene-ready .smart-tree-loading {
  opacity: 0;
}


.smart-tree-return {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 46;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(255, 234, 190, 0.32);
  border-radius: 999px;
  background: rgba(17, 12, 9, 0.34);
  color: rgba(255, 246, 229, 0.92);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.02em;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.smart-tree-return:hover,
.smart-tree-return:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 224, 158, 0.56);
  background: rgba(31, 21, 14, 0.58);
}

@media (max-width: 640px) {
  .smart-tree-return {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }
}
.smart-tree-horizon-blend {
  display: none;
}

@media (max-width: 700px) {
  .smart-tree-horizon-blend {
  display: none;
}
}
.memory-layer-quickedit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.memory-layer-quickedit .checkbox-card {
  margin: 0;
  min-width: 150px;
}

.memory-layer-quickedit .checkbox-card span {
  font-weight: 800;
}

@media (max-width: 720px) {
  .memory-layer-quickedit {
    flex-direction: column;
  }

  .memory-layer-quickedit .checkbox-card {
    min-width: 0;
    width: 100%;
  }
}
/* Mobile QR layer polish: keep paid feature cards visible and centered. */
@media (max-width: 720px) {
  .smart-tree-content {
    padding: 72px 12px 18px;
  }

  .smart-tree-content .eyebrow,
  .smart-tree-content h2,
  .smart-tree-content p:not(.eyebrow) {
    max-width: min(330px, calc(100vw - 22px));
  }

  .tree-branch-grid,
  .smart-tree-sign-count-1 .tree-branch-grid,
  .smart-tree-sign-count-2 .tree-branch-grid,
  .smart-tree-sign-count-3 .tree-branch-grid {
    left: 50%;
    right: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(330px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    grid-template-columns: 1fr;
    gap: 8px;
    justify-content: center;
    justify-items: stretch;
    transform: translateX(-50%);
  }

  .tree-branch {
    min-height: 70px;
    padding: 10px 12px 11px;
    border-radius: 17px;
  }

  .tree-branch span {
    gap: 6px;
    font-size: 10px;
  }

  .tree-branch span img {
    width: 15px;
    height: 15px;
  }

  .tree-branch strong {
    font-size: clamp(18px, 6vw, 24px);
    line-height: 0.95;
  }

  .tree-branch small {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.25;
  }

  .smart-tree-sign-count-3 .tree-branch {
    min-height: 64px;
  }

  .smart-tree-sign-count-3 .tree-branch small {
    display: none;
  }

  .smart-tree-hint {
    max-width: min(330px, calc(100vw - 22px));
    font-size: 12px;
  }
}

@media (max-height: 690px) and (max-width: 720px) {
  .tree-branch-grid,
  .smart-tree-sign-count-1 .tree-branch-grid,
  .smart-tree-sign-count-2 .tree-branch-grid,
  .smart-tree-sign-count-3 .tree-branch-grid {
    width: min(340px, calc(100vw - 16px));
    grid-template-columns: 1fr;
  }
  .smart-tree-sign-count-2 .tree-branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smart-tree-sign-count-3 .tree-branch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tree-branch {
    min-height: 58px;
    padding: 9px 9px;
  }

  .tree-branch strong {
    font-size: 16px;
  }

  .tree-branch small {
    display: none;
  }
}
/* Desktop QR layer polish: keep feature cards closer to the scene centre. */
@media (min-width: 721px) {
  .tree-branch-grid,
  .smart-tree-sign-count-1 .tree-branch-grid,
  .smart-tree-sign-count-2 .tree-branch-grid,
  .smart-tree-sign-count-3 .tree-branch-grid {
    left: 50%;
    right: auto;
    bottom: clamp(30px, 5.2vh, 62px);
    width: min(820px, calc(100vw - 56px));
    transform: translateX(-50%);
  }
}
/* Smart Stone memory chamber polish: selected layers become their own scene, not text over the tree. */
.smart-tree-experience.is-layer-open .smart-tree-content > .eyebrow,
.smart-tree-experience.is-layer-open .smart-tree-content > h2,
.smart-tree-experience.is-layer-open .smart-tree-content > p:not(.smart-tree-hint),
.smart-tree-experience.is-layer-open .tree-branch-grid {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px) scale(0.97);
  transition: opacity 360ms ease, transform 360ms ease;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  top: auto;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(760px, calc(100vw - 32px));
  max-height: min(56svh, 500px);
  overflow: auto;
  border-color: rgba(255, 225, 158, 0.42);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 219, 143, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(17, 11, 8, 0.9), rgba(45, 28, 17, 0.76));
  box-shadow:
    0 32px 120px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 244, 214, 0.24),
    0 0 0 1px rgba(90, 54, 22, 0.32);
}

.smart-tree-experience.is-layer-story::after,
.smart-tree-experience.is-layer-voice::after,
.smart-tree-experience.is-layer-time_capsule::after {
  opacity: 0.48;
}

.smart-tree-experience.is-layer-story .memory-function-stage {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 219, 143, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(24, 16, 10, 0.9), rgba(55, 34, 19, 0.76));
}

.smart-tree-experience.is-layer-voice .memory-function-stage {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 224, 152, 0.24), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 181, 92, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(19, 17, 14, 0.9), rgba(45, 31, 20, 0.76));
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 222, 160, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(25, 13, 14, 0.92), rgba(55, 30, 22, 0.78));
}

.memory-function-stage .memory-stage-body {
  max-height: 22svh;
  overflow: auto;
  padding-right: 4px;
}

.memory-function-stage .memory-stage-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.memory-function-stage .memory-stage-gallery button {
  border: 1px solid rgba(255, 224, 160, 0.24);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 246, 226, 0.08);
  cursor: pointer;
}

.memory-function-stage .memory-stage-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.memory-stage-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 14px;
  border: 0;
  border-radius: 16px;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(350px, calc(100vw - 18px));
    max-height: 54svh;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 16px;
    border-radius: 22px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .memory-function-stage .memory-stage-body {
    max-height: 18svh;
  }
}
/* Layer worlds: Story, Voice and Secret become dedicated chambers inside the same lightweight Three.js scene. */
.smart-tree-experience.is-layer-open .smart-tree-content {
  pointer-events: none;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  pointer-events: auto;
  backdrop-filter: blur(22px) saturate(1.18);
  transform: translateX(-50%) translateY(0) scale(1);
}

.smart-tree-experience.is-layer-open .memory-function-stage::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 238, 184, 0.18), transparent 32%, rgba(255, 183, 90, 0.12));
  mix-blend-mode: screen;
}

.memory-function-stage .memory-stage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 225, 160, 0.2);
  padding-top: 14px;
}

.memory-function-stage .memory-stage-actions button,
.memory-stage-voice button {
  border: 1px solid rgba(255, 228, 162, 0.46);
  border-radius: 999px;
  background: linear-gradient(135deg, #f0b44c, #c98726);
  color: #17100a;
  font-weight: 800;
  padding: 10px 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.memory-stage-voice {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.memory-stage-voice audio {
  width: 100%;
  filter: sepia(0.22) saturate(1.2);
}

.memory-stage-letter {
  border: 1px solid rgba(255, 225, 168, 0.32);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255, 239, 205, 0.16), rgba(98, 52, 28, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.memory-stage-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.memory-stage-countdown b,
.memory-stage-countdown small {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 14px;
  background: rgba(255, 235, 178, 0.12);
  border: 1px solid rgba(255, 230, 165, 0.18);
}

.memory-stage-countdown b {
  color: #fff4d3;
  font-size: 22px;
}

.memory-stage-countdown small {
  color: rgba(255, 244, 224, 0.72);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    bottom: clamp(28px, 4.8vh, 58px);
    left: 50%;
    width: min(780px, 58vw);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(356px, calc(100vw - 20px));
    max-height: 48svh;
  }

  .memory-stage-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Stronger dedicated layer chamber composition. */
.smart-tree-experience.is-layer-open::before {
  opacity: 0.82;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  border-width: 1px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 226, 158, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(19, 13, 11, 0.9), rgba(58, 37, 22, 0.74));
}

.smart-tree-experience.is-layer-story .memory-function-stage h3::before,
.smart-tree-experience.is-layer-voice .memory-function-stage h3::before,
.smart-tree-experience.is-layer-time_capsule .memory-function-stage h3::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff0b8, #c98932);
  box-shadow: 0 0 18px rgba(255, 201, 103, 0.42);
}

.smart-tree-experience.is-layer-story .memory-function-stage {
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.44), 0 0 42px rgba(255, 193, 94, 0.12), inset 0 1px 0 rgba(255, 250, 222, 0.2);
}

.smart-tree-experience.is-layer-voice .memory-function-stage {
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.44), 0 0 52px rgba(255, 178, 82, 0.16), inset 0 1px 0 rgba(255, 250, 222, 0.2);
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage {
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.44), 0 0 52px rgba(255, 116, 82, 0.14), inset 0 1px 0 rgba(255, 250, 222, 0.2);
}


/* 20260714ai: stronger separation for Story / Voice / Secret 3D chambers. */
.smart-tree-experience.is-layer-open .smart-tree-canvas {
  filter: saturate(1.06) contrast(1.03);
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  width: min(700px, calc(100vw - 28px));
  max-height: min(54svh, 500px);
}

.smart-tree-experience.is-layer-open .memory-function-stage h3 {
  font-size: clamp(30px, 5vw, 54px);
}

.smart-tree-experience.is-layer-open .memory-stage-body {
  max-height: 18svh;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(350px, calc(100vw - 18px));
    max-height: 44svh;
    padding: 15px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    font-size: clamp(26px, 9vw, 38px);
  }

  .smart-tree-experience.is-layer-open .memory-stage-body {
    max-height: 15svh;
  }

  .smart-tree-experience.is-layer-open .memory-stage-actions {
    margin-top: 12px;
  }
}
/* 20260714ak: true visual scene transition for Story / Voice / Secret. */
.smart-tree-experience.is-layer-open .smart-tree-content > .eyebrow,
.smart-tree-experience.is-layer-open .smart-tree-content > h2,
.smart-tree-experience.is-layer-open .smart-tree-content > p,
.smart-tree-experience.is-layer-open .tree-branch-grid {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-24px) scale(0.96) !important;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(760px, calc(100vw - 28px));
  max-height: min(42svh, 430px);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 232, 169, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(13, 9, 7, 0.74), rgba(50, 30, 18, 0.56));
  border-color: rgba(255, 220, 145, 0.52);
  box-shadow:
    0 34px 140px rgba(0, 0, 0, 0.48),
    0 0 56px rgba(245, 179, 76, 0.14),
    inset 0 1px 0 rgba(255, 246, 220, 0.24);
}

.smart-tree-experience.is-layer-open .memory-function-stage h3 {
  font-size: clamp(26px, 4.4vw, 48px);
}

.smart-tree-experience.is-layer-open .memory-stage-body {
  max-height: 16svh;
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    left: 50%;
    bottom: clamp(26px, 4vh, 48px);
    width: min(720px, 54vw);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(348px, calc(100vw - 18px));
    max-height: 38svh;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 14px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    font-size: clamp(23px, 7.6vw, 32px);
  }

  .smart-tree-experience.is-layer-open .memory-stage-body {
    max-height: 12svh;
  }
}

/* 20260714al: cleaner premium chamber scenes, less demo-like white geometry. */
.smart-tree-experience.is-layer-open::before {
  opacity: 0.55 !important;
}

.smart-tree-experience.is-layer-open::after {
  opacity: 0.32 !important;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  width: min(660px, calc(100vw - 28px));
  max-height: min(38svh, 390px);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 226, 158, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(16, 10, 7, 0.78), rgba(42, 25, 15, 0.52));
  border-color: rgba(255, 224, 154, 0.48);
  box-shadow:
    0 28px 110px rgba(0, 0, 0, 0.42),
    0 0 40px rgba(235, 171, 79, 0.11),
    inset 0 1px 0 rgba(255, 246, 220, 0.2);
}

.smart-tree-experience.is-layer-open .memory-function-stage::before {
  opacity: 0.45;
}

.smart-tree-experience.is-layer-open .memory-stage-body {
  max-height: 14svh;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(348px, calc(100vw - 18px));
    max-height: 40svh;
  }
}
/* 20260714am: premium content polish inside Story / Voice / Secret chambers. */
.memory-function-stage > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid rgba(255, 226, 155, 0.22);
  border-radius: 999px;
  background: rgba(255, 223, 145, 0.12);
  color: #ffe2a4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-stage-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 12px;
}

.memory-stage-mini-card,
.memory-stage-empty {
  border: 1px solid rgba(255, 226, 158, 0.22);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 224, 151, 0.16), transparent 46%),
    rgba(255, 244, 220, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 250, 226, 0.13);
}

.memory-stage-mini-card b,
.memory-stage-empty b {
  display: block;
  color: #fff0c5;
  font-size: 15px;
  margin-bottom: 6px;
}

.memory-stage-mini-card small,
.memory-stage-empty p {
  color: rgba(255, 245, 225, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.memory-stage-section-title {
  margin: 16px 0 9px;
  color: rgba(255, 231, 177, 0.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-function-stage .memory-stage-gallery {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.memory-function-stage .memory-stage-gallery button {
  position: relative;
  min-height: 88px;
}

.memory-function-stage .memory-stage-gallery button span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(12, 8, 5, 0.58);
  color: #fff3d5;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.memory-function-stage .memory-stage-gallery button:hover span,
.memory-function-stage .memory-stage-gallery button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.memory-stage-voice-premium {
  position: relative;
  border: 1px solid rgba(255, 226, 158, 0.28);
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at 72% 8%, rgba(255, 205, 122, 0.18), transparent 40%),
    linear-gradient(135deg, rgba(255, 238, 194, 0.1), rgba(52, 32, 19, 0.2));
}

.voice-wave {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-items: end;
  gap: 5px;
  height: 54px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(255, 238, 194, 0.08);
  overflow: hidden;
}

.voice-wave i {
  display: block;
  height: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2bf, #d99732);
  box-shadow: 0 0 18px rgba(255, 196, 86, 0.28);
  animation: slateVoiceWave 1.8s ease-in-out infinite;
}

.voice-wave i:nth-child(2n) { height: 66%; animation-delay: -0.35s; }
.voice-wave i:nth-child(3n) { height: 92%; animation-delay: -0.72s; }
.voice-wave i:nth-child(5n) { height: 48%; animation-delay: -1.1s; }

@keyframes slateVoiceWave {
  0%, 100% { transform: scaleY(0.62); opacity: 0.58; }
  45% { transform: scaleY(1); opacity: 1; }
}

.memory-stage-empty-secret {
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 189, 120, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 239, 202, 0.1), rgba(80, 34, 24, 0.16));
}

.memory-stage-countdown {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.memory-stage-countdown > div {
  display: grid;
  gap: 6px;
}

.memory-stage-countdown b,
.memory-stage-countdown small {
  min-height: 0;
}

.memory-stage-countdown b {
  padding: 10px 6px;
  font-size: clamp(22px, 4vw, 34px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 168, 0.24), transparent 52%),
    rgba(255, 235, 178, 0.1);
}

.memory-stage-countdown small {
  padding: 7px 6px;
}

.memory-stage-letter-open {
  position: relative;
  color: #fff3dc;
}

.memory-stage-letter-open::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  pointer-events: none;
  border: 1px solid rgba(255, 230, 170, 0.12);
}

@media (max-width: 720px) {
  .memory-stage-shell {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .memory-stage-mini-card {
    display: none;
  }

  .memory-function-stage .memory-stage-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .memory-function-stage .memory-stage-gallery button {
    flex: 0 0 92px;
    scroll-snap-align: start;
  }

  .memory-stage-voice-premium {
    padding: 12px;
  }

  .voice-wave {
    height: 42px;
    margin-bottom: 10px;
  }

  .memory-stage-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-wave i {
    animation: none;
  }
}

/* 20260714an: scene composition tuning from desktop/mobile screenshots. */
.smart-tree-experience.is-layer-open .memory-function-stage {
  background:
    radial-gradient(circle at 22% 8%, rgba(255, 226, 158, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(16, 10, 7, 0.82), rgba(42, 25, 15, 0.5));
}

.memory-stage-actions button,
.memory-stage-voice button,
.memory-function-stage button {
  -webkit-tap-highlight-color: transparent;
}

.memory-stage-actions button {
  color: #16100a !important;
  text-decoration: none !important;
}

.memory-stage-actions strong {
  color: rgba(255, 244, 220, 0.92);
  white-space: nowrap;
}

.memory-stage-voice-premium {
  background:
    radial-gradient(circle at 70% 6%, rgba(255, 205, 122, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(255, 238, 194, 0.075), rgba(52, 32, 19, 0.16));
}

.voice-wave {
  background: rgba(255, 238, 194, 0.065);
}

.memory-stage-empty,
.memory-stage-mini-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 224, 151, 0.12), transparent 46%),
    rgba(255, 244, 220, 0.055);
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(680px, 50vw);
    max-height: min(40svh, 380px);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(344px, calc(100vw - 18px));
    max-height: 39svh;
    background:
      radial-gradient(circle at 22% 8%, rgba(255, 226, 158, 0.15), transparent 32%),
      linear-gradient(135deg, rgba(16, 10, 7, 0.8), rgba(42, 25, 15, 0.48));
  }

  .memory-stage-actions {
    gap: 10px;
  }

  .memory-stage-actions button {
    padding: 10px 13px;
  }

  .memory-stage-actions strong {
    font-size: 13px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    line-height: 0.98;
  }
}
/* 20260714ao: screenshot polish - cleaner chambers, better mobile balance. */
.smart-tree-experience.is-layer-open .memory-function-stage {
  max-height: min(44svh, 430px);
  background:
    radial-gradient(circle at 20% 7%, rgba(255, 226, 158, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(14, 9, 7, 0.84), rgba(42, 25, 15, 0.48));
}

.smart-tree-experience.is-layer-open .memory-function-stage h3 {
  letter-spacing: -0.01em;
}

.smart-tree-experience.is-layer-open .memory-stage-body {
  max-height: 17svh;
}

.memory-stage-actions {
  position: relative;
  z-index: 2;
}

.memory-stage-actions button {
  min-height: 42px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.18);
}

.memory-stage-section-title,
.memory-stage-muted {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .smart-tree-content {
    padding: 68px 10px 16px;
  }

  .smart-tree-content h2 {
    max-width: min(300px, calc(100vw - 20px));
    font-size: clamp(34px, 10.4vw, 44px);
    line-height: 0.92;
    text-shadow: 0 18px 48px rgba(0, 0, 0, 0.56);
  }

  .smart-tree-content p:not(.eyebrow) {
    max-width: min(292px, calc(100vw - 20px));
    font-size: 14px;
    line-height: 1.34;
  }

  .tree-branch-grid,
  .smart-tree-sign-count-1 .tree-branch-grid,
  .smart-tree-sign-count-2 .tree-branch-grid,
  .smart-tree-sign-count-3 .tree-branch-grid {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(326px, calc(100vw - 18px));
    gap: 7px;
  }

  .tree-branch {
    min-height: 60px;
    padding: 9px 11px 10px;
  }

  .tree-branch strong {
    font-size: clamp(18px, 5.7vw, 23px);
  }

  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(342px, calc(100vw - 18px));
    max-height: 43svh;
    padding: 14px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    font-size: clamp(25px, 7.6vw, 33px);
    line-height: 0.98;
  }

  .smart-tree-experience.is-layer-open .memory-stage-body {
    max-height: 14svh;
  }

  .memory-stage-actions {
    padding-top: 10px;
    margin-top: 11px;
  }

  .memory-stage-actions button {
    min-height: 40px;
    padding: 9px 12px;
  }

  .memory-stage-actions strong {
    font-size: 12px;
  }

  .memory-stage-voice-premium {
    padding: 11px;
  }

  .voice-wave {
    height: 38px;
  }
}

@media (max-height: 760px) and (max-width: 720px) {
  .smart-tree-content h2 {
    font-size: clamp(31px, 9.5vw, 40px);
  }

  .smart-tree-content p:not(.eyebrow) {
    display: none;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage {
    max-height: 46svh;
  }
}
/* 20260714ap: premium clean pass for chamber scenes. */
.smart-tree-experience.is-layer-open::before {
  opacity: 0.42 !important;
}

.smart-tree-experience.is-layer-open::after {
  opacity: 0.22 !important;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  width: min(640px, calc(100vw - 28px));
  max-height: min(46svh, 420px);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 226, 158, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(12, 8, 6, 0.86), rgba(42, 25, 15, 0.46));
  border-color: rgba(255, 226, 158, 0.42);
}

.smart-tree-experience.is-layer-open .memory-function-stage::before {
  opacity: 0.26;
}

.smart-tree-experience.is-layer-open .memory-function-stage h3 {
  max-width: 13ch;
}

.smart-tree-experience.is-layer-story .memory-function-stage h3,
.smart-tree-experience.is-layer-voice .memory-function-stage h3,
.smart-tree-experience.is-layer-time_capsule .memory-function-stage h3 {
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
}

.memory-stage-shell {
  grid-template-columns: minmax(0, 1fr) minmax(124px, 0.36fr);
  gap: 12px;
}

.memory-stage-mini-card,
.memory-stage-empty,
.memory-stage-voice-premium {
  border-color: rgba(255, 226, 158, 0.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 224, 151, 0.08), transparent 44%),
    rgba(255, 244, 220, 0.04);
}

.memory-stage-voice-premium button {
  width: 100%;
}

.memory-stage-actions {
  border-top-color: rgba(255, 225, 160, 0.16);
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(640px, 46vw);
    bottom: clamp(22px, 3.4vh, 42px);
  }
}

@media (max-width: 720px) {
  .smart-tree-content {
    padding-top: 64px;
  }

  .smart-tree-content h2 {
    max-width: min(286px, calc(100vw - 20px));
    font-size: clamp(31px, 9.2vw, 39px);
  }

  .smart-tree-content .eyebrow {
    font-size: 10px;
  }

  .tree-branch-grid,
  .smart-tree-sign-count-1 .tree-branch-grid,
  .smart-tree-sign-count-2 .tree-branch-grid,
  .smart-tree-sign-count-3 .tree-branch-grid {
    width: min(318px, calc(100vw - 18px));
  }

  .tree-branch {
    min-height: 58px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(336px, calc(100vw - 18px));
    max-height: 45svh;
    padding: 13px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    max-width: 12ch;
    font-size: clamp(24px, 7.1vw, 31px);
  }

  .memory-stage-voice-premium audio {
    max-height: 42px;
  }
}

@media (max-height: 740px) and (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    max-height: 43svh;
  }

  .memory-stage-actions {
    margin-top: 8px;
  }
}
/* 20260714aq: emotional ritual pass for Story / Voice / Secret. */
.memory-stage-ritual,
.voice-invitation,
.memory-stage-seal {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 226, 158, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 229, 163, 0.13), transparent 38%),
    rgba(255, 244, 220, 0.045);
}

.memory-stage-ritual b,
.voice-invitation b,
.memory-stage-seal b {
  color: #fff0bf;
  font-size: 14px;
  line-height: 1.18;
}

.memory-stage-ritual small,
.voice-invitation small,
.memory-stage-seal small {
  color: rgba(255, 244, 224, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.story-chapter p:first-child::first-letter {
  color: #f3ba59;
  float: left;
  font-size: 2.6em;
  font-weight: 900;
  line-height: 0.88;
  margin: 0.08em 0.14em 0 0;
  text-shadow: 0 0 22px rgba(244, 183, 83, 0.28);
}

.memory-stage-voice-premium {
  overflow: hidden;
}

.memory-stage-voice-premium::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  pointer-events: none;
  border: 1px solid rgba(255, 231, 177, 0.08);
  box-shadow: inset 0 0 42px rgba(255, 193, 91, 0.055);
}

.memory-function-stage.is-voice-playing .voice-wave i {
  animation-duration: 0.88s;
  box-shadow: 0 0 24px rgba(255, 205, 109, 0.45);
}

.memory-function-stage.is-voice-playing .memory-stage-voice-premium {
  border-color: rgba(255, 224, 150, 0.36);
  box-shadow: 0 0 34px rgba(232, 162, 64, 0.12), inset 0 1px 0 rgba(255, 250, 226, 0.1);
}

.memory-stage-seal {
  background:
    radial-gradient(circle at 82% 6%, rgba(255, 191, 117, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 238, 194, 0.055), rgba(91, 41, 29, 0.12));
}

.memory-stage-seal-open {
  border-color: rgba(255, 226, 158, 0.28);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 229, 163, 0.16), transparent 42%),
    rgba(255, 244, 220, 0.06);
}

.smart-tree-experience.is-layer-time_capsule .memory-stage-countdown {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .memory-stage-ritual,
  .voice-invitation,
  .memory-stage-seal {
    margin: 8px 0 10px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .memory-stage-ritual small,
  .voice-invitation small,
  .memory-stage-seal small {
    display: none;
  }

  .story-chapter p:first-child::first-letter {
    font-size: 2.1em;
  }

  .memory-stage-voice-premium::after {
    inset: 9px;
    border-radius: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-function-stage.is-voice-playing .voice-wave i {
    animation-duration: 1.8s;
  }
}
/* 20260714ar: product-scene clarity pass for Story / Voice / Secret. */
.smart-tree-experience.is-layer-open::before {
  opacity: 0.34 !important;
}

.smart-tree-experience.is-layer-open::after {
  opacity: 0.18 !important;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  bottom: max(24px, env(safe-area-inset-bottom));
  max-height: min(52svh, 510px);
  border-color: rgba(255, 226, 158, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 235, 179, 0.075), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(255, 203, 112, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(9, 7, 6, 0.82), rgba(50, 31, 18, 0.58));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.34),
    0 0 44px rgba(226, 151, 54, 0.08),
    inset 0 1px 0 rgba(255, 244, 219, 0.18);
}

.smart-tree-experience.is-layer-open .memory-function-stage::before {
  opacity: 0.2;
}

.smart-tree-experience.is-layer-open .memory-function-stage > span {
  background: rgba(255, 224, 160, 0.19);
  border: 1px solid rgba(255, 226, 158, 0.24);
  box-shadow: 0 0 22px rgba(255, 189, 91, 0.08);
}

.smart-tree-experience.is-layer-open .memory-function-stage h3 {
  max-width: 16ch;
  text-wrap: balance;
}

.memory-stage-shell {
  align-items: stretch;
}

.memory-stage-shell-story {
  padding: 2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 231, 177, 0.08), rgba(255,255,255,0.025));
}

.memory-stage-body {
  padding-right: 4px;
}

.memory-stage-mini-card {
  display: grid;
  align-content: center;
  min-height: 100%;
  border-radius: 18px;
}

.memory-stage-gallery {
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
}

.memory-stage-gallery button {
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.memory-stage-gallery span {
  background: rgba(16, 11, 8, 0.72);
}

.memory-stage-voice-premium {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 224, 150, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(255, 238, 194, 0.09), rgba(55, 31, 18, 0.18));
}

.voice-invitation {
  border-color: rgba(255, 226, 158, 0.24);
  background: rgba(255, 244, 220, 0.065);
}

.memory-stage-voice button[data-stage-play-voice] {
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px rgba(207, 128, 30, 0.22), inset 0 1px 0 rgba(255,255,255,0.28);
}

.memory-function-stage.is-voice-playing .memory-stage-voice button[data-stage-play-voice] {
  background: linear-gradient(135deg, #fff8dc, #e4a536);
  box-shadow: 0 0 42px rgba(255, 191, 82, 0.34), inset 0 1px 0 rgba(255,255,255,0.32);
}

.memory-stage-seal,
.memory-stage-empty-secret {
  border-color: rgba(255, 226, 158, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.memory-stage-letter-open {
  border-color: rgba(255, 226, 158, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 244, 220, 0.09), rgba(255, 228, 160, 0.035));
}

.memory-stage-actions {
  align-items: center;
  justify-content: space-between;
}

.memory-stage-actions button {
  background: linear-gradient(135deg, #ffd57d, #d99a2e) !important;
  color: #211306 !important;
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(720px, 50vw);
    bottom: clamp(24px, 4vh, 54px);
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage {
    width: min(700px, 48vw);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(348px, calc(100vw - 20px));
    max-height: min(50svh, 430px);
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 14px;
    border-radius: 23px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    max-width: 13ch;
    font-size: clamp(24px, 7vw, 30px);
  }

  .memory-stage-shell {
    grid-template-columns: 1fr;
  }

  .memory-stage-mini-card {
    min-height: 0;
    padding: 11px 12px;
  }

  .memory-stage-mini-card small {
    display: none;
  }

  .memory-stage-gallery {
    display: flex;
    overflow-x: auto;
    gap: 9px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .memory-stage-gallery button {
    flex: 0 0 96px;
    scroll-snap-align: start;
  }

  .memory-stage-actions {
    position: sticky;
    bottom: -14px;
    margin: 12px -2px -2px;
    padding: 10px 0 0;
    background: linear-gradient(180deg, transparent, rgba(18, 10, 6, 0.62) 34%, rgba(18, 10, 6, 0.82));
  }

  .memory-stage-actions button {
    min-height: 42px;
  }

  .memory-stage-actions strong {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .memory-stage-voice-premium {
    gap: 11px;
  }

  .voice-invitation {
    display: none;
  }

  .memory-stage-seal {
    margin-top: 8px;
  }
}
/* 20260714as: final chamber usability polish. */
.smart-tree-experience.is-layer-open .smart-tree-back {
  z-index: 6;
  background: rgba(12, 8, 6, 0.42);
  border-color: rgba(255, 226, 158, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  isolation: isolate;
  min-height: 250px;
  overflow: auto;
  overscroll-behavior: contain;
}

.smart-tree-experience.is-layer-open .memory-function-stage::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 244, 211, 0.06), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255, 184, 78, 0.08), transparent 46%);
  pointer-events: none;
}

.smart-tree-experience.is-layer-story .memory-function-stage {
  max-height: min(58svh, 560px);
}

.smart-tree-experience.is-layer-voice .memory-function-stage {
  max-height: min(54svh, 500px);
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage {
  max-height: min(56svh, 530px);
}

.memory-function-stage .memory-stage-body,
.memory-function-stage .memory-stage-letter-open,
.memory-function-stage .memory-stage-empty {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 217, 138, 0.42) rgba(255,255,255,0.055);
}

.memory-function-stage .memory-stage-body::-webkit-scrollbar,
.memory-function-stage .memory-stage-letter-open::-webkit-scrollbar,
.memory-function-stage .memory-stage-empty::-webkit-scrollbar {
  width: 7px;
}

.memory-function-stage .memory-stage-body::-webkit-scrollbar-thumb,
.memory-function-stage .memory-stage-letter-open::-webkit-scrollbar-thumb,
.memory-function-stage .memory-stage-empty::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 217, 138, 0.42);
}

.memory-stage-actions {
  gap: 12px;
}

.memory-stage-actions strong {
  padding: 8px 10px;
  border: 1px solid rgba(255, 226, 158, 0.14);
  border-radius: 999px;
  background: rgba(255, 244, 220, 0.055);
}

.memory-stage-actions button:focus-visible,
.memory-stage-voice button:focus-visible,
.memory-stage-gallery button:focus-visible {
  outline: 2px solid rgba(255, 223, 145, 0.95);
  outline-offset: 3px;
}

.memory-stage-empty b,
.memory-stage-seal b,
.voice-invitation b,
.memory-stage-mini-card b {
  letter-spacing: -0.01em;
}

.memory-stage-empty p,
.memory-stage-seal small,
.voice-invitation small,
.memory-stage-mini-card small {
  color: rgba(255, 244, 224, 0.78);
}

.smart-tree-experience.is-layer-voice .memory-stage-voice-premium {
  min-height: 172px;
}

.smart-tree-experience.is-layer-time_capsule .memory-stage-countdown {
  gap: 10px;
}

.smart-tree-experience.is-layer-time_capsule .memory-stage-countdown b {
  text-shadow: 0 0 22px rgba(255, 201, 98, 0.24);
}

@media (min-width: 900px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    min-height: 270px;
  }

  .smart-tree-experience.is-layer-story .memory-function-stage {
    width: min(760px, 52vw);
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage {
    width: min(720px, 50vw);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-open .smart-tree-back {
    min-width: 50px;
    min-height: 38px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(350px, calc(100vw - 18px));
    max-height: min(57svh, 500px);
    min-height: 0;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 14px 14px max(12px, env(safe-area-inset-bottom));
  }

  .smart-tree-experience.is-layer-story .memory-function-stage,
  .smart-tree-experience.is-layer-voice .memory-function-stage,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage {
    max-height: min(58svh, 510px);
  }

  .smart-tree-experience.is-layer-open .memory-function-stage > span {
    font-size: 10px;
    padding: 6px 9px;
  }

  .smart-tree-experience.is-layer-open .memory-function-stage h3 {
    max-width: 15ch;
    font-size: clamp(25px, 7.4vw, 32px);
  }

  .memory-function-stage p {
    font-size: 14px;
    line-height: 1.42;
  }

  .memory-stage-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .memory-stage-actions button {
    width: 100%;
    min-width: 0;
  }

  .memory-stage-actions strong {
    max-width: 124px;
    padding: 7px 8px;
    font-size: 11px;
    text-align: right;
  }

  .memory-stage-gallery button {
    flex-basis: 104px;
  }

  .memory-stage-voice audio {
    min-height: 42px;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-stage-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .smart-tree-experience.is-layer-open .memory-function-stage {
    width: min(338px, calc(100vw - 14px));
    padding-inline: 12px;
  }

  .memory-stage-actions strong {
    display: none;
  }

  .memory-stage-actions {
    grid-template-columns: 1fr;
  }
}
/* 20260715aa: full Story reader chamber with real space for text, gallery and video. */
.smart-tree-experience.is-layer-story .memory-function-stage {
  width: min(1080px, calc(100vw - 36px)) !important;
  max-height: min(78svh, 760px) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  padding: clamp(18px, 2.6vw, 28px) !important;
}

.smart-tree-experience.is-layer-story .memory-function-stage h3 {
  max-width: 720px;
  font-size: clamp(32px, 4.6vw, 64px) !important;
}

.memory-stage-story-reader {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(14px, 2.2vw, 24px);
  align-items: start;
  margin-top: 14px;
}

.memory-stage-story-copy,
.memory-stage-story-media {
  min-width: 0;
}

.memory-stage-story-copy .story-chapter {
  max-height: min(42svh, 410px) !important;
  overflow: auto;
  padding: 14px 14px 14px 0;
  border-top: 1px solid rgba(255, 225, 158, 0.18);
  border-bottom: 1px solid rgba(255, 225, 158, 0.12);
}

.memory-stage-story-copy .story-chapter p {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.72;
}

.memory-stage-story-media {
  display: grid;
  gap: 12px;
  align-content: start;
}

.memory-function-stage .memory-stage-story-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  max-height: min(32svh, 300px);
  overflow: auto;
  gap: 10px;
  padding: 2px 4px 6px 0;
}

.memory-function-stage .memory-stage-story-gallery button {
  min-height: 112px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.16), 0 14px 30px rgba(0, 0, 0, 0.16);
}

.memory-function-stage .memory-stage-story-gallery img {
  aspect-ratio: 4 / 3;
}

.memory-stage-video-card {
  margin-top: 0 !important;
}

.memory-stage-video-card iframe {
  min-height: 190px;
}

.memory-stage-empty-compact {
  padding: 13px 14px;
}

.smart-tree-experience.is-layer-story .memory-stage-actions {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(30, 18, 11, 0), rgba(30, 18, 11, 0.76) 38%, rgba(30, 18, 11, 0.92));
}

@media (max-width: 720px) {
  .smart-tree-experience[data-smart-tree] {
    border-radius: 0 !important;
  }

  .smart-tree-experience.is-layer-story .memory-function-stage {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-height: 74svh !important;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    transform: translateY(0) !important;
  }

  .smart-tree-experience.is-layer-story .memory-function-stage h3 {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 0.98;
  }

  .smart-tree-experience.is-layer-story .story-ritual {
    padding: 10px 12px;
  }

  .memory-stage-story-reader {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .memory-stage-story-copy .story-chapter {
    max-height: 24svh !important;
    padding: 10px 4px 10px 0;
  }

  .memory-stage-story-copy .story-chapter p {
    font-size: 15px;
    line-height: 1.58;
  }

  .memory-function-stage .memory-stage-story-gallery {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: 10px;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 8px;
  }

  .memory-function-stage .memory-stage-story-gallery button {
    flex: 0 0 132px;
    min-height: 98px;
    scroll-snap-align: start;
  }

  .memory-stage-video-card iframe {
    min-height: 174px;
  }

  .smart-tree-experience.is-layer-story .memory-stage-actions {
    margin-top: 10px;
  }

  .smart-tree-experience.is-layer-story .memory-stage-actions button {
    flex: 1 1 auto;
    min-height: 48px;
  }
}
/* 20260715ac: Story becomes a guided book / gallery / video journey instead of one cramped panel. */
.smart-tree-experience.is-layer-story .memory-function-stage {
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  width: min(1120px, calc(100vw - 36px)) !important;
  max-height: min(82svh, 760px) !important;
  padding: clamp(16px, 2.2vw, 28px) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 226, 158, 0.24), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(255, 184, 82, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(14, 10, 8, 0.9), rgba(56, 35, 20, 0.58)) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.story-journey {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: min(74svh, 690px);
}

.story-journey-head {
  display: grid;
  gap: 8px;
}

.story-journey-head > span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid rgba(255, 226, 155, 0.26);
  border-radius: 999px;
  background: rgba(255, 223, 145, 0.13);
  color: #ffe2a4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-journey-head h3 {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(34px, 5vw, 68px) !important;
  line-height: 0.96 !important;
}

.story-journey-head p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 246, 225, 0.84);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.45;
}

.story-journey-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 226, 158, 0.18);
  border-radius: 999px;
  background: rgba(255, 244, 220, 0.06);
}

.story-journey-nav button {
  flex: 1 1 120px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 244, 224, 0.78);
  font-weight: 900;
  cursor: pointer;
}

.story-journey-nav button.is-active {
  background: linear-gradient(135deg, #f2bc54, #c98a2b);
  color: #17100a;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), 0 0 26px rgba(255, 195, 92, 0.18);
}

.story-journey-panels {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.story-journey-panel {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.985);
  transition: opacity 280ms ease, transform 280ms ease;
}

.story-journey-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.story-paper-scene {
  grid-template-columns: minmax(0, 1fr);
}

.story-paper {
  position: relative;
  min-height: 100%;
  max-height: 100%;
  overflow: auto;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(255, 226, 158, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 239, 203, 0.16), rgba(83, 48, 25, 0.18)),
    rgba(18, 12, 8, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 226, 0.16), 0 24px 80px rgba(0, 0, 0, 0.2);
}

.story-paper::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 231, 177, 0.09);
  pointer-events: none;
}

.story-book-glow {
  position: absolute;
  right: clamp(18px, 5vw, 76px);
  top: 2px;
  width: min(220px, 34vw);
  aspect-ratio: 1.5;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 211, 122, 0.22), transparent 62%);
  filter: blur(2px);
}

.story-gallery-scene,
.story-video-scene {
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid rgba(255, 226, 158, 0.18);
  border-radius: 24px;
  background: rgba(20, 13, 8, 0.44);
}

.story-floating-gallery {
  display: flex;
  gap: clamp(12px, 1.8vw, 20px);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 217, 138, 0.5) rgba(255, 255, 255, 0.08);
}

.story-floating-photo {
  position: relative;
  flex: 0 0 clamp(150px, 20vw, 240px);
  border: 1px solid rgba(255, 226, 158, 0.28);
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 245, 216, 0.12), rgba(57, 34, 19, 0.18));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26), 0 0 36px rgba(244, 184, 84, 0.08);
  cursor: zoom-in;
  scroll-snap-align: center;
  transform: translateY(var(--float-y, 0));
}

.story-floating-photo:nth-child(2n) { --float-y: 16px; }
.story-floating-photo:nth-child(3n) { --float-y: -10px; }

.story-floating-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.story-floating-photo span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: rgba(15, 10, 7, 0.68);
  color: #fff1c9;
  font-size: 12px;
  font-weight: 900;
}

.story-video-frame {
  overflow: hidden;
  border: 1px solid rgba(255, 226, 158, 0.25);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.story-video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.smart-tree-experience.is-layer-story .memory-stage-actions {
  margin-top: 0;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding: max(54px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .story-journey {
    min-height: calc(100svh - 68px);
    gap: 10px;
  }

  .story-journey-head h3 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .story-journey-head p {
    font-size: 13px;
    line-height: 1.35;
  }

  .story-journey-nav {
    border-radius: 18px;
    padding: 5px;
  }

  .story-journey-nav button {
    flex: 1 1 30%;
    min-height: 38px;
    font-size: 12px;
  }

  .story-paper,
  .story-gallery-scene,
  .story-video-scene {
    border-radius: 18px;
    padding: 14px;
  }

  .story-floating-gallery {
    min-height: 190px;
    padding: 12px 4px 16px;
  }

  .story-floating-photo {
    flex-basis: min(72vw, 240px);
  }

  .smart-tree-experience.is-layer-story .memory-stage-actions {
    padding-top: 10px;
  }

  .smart-tree-experience.is-layer-story .memory-stage-actions strong {
    display: none;
  }

  .smart-tree-experience.is-layer-story .memory-stage-actions button {
    width: 100%;
  }
}
/* 20260715ad: Story layer becomes a fuller premium reading room, not a cramped card. */
.smart-tree-experience.is-layer-story .memory-function-stage {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: clamp(64px, 7vh, 92px) clamp(16px, 4vw, 64px) clamp(18px, 4vh, 46px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 219, 139, 0.2), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(238, 165, 71, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(12, 8, 6, 0.58), rgba(50, 32, 18, 0.32)) !important;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.28) !important;
}

.smart-tree-experience.is-layer-story .memory-function-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 7, 5, 0.72), transparent 34%, transparent 72%, rgba(255, 199, 101, 0.12)),
    radial-gradient(circle at 50% 16%, rgba(255, 226, 156, 0.12), transparent 38%);
  z-index: -1;
}

.smart-tree-experience.is-layer-story .memory-stage-backdrop-object,
.smart-tree-experience.is-layer-story .memory-scene-object {
  opacity: 0.2;
}

.story-journey {
  width: min(1180px, 100%);
  margin: 0 auto;
  min-height: calc(100svh - clamp(90px, 12vh, 138px));
}

.story-journey-head {
  max-width: 920px;
}

.story-journey-nav {
  width: min(680px, 100%);
}

.story-journey-panels {
  min-height: 0;
}

.story-paper-scene.is-active {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(220px, 0.38fr);
  gap: clamp(16px, 2.6vw, 34px);
  align-items: stretch;
}

.story-paper-scene.is-active::after {
  content: "Memory book";
  display: grid;
  align-content: end;
  min-height: 100%;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(255, 226, 158, 0.2);
  border-radius: 26px;
  color: rgba(255, 235, 187, 0.88);
  font-weight: 900;
  letter-spacing: 0.02em;
  background:
    linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.26)),
    radial-gradient(circle at 50% 28%, rgba(255, 214, 125, 0.18), transparent 46%),
    rgba(24, 14, 7, 0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 70px rgba(0,0,0,0.18);
}

.story-paper {
  font-size: clamp(16px, 1.42vw, 20px);
  line-height: 1.64;
  background:
    linear-gradient(135deg, rgba(255, 244, 215, 0.19), rgba(72, 43, 21, 0.22)),
    rgba(16, 10, 7, 0.62);
}

.story-chapter p:first-child::first-letter {
  float: left;
  margin: 7px 10px 0 0;
  color: #ffc85c;
  font-size: 3.4em;
  line-height: 0.72;
  font-weight: 900;
}

.story-gallery-scene.is-active {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 100%;
}

.story-floating-gallery {
  align-items: center;
  min-height: clamp(260px, 46vh, 460px);
  padding-inline: clamp(4px, 3vw, 28px);
}

.story-floating-photo {
  flex-basis: clamp(210px, 24vw, 330px);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.story-floating-photo:hover,
.story-floating-photo:focus-visible {
  transform: translateY(calc(var(--float-y, 0) - 8px)) scale(1.025);
  border-color: rgba(255, 224, 146, 0.62);
  box-shadow: 0 26px 80px rgba(0,0,0,0.34), 0 0 48px rgba(248, 190, 88, 0.18);
}

.story-floating-photo img {
  aspect-ratio: 3 / 4;
}

.story-video-scene.is-active {
  display: grid;
  align-content: center;
  min-height: 100%;
}

.story-video-frame {
  width: min(920px, 100%);
  margin: 0 auto;
}

@media (max-width: 820px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    padding: max(56px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .story-journey {
    min-height: calc(100svh - 66px);
    gap: 9px;
  }

  .story-journey-head {
    gap: 5px;
  }

  .story-journey-head h3 {
    font-size: clamp(28px, 8.8vw, 38px) !important;
    line-height: 1.02 !important;
  }

  .story-journey-head p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .story-paper-scene.is-active {
    display: grid;
    grid-template-columns: 1fr;
  }

  .story-paper-scene.is-active::after {
    display: none;
  }

  .story-paper {
    min-height: 0;
    padding: 16px;
    font-size: 15px;
    line-height: 1.55;
  }

  .story-floating-gallery {
    min-height: 0;
    height: min(44svh, 330px);
    align-items: stretch;
  }

  .story-floating-photo {
    flex-basis: min(76vw, 270px);
  }

  .story-floating-photo img {
    height: 100%;
    aspect-ratio: auto;
  }

  .story-video-frame iframe {
    min-height: 220px;
  }
}
/* 20260715ae: Object portals and readable Story room. */
.story-object-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  width: min(920px, 100%);
}

.story-object-button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 224, 148, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 229, 164, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255, 238, 194, 0.12), rgba(43, 26, 15, 0.3));
  color: rgba(255, 244, 222, 0.82);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 54px rgba(0,0,0,0.18);
}

.story-object-button::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px 58px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 203, 91, 0.9), transparent);
  opacity: 0;
}

.story-object-button.is-active {
  border-color: rgba(255, 215, 131, 0.62);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 228, 160, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(245, 180, 67, 0.34), rgba(60, 34, 15, 0.36));
  color: #fff7df;
}

.story-object-button.is-active::after { opacity: 1; }

.story-object-button i {
  grid-row: 1 / span 2;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 226, 158, 0.38);
  border-radius: 15px;
  background: rgba(255, 222, 148, 0.14);
  box-shadow: inset 0 0 18px rgba(255, 223, 147, 0.08), 0 0 26px rgba(255, 198, 95, 0.1);
}

.story-object-button strong {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.05;
}

.story-object-button small {
  color: rgba(255, 239, 209, 0.68);
  font-size: 12px;
  line-height: 1.25;
}

.story-object-book i::before,
.story-object-book i::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 14px;
  height: 22px;
  border: 1px solid rgba(255, 235, 178, 0.8);
  background: linear-gradient(135deg, rgba(255, 231, 159, 0.34), rgba(156, 91, 35, 0.22));
}
.story-object-book i::before { left: 8px; transform: skewY(-9deg); border-radius: 4px 1px 1px 4px; }
.story-object-book i::after { right: 8px; transform: skewY(9deg); border-radius: 1px 4px 4px 1px; }

.story-object-photos i::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 7px;
  border: 2px solid rgba(255, 235, 178, 0.85);
  background: linear-gradient(135deg, transparent 52%, rgba(255, 217, 126, 0.58) 54%);
}
.story-object-photos i::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 235, 178, 0.9);
}

.story-object-video i::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 18px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 235, 178, 0.82);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.story-journey-nav { display: none !important; }
.story-journey-panels {
  overflow: visible !important;
}
.story-journey-panel {
  position: relative !important;
  inset: auto !important;
  display: none !important;
  min-height: 0;
}
.story-journey-panel.is-active {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
.story-readable-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.38fr);
  gap: clamp(16px, 2.4vw, 32px);
  min-height: min(46svh, 440px);
}
.story-readable-page {
  min-height: 0 !important;
  max-height: min(48svh, 470px) !important;
  overflow: auto !important;
}
.story-readable-page .story-chapter {
  color: rgba(255, 248, 230, 0.92);
}
.story-readable-page .story-chapter p {
  margin: 0 0 1em;
}
.story-art-card {
  display: grid;
  align-content: end;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255, 226, 158, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 210, 112, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.16));
  color: rgba(255, 242, 216, 0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 70px rgba(0,0,0,0.18);
}
.story-art-card b { font-size: 18px; color: #ffe1a0; }
.story-art-card p { margin: 0; color: rgba(255,244,224,0.72); line-height: 1.45; }
.story-book-object {
  position: relative;
  width: min(210px, 100%);
  aspect-ratio: 1.55;
  margin: 0 auto auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,0.38)) drop-shadow(0 0 24px rgba(255,183,82,0.18));
}
.story-book-object span {
  position: absolute;
  top: 18%;
  width: 46%;
  height: 66%;
  border: 1px solid rgba(255, 224, 148, 0.42);
  background:
    linear-gradient(90deg, rgba(255,238,183,0.28), rgba(119,61,25,0.38)),
    repeating-linear-gradient(0deg, rgba(86,45,20,0.2), rgba(86,45,20,0.2) 2px, transparent 2px, transparent 10px);
}
.story-book-object span:first-child { left: 8%; transform: rotateY(26deg) rotateZ(-5deg); border-radius: 9px 2px 2px 9px; }
.story-book-object span:last-child { right: 8%; transform: rotateY(-26deg) rotateZ(5deg); border-radius: 2px 9px 9px 2px; }

@media (max-width: 820px) {
  .story-object-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .story-object-button {
    min-height: 58px;
    padding: 9px 11px;
    border-radius: 18px;
  }
  .story-object-button i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .story-object-button small {
    display: none;
  }
  .story-readable-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
  }
  .story-art-card {
    display: none;
  }
  .story-readable-page {
    max-height: calc(100svh - 310px) !important;
    min-height: 180px !important;
    padding: 15px !important;
  }
  .story-readable-page .memory-stage-section-title {
    margin-bottom: 10px;
  }
  .story-readable-page .story-chapter p {
    font-size: 15px;
    line-height: 1.55;
  }
  .story-chapter p:first-child::first-letter {
    float: none !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}
/* 20260715af: Story realm reset - three object portals, then separate full scenes. */
.smart-tree-experience.is-layer-story .memory-scene-object,
.smart-tree-experience.is-layer-story .memory-stage-backdrop-object,
.smart-tree-experience.is-layer-story .story-object-nav,
.smart-tree-experience.is-layer-story .story-journey-nav,
.smart-tree-experience.is-layer-story .story-readable-layout,
.smart-tree-experience.is-layer-story .story-art-card,
.smart-tree-experience.is-layer-story .story-book-object {
  display: none !important;
  opacity: 0 !important;
}

.smart-tree-experience.is-layer-story .memory-function-stage {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: clamp(60px, 8vh, 86px) clamp(18px, 4vw, 76px) clamp(18px, 4vh, 42px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 224, 150, 0.22), transparent 35%),
    radial-gradient(circle at 20% 78%, rgba(217, 143, 51, 0.11), transparent 42%),
    linear-gradient(135deg, rgba(19, 12, 8, 0.84), rgba(92, 62, 34, 0.42)) !important;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.36) !important;
  transform: none !important;
  overflow: hidden !important;
}

.story-realm {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.2vh, 24px);
  width: min(1180px, 100%);
  height: 100%;
  margin: 0 auto;
}
.story-realm .story-journey-head { max-width: 780px; }
.story-realm-hub {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
  justify-items: center;
  padding: clamp(12px, 3vh, 34px) 0;
}
.story-realm-object {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff2ce;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(260px, 100%);
  padding: 0;
  cursor: pointer;
  text-align: center;
  filter: drop-shadow(0 28px 36px rgba(0,0,0,0.34));
  transform: translateY(var(--realm-y, 0)) scale(1);
  transition: transform 260ms ease, filter 260ms ease;
}
.story-realm-object:hover,
.story-realm-object:focus-visible {
  transform: translateY(calc(var(--realm-y, 0) - 10px)) scale(1.035);
  filter: drop-shadow(0 34px 48px rgba(0,0,0,0.4)) drop-shadow(0 0 32px rgba(255,190,86,0.3));
  outline: none;
}
.story-realm-object img {
  display: block;
  width: min(230px, 70vw);
  max-height: min(28vh, 220px);
  object-fit: contain;
  pointer-events: none;
}
.story-realm-gallery { --realm-y: 18px; }
.story-realm-video { --realm-y: 4px; }
.story-realm-object strong {
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.04;
  text-shadow: 0 2px 14px rgba(0,0,0,0.46);
}
.story-realm-object small { color: rgba(255, 239, 208, 0.76); font-weight: 800; }
.story-realm.is-in-scene .story-journey-head,
.story-realm.is-in-scene .story-realm-hub { display: none !important; }
.story-realm-scenes { display: none; min-height: 0; overflow: visible !important; }
.story-realm.is-in-scene .story-realm-scenes { display: grid; min-height: 0; }
.story-realm-scenes .story-journey-panel {
  display: none !important;
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  min-height: 0;
}
.story-realm-scenes .story-journey-panel.is-active { display: grid !important; }
.story-scene-back {
  justify-self: start;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 224, 148, 0.42);
  border-radius: 999px;
  background: rgba(24, 14, 8, 0.42);
  color: #ffe3a4;
  font-weight: 900;
  cursor: pointer;
}
.story-page-scene.is-active,
.story-gallery-room.is-active,
.story-cinema-room.is-active {
  align-content: center;
  gap: clamp(12px, 2vh, 20px);
  height: 100%;
}
.story-fairytale-paper {
  width: min(860px, 100%);
  max-height: min(76svh, 700px);
  margin: 0 auto;
  overflow: auto;
  padding: clamp(22px, 4vw, 56px);
  border: 1px solid rgba(119, 72, 30, 0.32);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(96, 53, 22, 0.12), transparent 14%, transparent 86%, rgba(96, 53, 22, 0.12)),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 230, 0.46), transparent 36%),
    linear-gradient(135deg, #fff1bf, #e5b86a 55%, #ad6a2f);
  color: #2d180b;
  box-shadow: 0 34px 110px rgba(0,0,0,0.32), inset 0 0 60px rgba(91,45,15,0.12);
}
.story-fairytale-paper h4 {
  margin: 0 0 18px;
  color: #291508;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 0.98;
}
.story-fairytale-paper .memory-stage-section-title { color: #704112; }
.story-fairytale-paper .story-chapter { color: #2e1b0d; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.72; }
.story-gallery-room .story-floating-gallery {
  min-height: 0;
  height: min(66svh, 620px);
  align-items: center;
  padding: clamp(12px, 2vw, 28px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,239,198,0.08), rgba(0,0,0,0.1)), rgba(22, 14, 9, 0.18);
}
.story-gallery-room .story-floating-photo { flex-basis: clamp(220px, 24vw, 340px); background: linear-gradient(135deg, rgba(255, 238, 188, 0.22), rgba(55, 31, 14, 0.26)); }
.story-cinema-room .story-video-frame,
.story-cinema-room .story-empty-state {
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 36px 130px rgba(0,0,0,0.35), 0 0 42px rgba(255,194,91,0.12);
}
.story-cinema-room .story-video-frame iframe { min-height: min(62svh, 620px); }
.story-room-title { width: min(980px, 100%); margin: 0 auto; color: #fff1c8; }
.story-room-title span { color: #ffcf76; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.story-room-title h4 { margin: 6px 0 4px; font-size: clamp(28px, 4vw, 54px); line-height: 1; }
.story-room-title p { margin: 0; color: rgba(255,242,216,0.76); }

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .memory-function-stage { padding: max(54px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important; }
  .story-realm { gap: 10px; }
  .story-realm .story-journey-head h3 { font-size: clamp(30px, 9vw, 42px) !important; }
  .story-realm .story-journey-head p { display: none; }
  .story-realm-hub { grid-template-columns: 1fr; gap: 10px; align-content: center; padding: 0; }
  .story-realm-object { grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: auto auto; width: min(340px, 100%); align-items: center; justify-items: start; text-align: left; gap: 6px 12px; }
  .story-realm-object img { grid-row: 1 / span 2; width: 82px; max-height: 78px; }
  .story-realm-object strong { font-size: 22px; }
  .story-realm-object small { font-size: 12px; }
  .story-fairytale-paper { max-height: calc(100svh - 118px); padding: 20px; border-radius: 0; }
  .story-fairytale-paper h4 { font-size: clamp(30px, 9vw, 42px); }
  .story-fairytale-paper .story-chapter { font-size: 16px; line-height: 1.62; }
  .story-gallery-room .story-floating-gallery { height: calc(100svh - 182px); padding: 10px 4px 16px; }
  .story-gallery-room .story-floating-photo { flex-basis: min(76vw, 280px); }
  .story-cinema-room .story-video-frame iframe { min-height: 260px; }
  .smart-tree-experience.is-layer-story .memory-stage-actions { display: none !important; }
}
/* 20260715ag: Story reader final pass - real full-page reading on mobile and desktop. */
.smart-tree-experience.is-layer-story .story-realm.is-in-scene {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}
.smart-tree-experience.is-layer-story .story-realm.is-in-scene .memory-stage-actions {
  display: none !important;
}
.smart-tree-experience.is-layer-story .story-realm-scenes {
  height: 100%;
  min-height: 0;
}
.smart-tree-experience.is-layer-story .story-realm-scenes .story-journey-panel.is-active {
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.smart-tree-experience.is-layer-story .story-page-scene.is-active {
  align-content: stretch;
  padding: clamp(8px, 2vw, 24px) 0;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  min-height: min(760px, calc(100svh - 128px));
  max-height: calc(100svh - 128px) !important;
  overflow: auto !important;
  background:
    linear-gradient(90deg, rgba(100, 54, 18, 0.14), transparent 14%, transparent 86%, rgba(100, 54, 18, 0.16)),
    radial-gradient(circle at 22% 12%, rgba(255, 255, 230, 0.58), transparent 32%),
    radial-gradient(circle at 84% 92%, rgba(128, 59, 18, 0.18), transparent 34%),
    linear-gradient(135deg, #fff0bd 0%, #f2d48c 46%, #c47a35 100%) !important;
  color: #2b1609 !important;
  box-shadow:
    0 40px 130px rgba(0, 0, 0, 0.38),
    0 0 44px rgba(255, 199, 96, 0.18),
    inset 0 0 80px rgba(89, 40, 10, 0.12) !important;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .memory-stage-body {
  display: block !important;
  flex: 1 1 auto;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  color: #2b1609 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter {
  display: block !important;
  color: #2b1609 !important;
  font-size: clamp(18px, 1.55vw, 22px) !important;
  line-height: 1.72 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter p {
  display: block !important;
  margin: 0 0 1.18em !important;
  color: #2b1609 !important;
  font-weight: 650;
  text-shadow: none !important;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: #b06a22;
  font-size: 4.1em;
  line-height: 0.82;
  font-weight: 900;
}
.smart-tree-experience.is-layer-story.is-story-subscene .memory-function-stage {
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 228, 158, 0.28), transparent 36%),
    radial-gradient(circle at 35% 76%, rgba(224, 158, 73, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(24, 15, 10, 0.93), rgba(104, 70, 38, 0.58)) !important;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    padding: max(52px, env(safe-area-inset-top)) 0 0 !important;
  }
  .smart-tree-experience.is-layer-story .story-realm {
    width: 100%;
  }
  .smart-tree-experience.is-layer-story .story-page-scene.is-active {
    padding: 0;
  }
  .smart-tree-experience.is-layer-story .story-page-scene.is-active .story-scene-back {
    margin: 0 10px 8px;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper {
    width: 100%;
    min-height: calc(100svh - 102px);
    max-height: calc(100svh - 102px) !important;
    border-radius: 0 !important;
    padding: 24px 18px 48px !important;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper h4 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 0.98 !important;
    margin-bottom: 18px !important;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter p:first-child::first-letter {
    font-size: 3.6em;
  }
}

/* 20260716aa: premium Story object hall polish. */
.smart-tree-experience.is-layer-story .story-realm > .memory-stage-actions {
  display: none !important;
}
.smart-tree-experience.is-layer-story .story-realm:not(.is-in-scene) {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1220px, 100%);
  padding-inline: clamp(10px, 1.8vw, 24px);
}
.smart-tree-experience.is-layer-story .story-realm:not(.is-in-scene)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(980px, 86vw);
  height: min(340px, 34vh);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 216, 128, 0.18), transparent 64%),
    radial-gradient(ellipse at 50% 82%, rgba(31, 17, 9, 0.28), transparent 68%);
  filter: blur(1px);
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-realm .story-journey-head {
  position: relative;
  z-index: 3;
  width: min(760px, 100%);
  margin: 0 auto;
}
.smart-tree-experience.is-layer-story .story-realm .story-journey-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 222, 147, 0.34);
  border-radius: 999px;
  background: rgba(37, 24, 15, 0.38);
  color: #ffe2a3;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(0,0,0,0.22), inset 0 0 20px rgba(255,203,107,0.08);
}
.smart-tree-experience.is-layer-story .story-realm .story-journey-head h3 {
  margin-top: 16px !important;
  text-wrap: balance;
  text-shadow: 0 8px 32px rgba(0,0,0,0.48);
}
.smart-tree-experience.is-layer-story .story-realm-hub {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: clamp(10px, 2vh, 24px) 0 clamp(18px, 4vh, 46px);
}
.smart-tree-experience.is-layer-story .story-realm-object {
  position: relative;
  min-height: clamp(260px, 34vh, 390px);
  align-content: center;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 34px;
}
.smart-tree-experience.is-layer-story .story-realm-object::before {
  content: "";
  position: absolute;
  inset: auto 14% 7% 14%;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.52), transparent 72%);
  filter: blur(3px);
  transform: translateY(12px);
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-realm-object::after {
  content: "";
  position: absolute;
  inset: 12% 4% 4% 4%;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 224, 145, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.08));
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-realm-object:hover::after,
.smart-tree-experience.is-layer-story .story-realm-object:focus-visible::after {
  opacity: 1;
}
.smart-tree-experience.is-layer-story .story-realm-object img {
  width: min(250px, 72vw);
  max-height: min(30vh, 250px);
  transform: translateZ(0);
  filter: drop-shadow(0 22px 24px rgba(0,0,0,0.38)) drop-shadow(0 0 18px rgba(255,202,98,0.16));
}
.smart-tree-experience.is-layer-story .story-realm-object strong {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  font-size: clamp(22px, 2.25vw, 34px);
  color: #fff4d8;
}
.smart-tree-experience.is-layer-story .story-realm-object small {
  position: relative;
  z-index: 2;
  color: rgba(255, 236, 195, 0.82);
}
.smart-tree-experience.is-layer-story .story-realm-gallery img {
  width: min(286px, 76vw);
  max-height: min(32vh, 270px);
}
.smart-tree-experience.is-layer-story .story-realm-video img {
  width: min(260px, 74vw);
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-realm:not(.is-in-scene) {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding-inline: 18px;
  }
  .smart-tree-experience.is-layer-story .story-realm:not(.is-in-scene)::before {
    top: 58%;
    width: 120vw;
    height: 54vh;
    opacity: .68;
  }
  .smart-tree-experience.is-layer-story .story-realm .story-journey-head {
    width: 100%;
    padding-top: 0;
  }
  .smart-tree-experience.is-layer-story .story-realm .story-journey-head span {
    min-height: 31px;
    padding: 0 12px;
    font-size: 11px;
  }
  .smart-tree-experience.is-layer-story .story-realm .story-journey-head h3 {
    margin: 10px 0 0 !important;
    font-size: clamp(31px, 10vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }
  .smart-tree-experience.is-layer-story .story-realm-hub {
    width: 100%;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: stretch;
    gap: 12px;
    padding: 2px 0 10px;
  }
  .smart-tree-experience.is-layer-story .story-realm-object {
    width: 100%;
    min-height: 118px;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    align-items: center;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid rgba(255, 218, 142, 0.18);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 222, 147, 0.08), rgba(33, 19, 9, 0.13));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 14px 44px rgba(0,0,0,0.16);
  }
  .smart-tree-experience.is-layer-story .story-realm-object::before {
    inset: auto 18px 7px 100px;
    height: 12px;
  }
  .smart-tree-experience.is-layer-story .story-realm-object::after {
    display: none;
  }
  .smart-tree-experience.is-layer-story .story-realm-object img,
  .smart-tree-experience.is-layer-story .story-realm-gallery img,
  .smart-tree-experience.is-layer-story .story-realm-video img {
    grid-row: 1 / span 2;
    width: 78px;
    max-height: 82px;
    margin: 0;
  }
  .smart-tree-experience.is-layer-story .story-realm-object strong {
    margin: 0;
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.02;
  }
  .smart-tree-experience.is-layer-story .story-realm-object small {
    font-size: 12px;
  }
}
/* 20260716ab: final premium Story sub-scenes - reader, gallery and cinema. */
.smart-tree-experience.is-layer-story .story-realm-scenes .story-journey-panel.is-active {
  position: relative !important;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch !important;
  padding: clamp(8px, 1.5vw, 20px) 0 0;
}
.smart-tree-experience.is-layer-story .story-realm-scenes .story-journey-panel.is-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 220, 132, 0.18), transparent 36%),
    radial-gradient(circle at 24% 74%, rgba(49, 23, 9, 0.26), transparent 44%),
    linear-gradient(135deg, rgba(20, 12, 8, 0.86), rgba(124, 84, 45, 0.62));
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-scene-back {
  position: relative;
  z-index: 50;
  width: max-content;
  margin-bottom: clamp(8px, 1.4vh, 16px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.24), inset 0 0 24px rgba(255,214,128,0.08);
}
.smart-tree-experience.is-layer-story .story-fairytale-paper {
  isolation: isolate;
  width: min(980px, 100%);
  min-height: calc(100svh - 146px);
  max-height: calc(100svh - 146px) !important;
  padding: clamp(28px, 4vw, 64px) clamp(24px, 5vw, 78px) !important;
  border: 1px solid rgba(126, 74, 29, 0.28);
  border-radius: 30px;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper::before,
.smart-tree-experience.is-layer-story .story-fairytale-paper::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper::before {
  inset: 16px;
  border: 1px solid rgba(106, 62, 23, 0.2);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.smart-tree-experience.is-layer-story .story-fairytale-paper::after {
  right: 8%;
  top: 9%;
  width: 34%;
  height: 56%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.32), transparent 68%);
  opacity: .55;
  transform: rotate(-8deg);
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .memory-stage-section-title {
  margin-bottom: 14px;
  color: #8b4d15 !important;
  letter-spacing: .1em;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper h4 {
  margin-bottom: clamp(18px, 3vh, 34px) !important;
  max-width: 12ch;
}
.smart-tree-experience.is-layer-story .story-fairytale-paper .story-chapter {
  max-width: 68ch;
  padding: clamp(12px, 2vw, 22px) 0 0;
  border-top: 1px solid rgba(94, 49, 16, 0.18);
}
.smart-tree-experience.is-layer-story .story-gallery-room.is-active,
.smart-tree-experience.is-layer-story .story-cinema-room.is-active {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.smart-tree-experience.is-layer-story .story-room-title {
  position: relative;
  z-index: 4;
  width: min(1100px, 100%);
  margin: 0 auto clamp(10px, 1.6vh, 18px);
  padding: 0 clamp(2px, 1vw, 10px);
}
.smart-tree-experience.is-layer-story .story-room-title h4 {
  text-wrap: balance;
  text-shadow: 0 10px 36px rgba(0,0,0,0.42);
}
.smart-tree-experience.is-layer-story .story-gallery-room .story-floating-gallery {
  width: min(1160px, 100%);
  height: calc(100svh - 220px) !important;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch !important;
  gap: clamp(14px, 2vw, 24px);
  overflow: auto !important;
  padding: clamp(12px, 2vw, 24px) !important;
  border: 1px solid rgba(255, 218, 137, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 130, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(41, 24, 13, 0.58), rgba(19, 11, 7, 0.34)) !important;
  box-shadow: inset 0 0 70px rgba(255,208,111,0.05), 0 32px 110px rgba(0,0,0,0.28);
}
.smart-tree-experience.is-layer-story .story-gallery-room .story-floating-photo {
  position: relative;
  min-height: clamp(210px, 28vh, 340px);
  flex-basis: auto !important;
  border: 1px solid rgba(255, 225, 156, 0.24);
  border-radius: 22px;
  overflow: hidden;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(255,238,190,0.2), rgba(49,27,13,0.26)) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.045);
}
.smart-tree-experience.is-layer-story .story-gallery-room .story-floating-photo img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.smart-tree-experience.is-layer-story .story-gallery-room .story-floating-photo span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(23, 13, 8, 0.62);
  color: #ffe6ad;
  font-weight: 950;
  backdrop-filter: blur(10px);
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-video-frame,
.smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state {
  position: relative;
  width: min(1080px, 100%) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 219, 148, 0.25);
  border-radius: 34px !important;
  background:
    linear-gradient(180deg, rgba(255,224,151,0.12), rgba(20,12,8,0.24)),
    rgba(17, 10, 7, 0.64) !important;
  box-shadow: 0 40px 140px rgba(0,0,0,0.42), inset 0 0 64px rgba(255,203,104,0.07) !important;
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-video-frame::before,
.smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 226, 159, 0.16);
  border-radius: 24px;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-video-frame iframe {
  display: block;
  width: 100%;
  min-height: min(64svh, 650px) !important;
  border: 0;
  border-radius: 26px;
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state {
  min-height: min(58svh, 560px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: clamp(28px, 5vw, 74px);
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state b {
  color: #ffe1a1;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
}
.smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state p {
  max-width: 54ch;
  margin: 12px auto 0;
  color: rgba(255, 241, 211, 0.76);
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-realm-scenes .story-journey-panel.is-active {
    padding: 0 !important;
  }
  .smart-tree-experience.is-layer-story .story-scene-back {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    margin: 0 10px 8px !important;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper {
    min-height: calc(100svh - 62px) !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    padding: 28px 20px 72px !important;
  }
  .smart-tree-experience.is-layer-story .story-fairytale-paper h4 {
    max-width: 100%;
  }
  .smart-tree-experience.is-layer-story .story-gallery-room .story-room-title,
  .smart-tree-experience.is-layer-story .story-cinema-room .story-room-title {
    padding: 0 16px;
    margin-bottom: 10px;
  }
  .smart-tree-experience.is-layer-story .story-room-title h4 {
    font-size: clamp(34px, 10vw, 46px);
  }
  .smart-tree-experience.is-layer-story .story-gallery-room .story-floating-gallery {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 1fr;
    padding: 12px 14px 72px !important;
    border-radius: 0;
    border-inline: 0;
  }
  .smart-tree-experience.is-layer-story .story-gallery-room .story-floating-photo {
    min-height: 320px;
  }
  .smart-tree-experience.is-layer-story .story-gallery-room .story-floating-photo img {
    min-height: 300px;
  }
  .smart-tree-experience.is-layer-story .story-cinema-room .story-video-frame,
  .smart-tree-experience.is-layer-story .story-cinema-room .story-empty-state {
    width: calc(100% - 24px) !important;
    border-radius: 24px !important;
  }
  .smart-tree-experience.is-layer-story .story-cinema-room .story-video-frame iframe {
    min-height: 280px !important;
  }
}
/* 20260716ac: clean premium Story reader, replacing the ugly brown panel inheritance. */
.smart-tree-experience.is-layer-story .story-reader-scene.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: clamp(10px, 2vw, 22px) !important;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 224, 145, 0.26), transparent 34%),
    radial-gradient(circle at 20% 84%, rgba(65, 30, 12, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(25, 15, 10, 0.94), rgba(127, 84, 44, 0.7)) !important;
}
.smart-tree-experience.is-layer-story .story-reader-world {
  position: relative;
  z-index: 4;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 230, 158, 0.16), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.12));
  box-shadow: inset 0 0 90px rgba(255, 204, 105, 0.05), 0 36px 130px rgba(0,0,0,0.24);
}
.smart-tree-experience.is-layer-story .story-reader-world::before,
.smart-tree-experience.is-layer-story .story-reader-world::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-reader-world::before {
  inset: 9% 7% auto 7%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 146, 0.36), transparent);
  box-shadow:
    0 38px 0 rgba(255, 222, 146, 0.12),
    0 76px 0 rgba(255, 222, 146, 0.08),
    0 114px 0 rgba(255, 222, 146, 0.06);
  opacity: .75;
}
.smart-tree-experience.is-layer-story .story-reader-world::after {
  left: 50%;
  bottom: 7%;
  width: min(700px, 76vw);
  height: 56px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.38), transparent 72%);
  filter: blur(8px);
}
.smart-tree-experience.is-layer-story .story-reader-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 231, 169, 0.28), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(255, 193, 78, 0.16), transparent 28%),
    radial-gradient(circle at 16% 86%, rgba(255, 167, 61, 0.12), transparent 30%);
  opacity: .95;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-reader-page {
  position: relative;
  z-index: 5;
  width: min(980px, 92%);
  max-height: min(76svh, 760px);
  overflow: auto;
  padding: clamp(34px, 5vw, 72px) clamp(28px, 6vw, 88px);
  border: 1px solid rgba(106, 62, 23, 0.32);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(114, 62, 20, 0.12), transparent 12%, transparent 88%, rgba(114, 62, 20, 0.12)),
    radial-gradient(circle at 28% 8%, rgba(255, 255, 236, 0.72), transparent 33%),
    radial-gradient(circle at 90% 100%, rgba(142, 70, 21, 0.16), transparent 32%),
    linear-gradient(135deg, #fff2c4 0%, #f5d58a 52%, #d38b3d 100%);
  color: #261307;
  box-shadow:
    0 42px 140px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 0 90px rgba(93, 43, 10, 0.13);
}
.smart-tree-experience.is-layer-story .story-reader-page::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(93, 48, 14, 0.22);
  border-radius: 22px;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-reader-page::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(91, 44, 12, 0.18), transparent);
  opacity: .55;
  pointer-events: none;
}
.smart-tree-experience.is-layer-story .story-reader-kicker {
  color: #7a4312;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.smart-tree-experience.is-layer-story .story-reader-page h4 {
  margin: 12px 0 10px !important;
  max-width: 11ch;
  color: #261307 !important;
  font-size: clamp(42px, 6.8vw, 86px) !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.smart-tree-experience.is-layer-story .story-reader-intro {
  max-width: 54ch;
  margin: 0 0 clamp(18px, 3vh, 30px);
  color: #6f4219;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 850;
}
.smart-tree-experience.is-layer-story .story-reader-copy {
  column-count: 2;
  column-gap: clamp(34px, 5vw, 70px);
  max-height: none !important;
  overflow: visible !important;
  color: #281407 !important;
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.78 !important;
}
.smart-tree-experience.is-layer-story .story-reader-copy p {
  break-inside: avoid;
  color: #281407 !important;
  font-weight: 620 !important;
  margin: 0 0 1.08em !important;
}
.smart-tree-experience.is-layer-story .story-reader-copy p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: #a25f1c;
  font-size: 4.3em;
  line-height: .78;
  font-weight: 950;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-reader-scene.is-active {
    height: 100svh !important;
    overflow: auto !important;
    padding: 0 !important;
  }
  .smart-tree-experience.is-layer-story .story-reader-back {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    z-index: 80 !important;
    margin: 8px 10px !important;
  }
  .smart-tree-experience.is-layer-story .story-reader-world {
    min-height: calc(100svh - 58px);
    display: block;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    background:
      radial-gradient(circle at 74% 8%, rgba(255, 230, 154, 0.2), transparent 38%),
      linear-gradient(180deg, rgba(58, 35, 19, 0.64), rgba(21, 12, 8, 0.3));
  }
  .smart-tree-experience.is-layer-story .story-reader-world::before,
  .smart-tree-experience.is-layer-story .story-reader-world::after {
    display: none;
  }
  .smart-tree-experience.is-layer-story .story-reader-page {
    width: 100% !important;
    min-height: calc(100svh - 58px);
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border-inline: 0 !important;
    padding: 34px 22px 80px !important;
  }
  .smart-tree-experience.is-layer-story .story-reader-page::after {
    display: none;
  }
  .smart-tree-experience.is-layer-story .story-reader-page::before {
    inset: 14px;
    border-radius: 18px;
  }
  .smart-tree-experience.is-layer-story .story-reader-page h4 {
    max-width: 100%;
    font-size: clamp(42px, 12vw, 58px) !important;
  }
  .smart-tree-experience.is-layer-story .story-reader-copy {
    column-count: 1 !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
  }
}
/* 20260716ad: Monaka-inspired scroll narrative for the Story layer. Logic stays untouched. */
.smart-tree-experience.is-layer-story .memory-function-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.story-scroll-experience {
  --story-progress: 0;
  position: relative;
  z-index: 10;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  color: #fff8e8;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 220, 142, .34), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(214, 145, 56, .18), transparent 34%),
    linear-gradient(120deg, rgba(20, 10, 6, .9), rgba(92, 57, 31, .5) 48%, rgba(255, 204, 121, .14));
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
}

.story-scroll-experience::before,
.story-scroll-experience::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.story-scroll-experience::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), transparent 44%, rgba(255, 206, 130, .12)),
    radial-gradient(circle at 50% 55%, transparent 0 36%, rgba(20, 10, 4, .26) 70%);
}

.story-scroll-experience::after {
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255, 226, 155, .56) 0 1px, transparent 1.4px),
    linear-gradient(110deg, transparent, rgba(255,255,255,.08), transparent);
  background-size: 74px 74px, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
}

.story-scroll-progress {
  position: fixed;
  left: clamp(16px, 4vw, 58px);
  right: clamp(16px, 4vw, 58px);
  top: max(12px, env(safe-area-inset-top));
  z-index: 50;
  height: 2px;
  background: rgba(255, 238, 198, .18);
  overflow: hidden;
}

.story-scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(.05);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ffeac0, #e0a03b, #fff2c8);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.story-scroll-nav {
  position: fixed;
  top: max(26px, calc(env(safe-area-inset-top) + 18px));
  right: clamp(12px, 3vw, 44px);
  z-index: 55;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(255, 226, 166, .22);
  border-radius: 999px;
  background: rgba(18, 10, 6, .34);
  backdrop-filter: blur(14px);
}

.story-scroll-nav button,
.story-scroll-nav a,
.story-scroll-cover button,
.story-scroll-ending button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 225, 166, .24);
  border-radius: 999px;
  background: rgba(255, 237, 197, .11);
  color: #fff3d4;
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.story-scroll-nav button:hover,
.story-scroll-nav a:hover,
.story-scroll-cover button:hover,
.story-scroll-ending button:hover {
  background: linear-gradient(135deg, #ffd078, #d79a35);
  color: #1e1108;
}

.story-scroll-cover,
.story-scroll-moment,
.story-scroll-gallery-scene,
.story-scroll-video-scene,
.story-scroll-ending {
  min-height: 100svh;
  scroll-snap-align: start;
  display: grid;
  align-items: center;
  padding: clamp(76px, 12vh, 150px) clamp(20px, 7vw, 120px);
  position: relative;
}

.story-scroll-cover > div,
.story-scroll-copy,
.story-scroll-section-title,
.story-scroll-ending {
  position: relative;
  z-index: 3;
}

.story-scroll-cover span,
.story-scroll-copy span,
.story-scroll-section-title span,
.story-scroll-ending span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 226, 166, .36);
  border-radius: 999px;
  color: #ffe5a4;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(70, 42, 20, .34);
}

.story-scroll-cover h3,
.story-scroll-section-title h4,
.story-scroll-ending h4 {
  max-width: 11ch;
  margin: 0 0 22px;
  color: #fff8e8;
  font-size: clamp(56px, 11vw, 150px);
  line-height: .86;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 22px 70px rgba(0,0,0,.38);
}

.story-scroll-cover p,
.story-scroll-ending p {
  max-width: 620px;
  color: rgba(255, 246, 225, .82);
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.45;
}

.story-scroll-moment {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.08fr);
  gap: clamp(22px, 6vw, 86px);
}

.story-scroll-moment.story-scroll-center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.story-scroll-moment.story-scroll-right {
  grid-template-columns: minmax(320px, 1.08fr) minmax(0, .9fr);
}

.story-scroll-moment.story-scroll-right .story-scroll-image {
  order: 2;
}

.story-scroll-copy {
  max-width: min(820px, 92vw);
  opacity: .18;
  filter: blur(10px);
  transform: translateY(48px) scale(.985);
  transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}

.story-scroll-moment.has-entered .story-scroll-copy,
.story-scroll-cover.has-entered > div,
.story-scroll-gallery-scene.has-entered,
.story-scroll-video-scene.has-entered,
.story-scroll-ending.has-entered {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.story-scroll-moment.is-past .story-scroll-copy {
  opacity: .32;
  transform: translateY(-28px) scale(.96);
}

.story-scroll-copy p {
  margin: 0;
  color: #fff8e8;
  font-size: clamp(36px, 6.6vw, 104px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 18px 55px rgba(0,0,0,.36);
}

.story-scroll-image {
  margin: 0;
  min-height: min(64svh, 720px);
  align-self: center;
  opacity: .78;
  transform: translateY(36px) scale(.94) rotate(var(--story-tilt, -2deg));
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.story-scroll-moment.has-entered .story-scroll-image {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--story-tilt, -2deg));
}

.story-scroll-image img {
  display: block;
  width: min(520px, 86vw);
  max-height: 64svh;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border: 10px solid rgba(255, 244, 218, .92);
  border-bottom-width: 38px;
  border-radius: 7px;
  box-shadow: 0 35px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(255, 226, 166, .2);
  cursor: zoom-in;
}

.story-scroll-moment:nth-child(even) .story-scroll-image {
  --story-tilt: 2.2deg;
}

.story-scroll-gallery-scene,
.story-scroll-video-scene {
  display: grid;
  align-content: center;
  gap: clamp(22px, 5vh, 54px);
  opacity: .2;
  filter: blur(10px);
  transform: translateY(40px);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease;
}

.story-scroll-section-title h4 {
  max-width: 14ch;
  font-size: clamp(44px, 8vw, 112px);
}

.story-scroll-gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 32vw);
  gap: clamp(16px, 2.8vw, 36px);
  overflow-x: auto;
  padding: 10px clamp(20px, 6vw, 80px) 26px 0;
  scroll-snap-type: x proximity;
}

.story-scroll-gallery-card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  scroll-snap-align: center;
  cursor: zoom-in;
}

.story-scroll-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 9px solid rgba(255,244,218,.94);
  border-bottom-width: 36px;
  box-shadow: 0 30px 82px rgba(0,0,0,.45);
  transition: transform .24s ease;
}

.story-scroll-gallery-card:hover img,
.story-scroll-gallery-card:focus-visible img {
  transform: translateY(-8px) scale(1.02);
}

.story-scroll-gallery-card span {
  position: absolute;
  left: 16px;
  bottom: 12px;
  color: #4b2a12;
  font-weight: 900;
}

.story-scroll-video-frame {
  width: min(1000px, 92vw);
  border: 1px solid rgba(255,226,166,.24);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(10,6,3,.45);
  box-shadow: 0 40px 120px rgba(0,0,0,.44);
}

.story-scroll-video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.story-scroll-empty {
  max-width: 560px;
  padding: 24px;
  border: 1px solid rgba(255,226,166,.22);
  border-radius: 22px;
  background: rgba(28, 16, 9, .36);
  color: rgba(255,246,225,.82);
  font-size: 18px;
}

.story-scroll-ending {
  justify-items: center;
  text-align: center;
  gap: 16px;
}

.story-scroll-ending h4 {
  max-width: 12ch;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    height: 100svh !important;
  }
  .story-scroll-nav {
    left: 70px;
    right: 10px;
    justify-content: flex-end;
    gap: 4px;
    background: rgba(18, 10, 6, .28);
  }
  .story-scroll-nav button,
  .story-scroll-nav a {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }
  .story-scroll-cover,
  .story-scroll-moment,
  .story-scroll-gallery-scene,
  .story-scroll-video-scene,
  .story-scroll-ending {
    min-height: 100svh;
    padding: 84px 18px 72px;
    scroll-snap-align: start;
  }
  .story-scroll-cover h3,
  .story-scroll-section-title h4,
  .story-scroll-ending h4 {
    max-width: 10ch;
    font-size: clamp(52px, 17vw, 76px);
  }
  .story-scroll-cover p,
  .story-scroll-ending p {
    font-size: 18px;
  }
  .story-scroll-moment,
  .story-scroll-moment.story-scroll-right {
    grid-template-columns: 1fr;
    gap: 22px;
    align-content: center;
  }
  .story-scroll-moment.story-scroll-right .story-scroll-image {
    order: 0;
  }
  .story-scroll-copy p {
    font-size: clamp(34px, 12vw, 56px);
    line-height: 1.02;
  }
  .story-scroll-image {
    min-height: 0;
  }
  .story-scroll-image img {
    width: min(280px, 82vw);
    max-height: 42svh;
    border-width: 8px;
    border-bottom-width: 30px;
  }
  .story-scroll-gallery-grid {
    grid-auto-columns: minmax(190px, 78vw);
    padding-right: 18px;
  }
  .story-scroll-gallery-card img {
    border-width: 8px;
    border-bottom-width: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-scroll-experience,
  .story-scroll-gallery-grid {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }
  .story-scroll-copy,
  .story-scroll-image,
  .story-scroll-gallery-scene,
  .story-scroll-video-scene,
  .story-scroll-ending,
  .story-scroll-progress i {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}
/* Customer dashboard command-center polish */
.customer-dashboard-hero {
  position: relative;
  overflow: hidden;
}

.customer-dashboard-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 157, 55, 0.24), rgba(217, 157, 55, 0));
  pointer-events: none;
}

.customer-help-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(217, 157, 55, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,248,236,0.92));
}

.customer-help-card strong {
  font-size: 18px;
  color: var(--ink);
}

.customer-help-card span {
  color: var(--muted);
  line-height: 1.45;
}

.customer-quick-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-quick-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(234, 223, 206, 0.96);
  background: linear-gradient(180deg, #fff 0%, #fffaf2 100%);
}

.customer-quick-steps article strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #141b22;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 26px rgba(20, 27, 34, 0.16);
}

.customer-quick-steps article span {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.25;
}

.customer-story-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,252,246,0.96) 100%);
}

.customer-story-card > p {
  color: var(--muted);
  line-height: 1.52;
}

.customer-story-meta {
  align-items: stretch;
}

.customer-story-meta span {
  border-radius: 18px;
  background: rgba(247, 239, 226, 0.64);
}

.customer-primary-actions {
  margin-top: 4px;
}

.customer-primary-actions .button {
  justify-content: center;
  min-width: 180px;
}

.customer-empty-card {
  text-align: center;
  align-items: center;
  padding: 30px;
}

@media (max-width: 860px) {
  .customer-quick-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .customer-dashboard {
    width: min(100% - 12px, 1120px);
    gap: 14px;
  }

  .customer-dashboard-hero {
    padding: 18px;
  }

  .customer-dashboard-hero h1 {
    font-size: clamp(29px, 9vw, 40px);
  }

  .customer-quick-steps {
    grid-template-columns: 1fr;
  }

  .customer-quick-steps article {
    grid-template-columns: auto 1fr;
    border-radius: 18px;
  }

  .customer-story-card {
    padding: 17px;
  }

  .customer-primary-actions .button {
    width: 100%;
    min-width: 0;
  }
}
/* Smart Stone editor customer clarity polish */
.story-editor-hero {
  position: relative;
  overflow: hidden;
}

.story-editor-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 126, 105, 0.14), rgba(30, 126, 105, 0));
  pointer-events: none;
}

.story-editor-hero .setup-progress {
  position: relative;
  z-index: 1;
  align-self: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(234, 223, 206, 0.95);
}

.setup-step-card {
  position: relative;
  overflow: hidden;
}

.setup-step-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(217, 157, 55, 0.12), rgba(217, 157, 55, 0));
  pointer-events: none;
}

.setup-step-card > * {
  position: relative;
  z-index: 1;
}

.setup-step-head > span {
  font-weight: 950;
}

.setup-step-head p,
.field-note,
.setup-help-grid span {
  line-height: 1.45;
}

.setup-help-grid span {
  background: rgba(247, 239, 226, 0.52);
  border-color: rgba(217, 157, 55, 0.18);
}

.guided-story-form label {
  font-weight: 850;
}

.guided-story-form input,
.guided-story-form textarea,
.guided-story-form select {
  background: rgba(255,255,255,0.96);
}

.memory-layer-summary,
.info-panel,
.preview-before-publish {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,249,239,0.94));
  border-color: rgba(217, 157, 55, 0.2);
}

.publish-step-card .customer-primary-actions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .story-editor {
    gap: 14px;
  }

  .story-editor-hero {
    padding: 18px;
  }

  .story-editor-hero h1 {
    font-size: clamp(30px, 10vw, 40px);
  }

  .setup-step-card {
    padding: 17px;
    border-radius: 20px;
  }

  .setup-step-head {
    grid-template-columns: 42px 1fr;
    gap: 11px;
  }

  .setup-step-head > span {
    width: 42px;
    height: 42px;
  }

  .setup-step-head h2 {
    font-size: clamp(21px, 7vw, 28px);
  }

  .setup-help-grid {
    gap: 9px;
  }

  .publish-step-card .customer-primary-actions {
    justify-content: stretch;
  }
}
/* Admin command centre final polish */
.admin-command {
  padding-bottom: 44px;
}

.admin-command-title {
  align-items: center;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(234, 223, 206, 0.95);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 10%, rgba(217, 157, 55, 0.18), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #fff8ed 64%, #f7efe2 100%);
  box-shadow: 0 24px 76px rgba(52, 39, 20, 0.11);
}

.admin-command-title h1 {
  margin-bottom: 8px;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: 0;
}

.admin-command-title .muted {
  max-width: 720px;
  font-size: 17px;
}

.customer-control-section {
  border-radius: 28px;
  border: 1px solid rgba(234, 223, 206, 0.95);
  box-shadow: 0 24px 76px rgba(52, 39, 20, 0.08);
}

.customer-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.customer-control-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.customer-control-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), rgba(30, 126, 105, 0.82));
}

.customer-control-card > * {
  position: relative;
  z-index: 1;
}

.customer-control-card .button-row {
  gap: 8px;
}

.customer-control-story {
  background: rgba(255, 252, 246, 0.78);
}

.customer-control-story .button-row .button {
  border-radius: 999px;
}

.activation-copy a {
  overflow-wrap: anywhere;
}

.admin-details {
  border-radius: 22px;
}

.admin-details summary {
  cursor: pointer;
  font-weight: 950;
  color: var(--ink);
}

@media (max-width: 720px) {
  .admin-command-title {
    display: grid;
    gap: 16px;
    border-radius: 22px;
    padding: 18px;
  }

  .admin-command-title h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .admin-command-title .actions,
  .admin-command-title .button,
  .customer-control-card .button-row .button {
    width: 100%;
  }

  .customer-control-section {
    border-radius: 22px;
  }

  .customer-control-card {
    border-radius: 20px;
  }
}
/* 20260716ae: final Story object room. Visual only, QR/business logic untouched. */
.smart-tree-experience.is-layer-story .memory-function-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 214, 139, 0.2), transparent 31%),
    linear-gradient(120deg, rgba(18, 10, 6, 0.84), rgba(92, 60, 30, 0.58) 48%, rgba(255, 202, 116, 0.22));
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.smart-tree-experience.is-layer-story .memory-function-stage::before {
  opacity: 0 !important;
}

.story-object-experience {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: clamp(68px, 9vh, 92px) clamp(18px, 5vw, 92px) max(22px, env(safe-area-inset-bottom));
  color: #fff7df;
  overflow: hidden;
  isolation: isolate;
}

.story-object-experience::before,
.story-object-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.story-object-experience::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 205, 126, 0.16), transparent 30%),
    radial-gradient(circle at 70% 74%, rgba(255, 218, 154, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,0.26), rgba(0,0,0,0.42));
}

.story-object-experience::after {
  background:
    linear-gradient(90deg, rgba(255, 208, 122, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 208, 122, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .12;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.story-object-head {
  position: relative;
  z-index: 3;
  max-width: min(760px, 92vw);
  margin-inline: auto;
  text-align: left;
}

.story-object-head span,
.story-panel-heading span,
.story-reader-paper > span {
  display: inline-flex;
  width: max-content;
  margin-bottom: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 219, 151, .44);
  border-radius: 999px;
  color: #ffe4aa;
  background: rgba(42, 30, 18, .48);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.story-object-head h3 {
  max-width: 11ch !important;
  margin: 0 !important;
  color: #fff;
  font-size: clamp(44px, 8vw, 96px) !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 18px 42px rgba(0,0,0,.42);
}

.story-object-head p {
  max-width: 620px !important;
  margin: 16px 0 0 !important;
  color: rgba(255, 247, 223, .86) !important;
  font-size: clamp(16px, 2vw, 21px) !important;
  line-height: 1.42 !important;
}

.story-object-photo-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.story-object-photo-drift figure {
  position: absolute;
  width: clamp(88px, 10vw, 150px);
  margin: 0;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 246, 225, .82);
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
  transform: rotate(var(--tilt));
  opacity: .46;
  filter: saturate(.85) sepia(.12);
}

.story-object-photo-drift figure:nth-child(1) { left: 18%; top: 36%; }
.story-object-photo-drift figure:nth-child(2) { right: 18%; top: 34%; }
.story-object-photo-drift figure:nth-child(3) { left: 28%; bottom: 22%; }
.story-object-photo-drift figure:nth-child(4) { right: 29%; bottom: 24%; }

.story-object-photo-drift img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

.story-object-stage {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 240px));
  justify-content: center;
  align-items: end;
  gap: clamp(26px, 6vw, 94px);
  padding-block: clamp(36px, 10vh, 120px) 24px;
  transition: opacity .32s ease, transform .32s ease;
}

.story-object-experience.is-viewing .story-object-stage,
.story-object-experience.is-viewing .story-object-head,
.story-object-experience.is-viewing .story-object-photo-drift {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px) scale(.985);
}

.story-object-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #fff6dc;
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 9px 28px rgba(0,0,0,.58);
}

.story-object-card i {
  display: grid;
  place-items: center;
  width: clamp(86px, 11vw, 148px);
  height: clamp(86px, 11vw, 148px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.8), rgba(255,216,138,.2) 38%, rgba(88,52,24,.12) 68%, rgba(0,0,0,.2));
  box-shadow:
    0 0 0 1px rgba(255, 225, 160, .52),
    0 0 34px rgba(255, 178, 70, .28),
    0 22px 70px rgba(0,0,0,.36);
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.story-object-card svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke: #ffd77d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 194, 88, .58));
}

.story-object-card strong {
  display: block;
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1;
  font-weight: 950;
}

.story-object-card small {
  display: block;
  color: rgba(255, 240, 204, .78);
  font-weight: 850;
}

.story-object-card:hover i,
.story-object-card:focus-visible i {
  transform: translateY(-8px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(255, 238, 188, .8),
    0 0 54px rgba(255, 190, 80, .48),
    0 28px 90px rgba(0,0,0,.44);
}

.story-object-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  padding: clamp(72px, 9vh, 96px) clamp(14px, 4vw, 72px) max(26px, env(safe-area-inset-bottom));
  overflow: auto;
  color: #fff8e2;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 218, 147, .2), transparent 34%),
    linear-gradient(120deg, rgba(13, 8, 5, .9), rgba(80, 50, 26, .68) 52%, rgba(226, 166, 78, .2));
}

.story-object-panel.is-open {
  display: grid;
  align-items: center;
  animation: storyPanelEnter .34s ease both;
}

@keyframes storyPanelEnter {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.story-panel-shell {
  width: min(1080px, 94vw);
  margin: 0 auto;
}

.story-mini-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 18px;
  padding: 0 20px;
  border: 1px solid rgba(255, 224, 156, .42);
  border-radius: 999px;
  color: #ffe5ac;
  background: rgba(22, 14, 8, .42);
  font-weight: 950;
  cursor: pointer;
}

.story-reader-paper {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 62px);
  border: 1px solid rgba(112, 62, 18, .22);
  border-radius: 18px;
  color: #2f1d0b;
  background:
    linear-gradient(135deg, rgba(255, 235, 184, .96), rgba(215, 145, 58, .96)),
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.5), transparent 26%);
  box-shadow: 0 34px 120px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.32);
}

.story-reader-paper h4,
.story-panel-heading h4 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 76px);
  line-height: .94;
  letter-spacing: 0;
}

.story-reader-text {
  max-height: min(54svh, 620px);
  overflow: auto;
  padding-right: 10px;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.52;
  font-weight: 720;
}

.story-reader-text p {
  max-width: none !important;
  margin: 0 0 1.05em !important;
  color: inherit !important;
}

.story-panel-heading {
  max-width: 760px;
  margin-bottom: 24px;
}

.story-panel-heading p {
  color: rgba(255, 244, 218, .8) !important;
  font-size: 18px !important;
}

.story-gallery-room {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.story-gallery-photo {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid rgba(255, 225, 163, .38);
  border-radius: 16px;
  background: rgba(255, 246, 224, .92);
  box-shadow: 0 20px 70px rgba(0,0,0,.3);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}

.story-gallery-photo:nth-child(odd) { --tilt: -1.4deg; }
.story-gallery-photo:nth-child(even) { --tilt: 1.2deg; }

.story-gallery-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.story-gallery-photo span {
  display: block;
  padding: 10px 4px 2px;
  color: #4b2b0d;
  font-weight: 950;
}

.story-cinema-screen {
  position: relative;
  width: min(1000px, 94vw);
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(255, 215, 142, .36);
  border-radius: 22px;
  background: rgba(17, 10, 6, .74);
  box-shadow: 0 34px 120px rgba(0,0,0,.5), 0 0 70px rgba(255, 187, 80, .18);
}

.story-cinema-screen iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
}

.story-empty-panel {
  max-width: 720px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(255, 222, 154, .32);
  border-radius: 20px;
  background: rgba(36, 22, 12, .54);
  box-shadow: 0 24px 90px rgba(0,0,0,.32);
}

.story-empty-panel strong {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(28px, 4vw, 46px);
}

.story-object-actions {
  position: relative;
  z-index: 4;
  width: min(900px, 94vw);
  margin: 0 auto;
  padding: 10px;
  border-top: 1px solid rgba(255, 222, 154, .18);
  background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(75, 46, 20, .36), rgba(0,0,0,.32));
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    overflow: hidden !important;
  }

  .story-object-experience {
    padding: 74px 12px max(14px, env(safe-area-inset-bottom));
  }

  .story-object-head {
    margin: 0;
    max-width: 100%;
  }

  .story-object-head h3 {
    max-width: 10ch !important;
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .story-object-head p {
    font-size: 15px !important;
  }

  .story-object-photo-drift figure {
    width: 76px;
    opacity: .35;
  }

  .story-object-photo-drift figure:nth-child(n+3) {
    display: none;
  }

  .story-object-stage {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: stretch;
    gap: 10px;
    padding: 18px 4px 12px;
  }

  .story-object-card {
    grid-template-columns: 62px 1fr;
    justify-items: start;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 224, 156, .46);
    border-radius: 18px;
    background: rgba(38, 24, 13, .44);
    text-align: left;
  }

  .story-object-card i {
    width: 56px;
    height: 56px;
  }

  .story-object-card strong {
    font-size: 24px;
  }

  .story-object-card small {
    font-size: 13px;
  }

  .story-object-panel {
    padding: 72px 10px max(18px, env(safe-area-inset-bottom));
  }

  .story-panel-shell {
    width: 100%;
  }

  .story-reader-paper {
    border-radius: 0;
    padding: 20px;
    min-height: calc(100svh - 112px);
  }

  .story-reader-paper h4,
  .story-panel-heading h4 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .story-reader-text {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    font-size: 19px;
  }

  .story-gallery-room {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 8px 6px 18px;
    scroll-snap-type: x mandatory;
  }

  .story-gallery-photo {
    flex: 0 0 78vw;
    scroll-snap-align: center;
  }

  .story-cinema-screen {
    width: 100%;
    border-radius: 14px;
    padding: 8px;
  }

  .story-object-actions {
    width: 100%;
    padding: 8px 0 0;
    background: transparent;
  }

  .story-object-actions button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-object-stage,
  .story-object-card i,
  .story-object-panel.is-open {
    transition: none !important;
    animation: none !important;
  }
}
/* 20260716af: mobile-safe Story reading scene. Presentation only. */
.story-reader-panel.is-open {
  display: block !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.story-reader-shell {
  min-height: 100%;
}

.story-scroll-reader {
  width: min(980px, 92vw);
  margin: 0 auto;
  color: #fff8e5;
}

.story-scroll-reader header {
  min-height: min(78svh, 720px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.story-scroll-reader header span {
  display: inline-flex;
  width: max-content;
  padding: 8px 14px;
  border: 1px solid rgba(255, 219, 151, .45);
  border-radius: 999px;
  color: #ffe4aa;
  background: rgba(42, 30, 18, .48);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.story-scroll-reader h4 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 9vw, 118px);
  line-height: .88;
  letter-spacing: 0;
  text-shadow: 0 20px 54px rgba(0,0,0,.46);
}

.story-scroll-reader header p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(255, 246, 222, .82) !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  line-height: 1.45 !important;
}

.story-scroll-moments {
  display: grid;
  gap: clamp(38px, 12vh, 130px);
  padding: 0 0 clamp(72px, 18vh, 180px);
}

.story-scroll-moment {
  min-height: min(82svh, 760px);
  display: grid;
  align-content: center;
  max-width: 980px;
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid rgba(255, 224, 156, .18);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(24, 14, 8, .42), rgba(104, 67, 33, .32)),
    radial-gradient(circle at 80% 18%, rgba(255, 214, 138, .14), transparent 28%);
  box-shadow: 0 34px 110px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.story-scroll-moment:nth-child(even) {
  margin-left: auto;
  text-align: right;
}

.story-scroll-moment small {
  margin-bottom: 22px;
  color: #ffd57a;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .12em;
}

.story-scroll-moment p {
  max-width: 860px !important;
  margin: 0 !important;
  color: #fffaf0 !important;
  font-size: clamp(30px, 5vw, 72px) !important;
  line-height: 1.04 !important;
  font-weight: 920 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  text-shadow: 0 18px 42px rgba(0,0,0,.42);
}

@media (max-width: 760px) {
  .story-object-experience {
    min-height: 100svh;
    padding: 68px 16px max(18px, env(safe-area-inset-bottom));
  }

  .story-object-photo-drift {
    display: none !important;
  }

  .story-object-head h3 {
    max-width: 8ch !important;
    font-size: clamp(40px, 13vw, 56px) !important;
  }

  .story-object-stage {
    margin-top: 28px;
    gap: 12px;
  }

  .story-object-card {
    min-height: 112px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 18% 22%, rgba(255, 224, 153, .2), transparent 32%),
      rgba(35, 22, 12, .52);
  }

  .story-object-card strong {
    font-size: clamp(25px, 7.4vw, 34px);
    line-height: 1.02;
  }

  .story-object-card small {
    max-width: 11ch;
    line-height: 1.18;
  }

  .story-reader-panel {
    padding: 64px 12px 0 !important;
  }

  .story-scroll-reader {
    width: 100%;
  }

  .story-scroll-reader header {
    min-height: calc(100svh - 98px);
    padding: 18px 8px 38px;
  }

  .story-scroll-reader h4 {
    max-width: 9ch;
    font-size: clamp(44px, 15vw, 68px);
  }

  .story-scroll-reader header p {
    font-size: 17px !important;
  }

  .story-scroll-moments {
    gap: 28px;
    padding-bottom: 72px;
  }

  .story-scroll-moment,
  .story-scroll-moment:nth-child(even) {
    min-height: 86svh;
    margin-left: 0;
    padding: 24px 20px;
    border-radius: 0;
    text-align: left;
    background:
      linear-gradient(160deg, rgba(29, 17, 9, .54), rgba(112, 72, 34, .36)),
      radial-gradient(circle at 82% 16%, rgba(255, 221, 154, .16), transparent 30%);
  }

  .story-scroll-moment p {
    font-size: clamp(31px, 11vw, 52px) !important;
    line-height: 1.05 !important;
  }

  .story-object-actions {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .story-scroll-moment {
    animation: storyMomentFloat 900ms ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 36%;
  }

  @keyframes storyMomentFloat {
    from { opacity: .28; transform: translateY(38px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
}
/* 20260717aa: 360px Story readability guard. */
@supports not (animation-timeline: view()) {
  .story-scroll-moment {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .memory-function-stage {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .smart-tree-experience.is-layer-story .memory-function-stage.is-open {
    align-items: stretch !important;
  }

  .story-object-experience {
    display: block !important;
    min-height: 100svh;
    height: auto;
    overflow-y: auto !important;
    padding: 58px 10px max(18px, env(safe-area-inset-bottom)) !important;
  }

  .story-object-head {
    max-width: 100% !important;
    padding: 0 2px;
  }

  .story-object-head h3 {
    max-width: 8.5ch !important;
    font-size: clamp(32px, 11vw, 42px) !important;
    line-height: .96 !important;
  }

  .story-object-head p {
    display: block !important;
    max-width: 30ch !important;
    margin-top: 10px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .story-object-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
    padding: 0 0 20px !important;
  }

  .story-object-card {
    grid-template-columns: 48px 1fr !important;
    min-height: 92px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

  .story-object-card i {
    width: 46px !important;
    height: 46px !important;
  }

  .story-object-card strong {
    font-size: clamp(21px, 6.2vw, 26px) !important;
    line-height: 1.02 !important;
  }

  .story-object-card small {
    max-width: 13ch !important;
    font-size: 12px !important;
    line-height: 1.14 !important;
  }

  .story-reader-panel {
    inset: 0 !important;
    padding: 58px 10px 0 !important;
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 78% 12%, rgba(255, 215, 139, .24), transparent 36%),
      linear-gradient(180deg, rgba(36, 22, 12, .92), rgba(93, 61, 32, .86)) !important;
  }

  .story-scroll-reader header {
    min-height: auto !important;
    padding: 18px 4px 28px !important;
  }

  .story-scroll-reader h4 {
    max-width: 9ch !important;
    font-size: clamp(36px, 12vw, 50px) !important;
    line-height: .94 !important;
  }

  .story-scroll-reader header p {
    max-width: 31ch !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
  }

  .story-scroll-moments {
    display: grid !important;
    gap: 18px !important;
    padding-bottom: 72px !important;
  }

  .story-scroll-moment,
  .story-scroll-moment:nth-child(even) {
    display: block !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 22px 16px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    text-align: left !important;
    background:
      linear-gradient(160deg, rgba(30, 18, 9, .68), rgba(112, 72, 34, .4)),
      radial-gradient(circle at 86% 18%, rgba(255, 221, 154, .18), transparent 32%) !important;
  }

  .story-scroll-moment small {
    display: block !important;
    margin-bottom: 14px !important;
    font-size: 12px !important;
  }

  .story-scroll-moment p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fffaf0 !important;
    font-size: clamp(25px, 8.8vw, 38px) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  .story-object-actions {
    display: none !important;
  }
}
/* 20260717ab: Story reader scroll narrative polish. */
.story-reader-panel.is-open {
  inset: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 225, 154, .28), transparent 34%),
    radial-gradient(circle at 14% 78%, rgba(199, 126, 46, .18), transparent 38%),
    linear-gradient(130deg, rgba(16, 9, 5, .96), rgba(70, 45, 26, .92) 55%, rgba(140, 93, 45, .78)) !important;
  color: #fff8e8;
  isolation: isolate;
}

.story-reader-panel.is-open::before,
.story-reader-panel.is-open::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.story-reader-panel.is-open::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), transparent 48%, rgba(255,205,122,.12)),
    radial-gradient(circle at 50% 54%, transparent 0 34%, rgba(21,12,7,.34) 70%);
}

.story-reader-panel.is-open::after {
  z-index: 1;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(255,228,161,.64) 0 1px, transparent 1.4px),
    linear-gradient(110deg, transparent, rgba(255,255,255,.08), transparent);
  background-size: 84px 84px, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
}

.story-reader-progress {
  position: sticky;
  top: 0;
  z-index: 28;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: max(10px, env(safe-area-inset-top)) clamp(14px, 4vw, 42px) 8px;
  pointer-events: none;
}

.story-reader-progress i {
  display: block;
  height: 2px;
  transform: scaleX(.04);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ffe7b1, #d79a35, #fff2ca);
  box-shadow: 0 0 18px rgba(255, 203, 107, .48);
  transition: transform .25s ease;
}

.story-reader-progress span {
  color: rgba(255, 239, 204, .78);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.story-reader-shell {
  position: relative;
  z-index: 3;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 6vw, 92px) 72px;
}

.story-reader-panel .story-mini-back {
  position: sticky;
  top: max(48px, calc(env(safe-area-inset-top) + 44px));
  z-index: 30;
  margin: 0;
  background: rgba(24, 13, 7, .48);
  backdrop-filter: blur(14px);
}

.story-scroll-reader {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.story-scroll-reader header {
  min-height: calc(100svh - 84px) !important;
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
  padding: 26px 0 56px !important;
}

.story-scroll-reader header small {
  display: inline-block;
  max-width: 34ch;
  color: rgba(255, 236, 195, .64);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-scroll-reader h4 {
  max-width: 10ch !important;
  font-size: clamp(58px, 10vw, 142px) !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
}

.story-scroll-reader header p {
  max-width: 700px !important;
  color: rgba(255,246,225,.78) !important;
  font-size: clamp(18px, 2.1vw, 27px) !important;
}

.story-scroll-moments {
  display: block !important;
  padding-bottom: clamp(80px, 18vh, 180px) !important;
}

.story-scroll-moment,
.story-scroll-moment:nth-child(even) {
  min-height: 100svh !important;
  display: grid !important;
  align-content: center !important;
  margin: 0 !important;
  padding: clamp(46px, 8vh, 110px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: left !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.story-scroll-moment small {
  display: block !important;
  width: max-content;
  margin: 0 0 22px !important;
  padding: 8px 13px;
  border: 1px solid rgba(255, 224, 159, .3);
  border-radius: 999px;
  color: #ffe0a0 !important;
  background: rgba(64, 39, 20, .38);
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.story-scroll-moment p {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 !important;
  color: #fffaf0 !important;
  font-size: clamp(42px, 7.4vw, 110px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  text-shadow: 0 22px 70px rgba(0,0,0,.46);
  opacity: .72;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}

.story-scroll-moment.is-current p {
  opacity: 1;
  transform: translateY(-4px);
  filter: drop-shadow(0 0 20px rgba(255, 210, 125, .14));
}

.story-scroll-moment.has-read p {
  opacity: .34;
  transform: translateY(-18px) scale(.985);
}

@media (max-width: 760px) {
  .story-reader-shell {
    padding: 0 16px 58px;
  }

  .story-reader-progress {
    height: 34px;
    padding-inline: 12px;
  }

  .story-reader-panel .story-mini-back {
    top: max(42px, calc(env(safe-area-inset-top) + 38px));
  }

  .story-scroll-reader header {
    min-height: calc(100svh - 88px) !important;
    padding-top: 34px !important;
  }

  .story-scroll-reader h4 {
    max-width: 8.8ch !important;
    font-size: clamp(44px, 15vw, 70px) !important;
  }

  .story-scroll-reader header p {
    max-width: 31ch !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  .story-scroll-moment,
  .story-scroll-moment:nth-child(even) {
    min-height: 100svh !important;
    padding: 74px 0 84px !important;
  }

  .story-scroll-moment p {
    font-size: clamp(30px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 390px) {
  .story-reader-shell {
    padding-inline: 12px;
  }

  .story-scroll-reader h4 {
    font-size: clamp(38px, 13vw, 52px) !important;
  }

  .story-scroll-moment p {
    font-size: clamp(26px, 8.8vw, 38px) !important;
    line-height: 1.12 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-scroll-moment p,
  .story-reader-progress i {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* 20260717: lock Smart Stone QR experience after ENTER so fallback/QR cannot scroll underneath. */
html.memory-experience-ready,
html.memory-experience-locked,
body.memory-experience-ready,
body.memory-experience-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.story-immersive-body.memory-experience-locked {
  min-height: 100svh !important;
  background: #100b08;
}

.story-immersive-body.memory-experience-locked .app-footer {
  display: none !important;
}

.story-immersive-body.memory-experience-locked .story-page-content {
  position: absolute !important;
  top: auto !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.story-immersive-body.memory-experience-locked .public-story,
.story-immersive-body.memory-experience-locked .story-shell,
.story-immersive-body.memory-experience-locked .smart-tree-experience {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.story-immersive-body.memory-experience-locked .memory-function-stage,
.story-immersive-body.memory-experience-locked [data-story-panel].is-open {
  overscroll-behavior: contain;
}



/* 20260717 Golden orb memory navigation */
.smart-tree-experience:not(.is-layer-open) .tree-branch-grid {
  --orb-size: clamp(82px, 9vw, 124px);
  --orb-label: clamp(15px, 1.4vw, 23px);
  top: clamp(112px, 23vh, 230px) !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(900px, calc(100vw - 48px)) !important;
  display: grid !important;
  align-items: start !important;
  justify-items: center !important;
  gap: clamp(28px, 8vw, 150px) !important;
  pointer-events: none;
  z-index: 6;
}

.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-1 .tree-branch-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch-grid,
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch-grid {
  grid-template-columns: repeat(var(--orb-cols, 3), minmax(0, 1fr)) !important;
}

.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch-grid { --orb-cols: 2; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch-grid { --orb-cols: 3; }

.smart-tree-experience:not(.is-layer-open) .tree-branch {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 10px !important;
  width: clamp(106px, 11vw, 152px) !important;
  min-height: 148px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #ffe9b5 !important;
  text-align: center !important;
  text-decoration: none !important;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-50px) scale(.82);
  transition: transform 420ms ease, filter 280ms ease, opacity 360ms ease;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: smartMemoryOrbArrive 900ms cubic-bezier(.18, 1, .22, 1) both;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch:hover,
.smart-tree-experience:not(.is-layer-open) .tree-branch:focus-visible,
.smart-tree-experience:not(.is-layer-open) .tree-branch.is-active {
  transform: translateY(-8px) scale(1.04) !important;
  filter: brightness(1.12) saturate(1.08);
  outline: 0;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch::before {
  content: "";
  position: absolute;
  top: calc(var(--orb-size) * .48);
  left: 50%;
  width: clamp(74px, 12vw, 184px);
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 140, .1), rgba(255, 241, 188, .96), rgba(255, 191, 82, .72), transparent);
  box-shadow: 0 0 12px rgba(255, 194, 91, .5), 0 0 28px rgba(255, 214, 128, .22);
  opacity: .76;
  transform-origin: left center;
  transform: rotate(var(--orb-line-rotate, 0deg));
  animation: smartOrbLinePulse 2600ms ease-in-out infinite;
  pointer-events: none;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch::after {
  content: "";
  position: absolute;
  top: calc(var(--orb-size) * -.14);
  left: 50%;
  width: calc(var(--orb-size) * 1.38);
  height: calc(var(--orb-size) * 1.38);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 240, 185, .48), rgba(255, 204, 103, .18) 36%, rgba(255, 168, 54, .06) 59%, transparent 72%);
  filter: blur(.2px);
  opacity: .82;
  transform: translateX(-50%);
  animation: smartOrbAura 4300ms ease-in-out infinite;
  pointer-events: none;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch span {
  position: relative;
  z-index: 2;
  display: grid !important;
  justify-items: center;
  gap: 9px;
  width: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffe7ad !important;
  font-size: var(--orb-label) !important;
  font-weight: 650 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .38), 0 0 24px rgba(255, 198, 87, .32);
}

.smart-tree-experience:not(.is-layer-open) .tree-branch span img {
  display: block !important;
  width: var(--orb-size) !important;
  height: var(--orb-size) !important;
  padding: clamp(12px, 1.6vw, 20px);
  border: 1px solid rgba(255, 231, 166, .64);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 24%, rgba(255, 248, 215, .28), rgba(236, 171, 71, .2) 45%, rgba(54, 28, 12, .18) 72%, rgba(255, 214, 122, .08));
  box-shadow: inset 0 0 20px rgba(255, 241, 190, .13), 0 0 28px rgba(255, 188, 78, .38), 0 0 80px rgba(255, 188, 78, .22);
  transform: translateZ(0);
  animation: smartOrbFloat 5200ms ease-in-out infinite;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch strong,
.smart-tree-experience:not(.is-layer-open) .tree-branch small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(1) { --orb-line-rotate: 12deg; transform: translateY(24px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(1)::before { left: 70%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(2) { --orb-line-rotate: -90deg; transform: translateY(104px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(2)::before { width: 110px; left: 50%; top: -26px; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(3) { --orb-line-rotate: 168deg; transform: translateY(24px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(3)::before { left: 30%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(1) { --orb-line-rotate: 10deg; transform: translateY(44px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(1)::before { left: 70%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(2) { --orb-line-rotate: 170deg; transform: translateY(44px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(2)::before { left: 30%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-1 .tree-branch { --orb-line-rotate: -90deg; transform: translateY(92px) scale(1); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-1 .tree-branch::before { top: -22px; width: 98px; }

@keyframes smartMemoryOrbArrive {
  0% { opacity: 0; transform: translateY(-60px) scale(.72); filter: blur(8px); }
  64% { opacity: 1; transform: translateY(12px) scale(1.06); filter: blur(0); }
  100% { opacity: 1; }
}

@keyframes smartOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.025); }
}

@keyframes smartOrbAura {
  0%, 100% { opacity: .58; transform: translateX(-50%) scale(.96); }
  50% { opacity: .98; transform: translateX(-50%) scale(1.08); }
}

@keyframes smartOrbLinePulse {
  0%, 100% { opacity: .42; filter: brightness(.92); }
  45% { opacity: .96; filter: brightness(1.2); }
}

@media (max-width: 760px) {
  .smart-tree-experience:not(.is-layer-open) .tree-branch-grid {
    --orb-size: clamp(68px, 19vw, 82px);
    --orb-label: 14px;
    top: auto !important;
    bottom: max(24px, env(safe-area-inset-bottom)) !important;
    width: min(342px, calc(100vw - 28px)) !important;
    gap: 8px !important;
    grid-template-columns: repeat(var(--orb-cols, 3), minmax(0, 1fr)) !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-1 .tree-branch-grid { --orb-cols: 1; width: min(140px, calc(100vw - 28px)) !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch-grid { --orb-cols: 2; width: min(236px, calc(100vw - 28px)) !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch-grid { --orb-cols: 3; }

  .smart-tree-experience:not(.is-layer-open) .tree-branch,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-1 .tree-branch,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(1),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(2),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch:nth-child(3),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(1),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch:nth-child(2) {
    width: 100% !important;
    min-height: 108px !important;
    transform: none !important;
  }

  .smart-tree-experience:not(.is-layer-open) .tree-branch::before {
    top: -36px !important;
    left: 50% !important;
    width: 64px !important;
    transform: rotate(-90deg) !important;
    opacity: .58;
  }

  .smart-tree-experience:not(.is-layer-open) .tree-branch span {
    gap: 7px;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience:not(.is-layer-open) .tree-branch,
  .smart-tree-experience:not(.is-layer-open) .tree-branch span img,
  .smart-tree-experience:not(.is-layer-open) .tree-branch::before,
  .smart-tree-experience:not(.is-layer-open) .tree-branch::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 20260717 Gallery orb and tree orbit positions */
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
  display: block !important;
  top: clamp(76px, 14vh, 158px) !important;
  left: 50% !important;
  width: min(1120px, calc(100vw - 78px)) !important;
  height: clamp(300px, 48vh, 470px) !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch { position: absolute !important; pointer-events: auto; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1) { left: 24%; top: 8%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2) { left: 20%; top: 58%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3) { right: 12%; top: 12%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4) { right: 20%; top: 60%; }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after,
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-3 .tree-branch::after,
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-2 .tree-branch::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(92px, 11vw, 178px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 143, .78), transparent);
  box-shadow: 0 0 14px rgba(255, 196, 76, .55);
  opacity: .68;
  transform-origin: center;
  animation: branchLinePulse 3.8s ease-in-out infinite;
}
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1)::after,
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2)::after { left: 72%; transform: rotate(12deg); }
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3)::after,
.smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4)::after { right: 72%; transform: rotate(-12deg); }
@keyframes branchLinePulse { 0%, 100% { opacity: .28; filter: blur(.2px); } 50% { opacity: .86; filter: blur(0); } }
.memory-stage-gallery-premium { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: clamp(12px, 2vw, 20px); padding: clamp(8px, 1.4vw, 18px) 0 4px; }
.memory-stage-gallery-premium .memory-stage-photo { aspect-ratio: 4 / 3; border: 1px solid rgba(255, 219, 143, .5); border-radius: 22px; overflow: hidden; background: rgba(255, 234, 184, .1); box-shadow: 0 18px 42px rgba(0, 0, 0, .25), inset 0 0 24px rgba(255, 210, 116, .12); cursor: pointer; }
.memory-stage-gallery-premium .memory-stage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .45s ease; }
.memory-stage-gallery-premium .memory-stage-photo:hover img,
.memory-stage-gallery-premium .memory-stage-photo:focus-visible img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
@media (max-width: 760px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; top: auto !important; bottom: max(24px, env(safe-area-inset-bottom)) !important; left: 50% !important; width: min(332px, calc(100vw - 30px)) !important; height: auto !important; transform: translateX(-50%) !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch { position: relative !important; inset: auto !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after { display: none; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch strong,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch small { display: none; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch span { min-height: 98px; }
  .memory-stage-gallery-premium { grid-template-columns: 1fr 1fr; }
}
/* 20260717 Final orb constellation around tree */
@media (min-width: 761px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    --orb-size: clamp(88px, 6.6vw, 118px);
    --orb-label: clamp(17px, 1.15vw, 22px);
    display: block !important;
    top: clamp(108px, 16vh, 188px) !important;
    left: 54% !important;
    width: min(980px, calc(100vw - 420px)) !important;
    min-width: 720px;
    height: clamp(335px, 45vh, 510px) !important;
    transform: translateX(-50%) !important;
    pointer-events: none;
    z-index: 10;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch {
    position: absolute !important;
    inset: auto !important;
    width: clamp(136px, 11vw, 180px) !important;
    pointer-events: auto;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1) {
    left: 10% !important;
    top: 5% !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2) {
    left: 8% !important;
    top: 57% !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3) {
    right: 6% !important;
    top: 8% !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4) {
    right: 10% !important;
    top: 60% !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after {
    content: "";
    display: block !important;
    position: absolute;
    top: 48%;
    width: clamp(110px, 14vw, 235px);
    height: 2px;
    border-radius: 999px;
    opacity: 0.82;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 226, 153, 0), rgba(255, 212, 118, 0.94), rgba(255, 226, 153, 0));
    box-shadow: 0 0 14px rgba(255, 208, 100, 0.75), 0 0 34px rgba(255, 170, 60, 0.24);
    animation: smartOrbRayPulse 3.8s ease-in-out infinite;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1)::after {
    left: 73%;
    transform: rotate(9deg);
    transform-origin: left center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2)::after {
    left: 73%;
    transform: rotate(-12deg);
    transform-origin: left center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3)::after {
    right: 73%;
    transform: rotate(-8deg);
    transform-origin: right center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4)::after {
    right: 73%;
    transform: rotate(12deg);
    transform-origin: right center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch span {
    filter: drop-shadow(0 0 18px rgba(255, 214, 128, 0.58));
  }
}

@media (max-width: 760px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    --orb-size: clamp(56px, 17vw, 70px);
    --orb-label: clamp(11px, 3.5vw, 14px);
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    top: auto !important;
    right: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    width: min(354px, calc(100vw - 10px)) !important;
    min-width: 0 !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: 12;
    pointer-events: none;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    pointer-events: auto;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch span {
    min-height: 82px !important;
    padding: 4px 2px 0 !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch img {
    width: var(--orb-size) !important;
    height: var(--orb-size) !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch strong {
    display: block !important;
    max-width: 74px;
    margin: 0 auto;
    color: #ffe6aa;
    font-size: var(--orb-label) !important;
    line-height: 1.05 !important;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72), 0 0 12px rgba(255, 210, 112, 0.46);
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch small {
    display: none !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 50%;
    top: -40px;
    width: 1px;
    height: 38px;
    border-radius: 999px;
    transform: translateX(-50%);
    opacity: 0.62;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 228, 157, 0), rgba(255, 214, 117, 0.9), rgba(255, 228, 157, 0.1));
    box-shadow: 0 0 12px rgba(255, 209, 104, 0.72);
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1)::after {
    transform: translateX(-50%) rotate(-10deg);
    transform-origin: bottom center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2)::after {
    transform: translateX(-50%) rotate(-3deg);
    transform-origin: bottom center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3)::after {
    transform: translateX(-50%) rotate(3deg);
    transform-origin: bottom center;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4)::after {
    transform: translateX(-50%) rotate(10deg);
    transform-origin: bottom center;
  }
}

@media (max-width: 380px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    --orb-size: 58px;
    width: min(342px, calc(100vw - 6px)) !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch strong {
    font-size: 11px !important;
  }
}

@keyframes smartOrbRayPulse {
  0%, 100% { opacity: 0.42; filter: brightness(0.86); }
  50% { opacity: 0.92; filter: brightness(1.24); }
}
/* 20260717ae: Center the golden memory orbs around the tree and keep Story text-only. */
@media (min-width: 761px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    left: 50% !important;
    width: min(820px, calc(100vw - 520px)) !important;
    min-width: min(740px, calc(100vw - 440px)) !important;
    top: clamp(94px, 13vh, 166px) !important;
    height: clamp(322px, 41vh, 470px) !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch {
    width: clamp(120px, 9.2vw, 158px) !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1) { left: 5% !important; top: 6% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2) { left: 2% !important; top: 58% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3) { right: 5% !important; top: 6% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4) { right: 2% !important; top: 58% !important; }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after {
    width: clamp(88px, 9vw, 160px) !important;
  }
}

@media (min-width: 1180px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    left: 49.5% !important;
    width: min(860px, calc(100vw - 620px)) !important;
    min-width: 760px !important;
  }
}

.smart-tree-experience.is-layer-story .memory-function-stage {
  inset: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.story-text-experience {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff8e8;
  isolation: isolate;
}

.story-text-experience::before,
.story-text-experience::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
}

.story-text-experience::before {
  background:
    radial-gradient(ellipse at 18% 52%, rgba(255, 246, 222, .34), transparent 25%),
    radial-gradient(ellipse at 62% 44%, rgba(134, 120, 98, .32), transparent 34%),
    radial-gradient(ellipse at 42% 76%, rgba(255, 196, 96, .16), transparent 36%),
    linear-gradient(115deg, rgba(24, 13, 7, .54), rgba(84, 53, 26, .34) 42%, rgba(244, 180, 92, .18));
  filter: blur(9px);
  opacity: .86;
}

.story-text-experience::after {
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 231, 171, .75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 68%, rgba(255, 205, 113, .5) 0 1px, transparent 1.6px);
  background-size: 150px 150px, 220px 220px;
  opacity: .23;
  mix-blend-mode: screen;
}

.story-text-experience .story-text-progress {
  position: fixed !important;
  left: clamp(18px, 4vw, 58px) !important;
  right: clamp(18px, 4vw, 58px) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 5 !important;
}

.story-text-experience .story-text-scroll-reader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(26px, 9vw, 150px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  z-index: 2;
  scrollbar-color: rgba(247, 190, 78, .55) rgba(255,255,255,.08);
}

.story-text-experience .story-text-cover,
.story-text-experience .story-scroll-moment,
.story-text-experience .story-scroll-moment:nth-child(even) {
  min-height: 100svh !important;
  display: grid !important;
  align-content: center !important;
  padding: clamp(88px, 13vh, 150px) 0 clamp(96px, 14vh, 170px) !important;
  scroll-snap-align: start;
  position: relative;
}

.story-text-experience .story-text-cover span,
.story-text-experience .story-scroll-moment small {
  display: inline-block !important;
  width: max-content;
  margin: 0 0 22px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 220, 148, .42) !important;
  border-radius: 999px !important;
  background: rgba(65, 45, 23, .42) !important;
  color: #ffe2a2 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.story-text-experience .story-text-cover h4 {
  max-width: 9ch !important;
  margin: 0 0 22px !important;
  color: #fffaf0 !important;
  font-size: clamp(58px, 10vw, 150px) !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 18px 58px rgba(0,0,0,.42);
}

.story-text-experience .story-text-cover p {
  max-width: 42ch !important;
  color: rgba(255, 244, 219, .82) !important;
  font-size: clamp(18px, 2vw, 27px) !important;
  line-height: 1.36 !important;
}

.story-text-experience .story-text-cover small {
  color: rgba(255, 230, 186, .66);
  font-weight: 800;
}

.story-text-experience .story-scroll-moment p {
  width: min(1020px, 100%) !important;
  max-width: 13ch !important;
  margin: 0 !important;
  color: #fff8e8 !important;
  font-size: clamp(50px, 7.3vw, 118px) !important;
  line-height: .94 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  opacity: .18;
  transform: translate3d(0, 58px, 0) scale(.96);
  filter: blur(5px);
  transition: opacity .85s ease, transform .85s ease, filter .85s ease;
  text-shadow: 0 18px 70px rgba(0,0,0,.5), 0 0 34px rgba(255, 197, 93, .12);
}

.story-text-experience .story-scroll-moment:nth-child(3n+2) {
  justify-items: center !important;
  text-align: center !important;
}
.story-text-experience .story-scroll-moment:nth-child(3n+2) p { max-width: 15ch !important; }
.story-text-experience .story-scroll-moment:nth-child(3n) {
  justify-items: end !important;
  text-align: right !important;
}
.story-text-experience .story-scroll-moment:nth-child(3n) p { max-width: 12ch !important; }

.story-text-experience .story-scroll-moment.is-current p {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

.story-text-experience .story-scroll-moment.has-read p {
  opacity: .22 !important;
  transform: translate3d(0, -48px, 0) scale(.94) !important;
  filter: blur(2px) !important;
}

.story-text-actions {
  position: fixed !important;
  left: clamp(18px, 4vw, 58px) !important;
  bottom: max(48px, calc(env(safe-area-inset-bottom) + 42px)) !important;
  right: auto !important;
  z-index: 6 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.story-text-actions strong { display: none !important; }

.memory-stage-video-block {
  margin-top: clamp(18px, 3vw, 34px);
  padding-top: clamp(14px, 2vw, 24px);
  border-top: 1px solid rgba(255, 221, 160, .22);
}
.memory-stage-video-block > b {
  display: block;
  margin-bottom: 12px;
  color: #ffe0a0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.memory-stage-video-cinema {
  overflow: hidden;
  border: 1px solid rgba(255, 216, 145, .34);
  border-radius: 22px;
  background: rgba(14, 8, 4, .58);
  box-shadow: 0 22px 64px rgba(0,0,0,.25);
  aspect-ratio: 16 / 9;
}
.memory-stage-video-cinema iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 760px) {
  .story-text-experience .story-text-scroll-reader {
    padding: 0 clamp(22px, 7vw, 34px) !important;
  }
  .story-text-experience .story-text-cover,
  .story-text-experience .story-scroll-moment,
  .story-text-experience .story-scroll-moment:nth-child(even) {
    min-height: 100svh !important;
    padding: 86px 0 106px !important;
  }
  .story-text-experience .story-text-cover h4 {
    max-width: 8.6ch !important;
    font-size: clamp(46px, 15vw, 70px) !important;
    line-height: .9 !important;
  }
  .story-text-experience .story-text-cover p {
    max-width: 30ch !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .story-text-experience .story-scroll-moment p,
  .story-text-experience .story-scroll-moment:nth-child(3n+2) p,
  .story-text-experience .story-scroll-moment:nth-child(3n) p {
    max-width: 9.6ch !important;
    font-size: clamp(36px, 12vw, 58px) !important;
    line-height: 1.02 !important;
    text-align: left !important;
  }
  .story-text-experience .story-scroll-moment,
  .story-text-experience .story-scroll-moment:nth-child(3n+2),
  .story-text-experience .story-scroll-moment:nth-child(3n) {
    justify-items: start !important;
    text-align: left !important;
  }
  .story-text-actions {
    left: 16px !important;
    bottom: max(42px, calc(env(safe-area-inset-bottom) + 34px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-text-experience .story-scroll-moment p {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* 20260717af: final balance for Smart Stone orbs and text-only Story layer. */
@media (min-width: 761px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    left: 50% !important;
    right: auto !important;
    top: clamp(102px, 14vh, 178px) !important;
    width: min(700px, 58vw) !important;
    min-width: min(680px, calc(100vw - 520px)) !important;
    height: clamp(315px, 39vh, 455px) !important;
    transform: translateX(-50%) !important;
    pointer-events: none;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch {
    width: clamp(110px, 7.8vw, 146px) !important;
    pointer-events: auto;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1) { left: 1% !important; top: 5% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2) { left: -1% !important; top: 57% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3) { right: 1% !important; top: 5% !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4) { right: -1% !important; top: 57% !important; }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after {
    width: clamp(112px, 11vw, 188px) !important;
    opacity: .78 !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1)::after { left: 72% !important; transform: rotate(11deg) !important; transform-origin: left center !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2)::after { left: 72% !important; transform: rotate(-10deg) !important; transform-origin: left center !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3)::after { right: 72% !important; transform: rotate(-11deg) !important; transform-origin: right center !important; }
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4)::after { right: 72% !important; transform: rotate(10deg) !important; transform-origin: right center !important; }
}

@media (min-width: 761px) and (max-width: 1260px) {
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    left: 54% !important;
    width: min(620px, 54vw) !important;
    min-width: min(610px, calc(100vw - 430px)) !important;
  }
}

.story-text-experience .story-text-cover,
.story-text-experience .story-scroll-moment {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 218, 144, .18), transparent 36%),
    radial-gradient(ellipse at 18% 78%, rgba(255, 255, 255, .06), transparent 38%);
}

.story-text-experience .story-text-cover::before,
.story-text-experience .story-scroll-moment::before {
  content: "";
  position: absolute;
  inset: 8% -8%;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background:
    radial-gradient(ellipse at 44% 48%, rgba(245, 235, 210, .44), transparent 23%),
    radial-gradient(ellipse at 58% 50%, rgba(38, 32, 27, .30), transparent 30%),
    linear-gradient(105deg, transparent 0 30%, rgba(255, 230, 184, .12) 45%, transparent 60%);
  filter: blur(18px);
  transform: scale(.94);
  transition: opacity .85s ease, transform .85s ease;
}

.story-text-experience .story-scroll-moment.is-current::before,
.story-text-experience .story-text-cover::before {
  opacity: .72;
  transform: scale(1);
}

.story-text-experience .story-scroll-moment p {
  max-width: 12ch !important;
  will-change: transform, opacity, filter;
}

.story-text-experience .story-scroll-moment.is-current p {
  animation: storyMomentBreath 3.8s ease-in-out both;
}

@keyframes storyMomentBreath {
  0% { letter-spacing: 0; text-shadow: 0 18px 70px rgba(0,0,0,.5), 0 0 12px rgba(255, 197, 93, .06); }
  50% { letter-spacing: .006em; text-shadow: 0 20px 80px rgba(0,0,0,.55), 0 0 28px rgba(255, 197, 93, .18); }
  100% { letter-spacing: 0; text-shadow: 0 18px 70px rgba(0,0,0,.5), 0 0 14px rgba(255, 197, 93, .10); }
}

@media (max-width: 760px) {
  .story-text-experience .story-text-cover,
  .story-text-experience .story-scroll-moment,
  .story-text-experience .story-scroll-moment:nth-child(even) {
    padding-top: 96px !important;
    padding-bottom: 120px !important;
  }

  .story-text-experience .story-scroll-moment p,
  .story-text-experience .story-scroll-moment:nth-child(3n+2) p,
  .story-text-experience .story-scroll-moment:nth-child(3n) p {
    max-width: 10ch !important;
    font-size: clamp(40px, 13vw, 64px) !important;
    line-height: .98 !important;
  }
}

/* 20260717ag: cleanup obsolete Story object ghosts and isolate active memory scenes. */
.smart-tree-experience.is-layer-open .tree-branch-grid {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.smart-tree-experience.is-layer-open .memory-function-stage {
  z-index: 80 !important;
  isolation: isolate;
}

.smart-tree-experience.is-layer-story .story-object-experience,
.smart-tree-experience.is-layer-story [data-story-objects],
.smart-tree-experience.is-layer-story [data-story-object],
.smart-tree-experience.is-layer-story [data-story-panel],
.smart-tree-experience.is-layer-story .story-object-nav,
.smart-tree-experience.is-layer-story .story-object-button,
.smart-tree-experience.is-layer-story .story-object-stage,
.smart-tree-experience.is-layer-story .story-object-card,
.smart-tree-experience.is-layer-story .story-object-panel,
.smart-tree-experience.is-layer-story .story-panel-shell,
.smart-tree-experience.is-layer-story .story-reader-shell {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.smart-tree-experience.is-layer-story .story-text-experience {
  z-index: 90 !important;
  background:
    radial-gradient(ellipse at 72% 36%, rgba(255, 201, 104, .48), transparent 34%),
    radial-gradient(ellipse at 24% 62%, rgba(72, 45, 21, .88), transparent 50%),
    linear-gradient(116deg, rgba(17, 9, 4, .98), rgba(82, 53, 26, .94) 52%, rgba(184, 128, 58, .78)) !important;
  backdrop-filter: blur(8px);
}

.smart-tree-experience.is-layer-story .story-text-experience::before {
  opacity: .58 !important;
}

.smart-tree-experience.is-layer-story .story-text-scroll-reader,
.smart-tree-experience.is-layer-story .story-text-cover,
.smart-tree-experience.is-layer-story .story-scroll-moment,
.smart-tree-experience.is-layer-story .story-text-progress,
.smart-tree-experience.is-layer-story .story-text-actions {
  position: relative;
  z-index: 3 !important;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-text-experience {
    background:
      radial-gradient(ellipse at 62% 30%, rgba(255, 203, 110, .38), transparent 42%),
      linear-gradient(145deg, rgba(20, 10, 5, .98), rgba(83, 55, 29, .95) 58%, rgba(154, 107, 53, .82)) !important;
  }
}
/* 20260717ah: Story book-emergence scroll reader. */
.smart-tree-experience.is-layer-story .story-text-experience {
  overflow: hidden !important;
  perspective: 1200px;
}

.smart-tree-experience.is-layer-story .story-text-experience::before {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 211, 118, .34), transparent 24%),
    radial-gradient(ellipse at 50% 43%, rgba(255, 244, 220, .16), transparent 32%),
    radial-gradient(ellipse at 18% 28%, rgba(50, 28, 14, .72), transparent 38%),
    linear-gradient(126deg, rgba(18, 9, 4, .94), rgba(103, 66, 31, .78) 52%, rgba(229, 163, 74, .42)) !important;
  filter: blur(7px) !important;
  opacity: .92 !important;
}

.story-text-book-source {
  position: fixed;
  left: 50%;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 46px));
  width: clamp(178px, 25vw, 360px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 0 22px rgba(242, 180, 68, .34)) drop-shadow(0 24px 38px rgba(0,0,0,.34));
}

.story-text-book-source::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 150%;
  height: 54%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 211, 117, .36), rgba(255, 202, 80, .10) 42%, transparent 72%);
  filter: blur(18px);
  z-index: -1;
}

.story-text-book-source svg {
  width: 100%;
  height: 100%;
  display: block;
}

.smart-tree-experience.is-layer-story .story-text-scroll-reader {
  scroll-snap-type: y mandatory !important;
  padding-bottom: clamp(240px, 36vh, 390px) !important;
}

.smart-tree-experience.is-layer-story .story-text-cover,
.smart-tree-experience.is-layer-story .story-scroll-moment,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(even) {
  min-height: 100svh !important;
  scroll-snap-align: start;
  padding-bottom: clamp(230px, 35vh, 380px) !important;
}

.smart-tree-experience.is-layer-story .story-text-cover small {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(430px, 88vw);
  margin-top: 18px;
  color: rgba(255, 231, 188, .78) !important;
  line-height: 1.35;
}

.smart-tree-experience.is-layer-story .story-text-cover small::before {
  content: "Scroll";
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(244, 178, 61, .18);
  color: #ffe3a8;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 153, .24);
}

.smart-tree-experience.is-layer-story .story-scroll-moment {
  transform-style: preserve-3d;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n+2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  max-width: min(14ch, 92vw) !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto;
  text-wrap: balance;
  transform-origin: 50% 92%;
  opacity: .05 !important;
  transform: translate3d(0, 34vh, -120px) scale(.54) rotateX(58deg) !important;
  filter: blur(10px) saturate(.78) !important;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.18,1), filter .9s ease !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n+2).is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n).is-current p {
  opacity: 1 !important;
  transform: translate3d(0, -5vh, 0) scale(1) rotateX(0deg) !important;
  filter: blur(0) saturate(1.04) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.has-read p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n+2).has-read p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n).has-read p {
  opacity: .16 !important;
  transform: translate3d(0, -30vh, -80px) scale(.72) rotateX(-24deg) !important;
  filter: blur(4px) saturate(.86) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment small {
  opacity: .82;
  transform: translateY(10vh);
  transition: opacity .7s ease, transform .7s ease;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current small {
  opacity: 1;
  transform: translateY(0);
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(160px, 25vh, 300px);
  width: min(520px, 92vw);
  height: min(260px, 42vw);
  transform: translateX(-50%) scale(.78);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 232, 178, .18), rgba(255, 207, 107, .08) 40%, transparent 70%);
  filter: blur(18px);
  opacity: .15;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after {
  opacity: .58;
  transform: translateX(-50%) scale(1);
}

@media (max-width: 760px) {
  .story-text-book-source {
    width: min(62vw, 238px);
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 42px));
  }

  .smart-tree-experience.is-layer-story .story-text-scroll-reader {
    padding-left: clamp(18px, 7vw, 28px) !important;
    padding-right: clamp(18px, 7vw, 28px) !important;
    padding-bottom: 245px !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover,
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(even) {
    padding-top: 92px !important;
    padding-bottom: 245px !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover h4 {
    max-width: 9ch !important;
    font-size: clamp(44px, 14.5vw, 68px) !important;
    overflow-wrap: break-word !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n+2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: min(9.4ch, 88vw) !important;
    font-size: clamp(34px, 11.4vw, 54px) !important;
    line-height: 1.03 !important;
    text-align: left !important;
    transform: translate3d(0, 30vh, -100px) scale(.56) rotateX(56deg) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n+2).is-current p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n).is-current p {
    transform: translate3d(0, -3vh, 0) scale(1) rotateX(0deg) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-actions {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}
/* 20260717ai: premium mist text reveal for Story page. */
.smart-tree-experience.is-layer-story .story-text-experience {
  position: absolute;
  inset: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 100svh;
  color: #fff7df;
  background:
    radial-gradient(circle at 68% 35%, rgba(242, 184, 86, 0.36), transparent 28%),
    radial-gradient(circle at 44% 62%, rgba(255, 224, 151, 0.22), transparent 22%),
    linear-gradient(115deg, rgba(22, 12, 7, 0.92), rgba(92, 51, 20, 0.72) 48%, rgba(179, 119, 46, 0.7));
  scroll-behavior: smooth;
  isolation: isolate;
}

.smart-tree-experience.is-layer-story .story-text-experience::before,
.smart-tree-experience.is-layer-story .story-text-experience::after {
  content: "";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: 2;
}

.smart-tree-experience.is-layer-story .story-text-experience::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(250, 236, 194, 0.2), transparent 18%),
    radial-gradient(circle at 38% 58%, rgba(48, 45, 40, 0.42), transparent 24%),
    radial-gradient(circle at 62% 68%, rgba(255, 211, 130, 0.18), transparent 26%);
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: .76;
  animation: storyMistDrift 14s ease-in-out infinite alternate;
}

.smart-tree-experience.is-layer-story .story-text-experience::after {
  background:
    linear-gradient(90deg, rgba(13, 8, 5, .42), transparent 26%, transparent 74%, rgba(13, 8, 5, .32)),
    radial-gradient(circle at 50% 100%, rgba(255, 198, 93, .22), transparent 34%);
  opacity: .82;
}

.smart-tree-experience.is-layer-story .story-text-book-source {
  display: none !important;
}

.story-text-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.story-text-mist,
.story-text-portal {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(78vmin, 520px);
  height: min(78vmin, 520px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.story-text-mist-one {
  background: radial-gradient(circle, rgba(255,255,244,.34), rgba(180,180,168,.16) 38%, transparent 70%);
  filter: blur(18px);
  opacity: .5;
  animation: storyInkPulse 8s ease-in-out infinite;
}

.story-text-mist-two {
  width: min(58vmin, 420px);
  height: min(58vmin, 420px);
  background: radial-gradient(circle, rgba(38, 38, 34, .42), rgba(64, 58, 49, .2) 42%, transparent 72%);
  filter: blur(24px);
  opacity: .5;
  mix-blend-mode: multiply;
  animation: storyInkPulse 11s ease-in-out infinite reverse;
}

.story-text-portal {
  width: min(34vmin, 250px);
  height: min(34vmin, 250px);
  border: 1px solid rgba(255, 217, 140, .22);
  box-shadow: 0 0 80px rgba(232, 169, 65, .2), inset 0 0 55px rgba(255, 233, 184, .1);
  opacity: .42;
}

.smart-tree-experience.is-layer-story .story-text-progress {
  position: fixed;
  top: 18px;
  right: 22px;
  left: auto;
  z-index: 18;
  width: min(260px, 42vw);
  pointer-events: none;
}

.smart-tree-experience.is-layer-story .story-text-progress i {
  display: block;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe6a6, #c78525);
  box-shadow: 0 0 18px rgba(255, 196, 92, .45);
}

.smart-tree-experience.is-layer-story .story-text-progress span {
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(72, 46, 23, .72);
  color: #ffe8ad;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.smart-tree-experience.is-layer-story .story-text-scroll-reader {
  position: relative;
  z-index: 8;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  scroll-snap-type: y proximity;
}

.smart-tree-experience.is-layer-story .story-text-cover,
.smart-tree-experience.is-layer-story .story-scroll-moment {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(72px, 10vh, 128px) clamp(24px, 10vw, 164px);
  scroll-snap-align: start;
  position: relative;
  overflow: visible;
}

.smart-tree-experience.is-layer-story .story-text-cover {
  padding-top: clamp(100px, 15vh, 150px);
}

.smart-tree-experience.is-layer-story .story-text-cover span,
.smart-tree-experience.is-layer-story .story-scroll-moment small {
  display: inline-flex;
  width: max-content;
  max-width: 86vw;
  padding: 9px 17px;
  border: 1px solid rgba(255, 220, 148, .55);
  border-radius: 999px;
  color: #ffe3a3;
  background: rgba(67, 43, 22, .58);
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.smart-tree-experience.is-layer-story .story-text-cover h4 {
  margin: 0;
  max-width: 11ch;
  color: #fff9e9;
  font-size: clamp(56px, 10vw, 132px);
  line-height: .92;
  letter-spacing: -0.035em;
  text-shadow: 0 10px 50px rgba(0,0,0,.36);
}

.smart-tree-experience.is-layer-story .story-text-cover p,
.smart-tree-experience.is-layer-story .story-text-cover small {
  max-width: min(620px, 86vw);
  color: rgba(255, 245, 221, .82);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vmin, 560px);
  height: min(70vmin, 560px);
  transform: translate(-50%, -50%) scale(.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(255,255,247,.34), rgba(120, 116, 104, .23) 44%, transparent 70%),
    radial-gradient(circle, rgba(56, 54, 48, .42), transparent 62%);
  filter: blur(26px);
  opacity: 0;
  transition: opacity .9s ease, transform 1.15s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before {
  opacity: .86;
  transform: translate(-50%, -50%) scale(1);
}

.smart-tree-experience.is-layer-story .story-scroll-moment p {
  margin: 0;
  max-width: min(12.6ch, 86vw);
  color: #fff7e4;
  font-size: clamp(54px, 8.6vw, 118px);
  line-height: .98;
  letter-spacing: -0.035em;
  font-weight: 850;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  opacity: .06;
  transform: translate3d(0, 32vh, 0) scale(.82);
  filter: blur(18px);
  transition: opacity .85s ease, transform 1.05s cubic-bezier(.16,1,.3,1), filter .85s ease;
  text-shadow: 0 12px 44px rgba(0,0,0,.38), 0 0 24px rgba(255, 211, 137, .12);
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) {
  align-items: center;
  text-align: center;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
  align-items: flex-end;
  text-align: right;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment.has-entered p {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.smart-tree-experience.is-layer-story .story-scroll-moment.has-read p,
.smart-tree-experience.is-layer-story .story-scroll-moment.is-past p {
  opacity: .14;
  transform: translate3d(0, -26vh, 0) scale(.86);
  filter: blur(7px);
}

.smart-tree-experience.is-layer-story .story-text-actions {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 19;
  width: min(640px, calc(100vw - 32px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 221, 151, .28);
  background: linear-gradient(180deg, rgba(40,24,13,.05), rgba(24,13,7,.82));
  backdrop-filter: blur(14px);
}

.smart-tree-experience.is-layer-story .story-text-actions button {
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  color: #211306;
  background: linear-gradient(135deg, #ffd779, #dfa02f);
  font-weight: 900;
  cursor: pointer;
}

.smart-tree-experience.is-layer-story .story-text-actions strong {
  color: rgba(255, 241, 208, .86);
  font-weight: 900;
}

@keyframes storyMistDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

@keyframes storyInkPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .38; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .64; }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-text-progress {
    top: 14px;
    right: 12px;
    width: 128px;
  }

  .smart-tree-experience.is-layer-story .story-text-progress span {
    font-size: 11px;
    padding: 7px 10px;
  }

  .smart-tree-experience.is-layer-story .story-text-cover,
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    align-items: flex-start;
    text-align: left;
    padding: 92px 22px 112px;
  }

  .smart-tree-experience.is-layer-story .story-text-cover h4 {
    max-width: 8.5ch;
    font-size: clamp(48px, 15vw, 76px);
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p {
    max-width: 9.8ch;
    font-size: clamp(40px, 13.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }

  .story-text-mist,
  .story-text-portal {
    top: 49%;
    width: 82vmin;
    height: 82vmin;
  }

  .smart-tree-experience.is-layer-story .story-text-actions {
    bottom: 10px;
    width: calc(100vw - 20px);
    padding: 8px;
  }

  .smart-tree-experience.is-layer-story .story-text-actions button {
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-text-experience,
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment::before,
  .story-text-mist-one,
  .story-text-mist-two,
  .smart-tree-experience.is-layer-story .story-text-experience::before {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p {
    opacity: 1;
    transform: none;
  }
}
/* end 20260717ai */
/* 20260717aj: story GLB book visibility and mobile type control. */
.smart-tree-experience.is-layer-story .story-text-book-canvas {
  position: fixed;
  left: 50%;
  bottom: max(56px, 5.5vh);
  width: min(460px, 62vw);
  height: min(270px, 31vh);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,.38)) drop-shadow(0 0 26px rgba(255,190,80,.2));
  mix-blend-mode: normal;
}

.smart-tree-experience.is-layer-story .story-text-experience.has-story-book-glb .story-text-portal {
  top: auto;
  bottom: max(68px, 7vh);
  width: min(420px, 72vw);
  height: min(180px, 24vh);
  transform: translateX(-50%) rotateX(66deg);
  border: 0;
  background: radial-gradient(ellipse at center, rgba(255, 217, 133, .34), rgba(255, 190, 74, .12) 42%, transparent 72%);
  box-shadow: none;
  filter: blur(10px);
  opacity: .72;
}

.smart-tree-experience.is-layer-story .story-text-mist-one,
.smart-tree-experience.is-layer-story .story-text-mist-two {
  opacity: .78;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p {
  max-width: min(15ch, 84vw) !important;
  font-size: clamp(42px, 6.4vw, 94px) !important;
  line-height: 1.04 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  max-width: min(15ch, 84vw) !important;
}

.smart-tree-experience.is-layer-story .story-text-cover h4 {
  max-width: min(12ch, 86vw) !important;
  font-size: clamp(48px, 7.4vw, 108px) !important;
  line-height: .98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    bottom: 64px;
    width: min(280px, 78vw);
    height: 170px;
    opacity: .72;
  }

  .smart-tree-experience.is-layer-story .story-text-cover,
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    padding: 88px 26px 178px !important;
    justify-content: center !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p {
    max-width: 8.8ch !important;
    font-size: clamp(33px, 10.6vw, 49px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover h4 {
    max-width: 8.8ch !important;
    font-size: clamp(42px, 12.2vw, 58px) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover p,
  .smart-tree-experience.is-layer-story .story-text-cover small {
    max-width: 82vw !important;
    font-size: 15px !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::before {
    width: 96vmin !important;
    height: 96vmin !important;
    filter: blur(20px) !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p {
    max-width: 8.4ch !important;
    font-size: clamp(30px, 9.6vw, 42px) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    width: 236px;
    height: 142px;
    bottom: 60px;
  }
}
/* end 20260717aj */

/* 20260717ak: safe premium story text frames for small screens. */
.smart-tree-experience.is-layer-story .story-text-scroll-reader {
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
}

.smart-tree-experience.is-layer-story .story-text-cover,
.smart-tree-experience.is-layer-story .story-scroll-moment,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
  min-height: 100svh !important;
  padding: clamp(104px, 14vh, 160px) clamp(34px, 11vw, 180px) clamp(220px, 28vh, 320px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  overflow: hidden !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  position: relative !important;
  z-index: 8 !important;
  max-width: min(13.5ch, calc(100vw - 76px)) !important;
  font-size: clamp(42px, 6.1vw, 88px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  text-wrap: balance !important;
  text-shadow: 0 8px 30px rgba(36, 17, 5, .42), 0 0 20px rgba(255, 213, 135, .18) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  z-index: 2 !important;
  width: min(56vmin, 520px) !important;
  height: min(56vmin, 520px) !important;
  opacity: .55 !important;
  filter: blur(24px) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(86vmin, 760px);
  height: min(86vmin, 760px);
  pointer-events: none;
  background:
    radial-gradient(circle at 46% 46%, rgba(255, 239, 200, .28), rgba(190, 143, 74, .12) 34%, transparent 66%),
    radial-gradient(circle at 55% 58%, rgba(74, 58, 44, .18), transparent 56%);
  transform: translate(-50%, -50%);
  opacity: .52;
  filter: blur(18px);
}

.smart-tree-experience.is-layer-story .story-text-book-canvas {
  bottom: max(44px, 4.5vh) !important;
  width: min(390px, 50vw) !important;
  height: min(225px, 24vh) !important;
  opacity: .66 !important;
  z-index: 4 !important;
}

.smart-tree-experience.is-layer-story .story-text-actions {
  z-index: 22 !important;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-text-cover,
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    padding: 92px 28px 172px !important;
    justify-content: center !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 56px) !important;
    font-size: clamp(34px, 9.2vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    hyphens: manual !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover h4 {
    max-width: calc(100vw - 56px) !important;
    font-size: clamp(42px, 11.2vw, 56px) !important;
    line-height: 1.02 !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover p,
  .smart-tree-experience.is-layer-story .story-text-cover small {
    max-width: calc(100vw - 56px) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    bottom: 58px !important;
    width: min(224px, 62vw) !important;
    height: 128px !important;
    opacity: .42 !important;
  }

  .smart-tree-experience.is-layer-story .story-text-experience.has-story-book-glb .story-text-portal {
    bottom: 74px !important;
    width: 220px !important;
    height: 86px !important;
    opacity: .44 !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .story-text-cover,
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    padding: 86px 24px 162px !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 48px) !important;
    font-size: clamp(30px, 8.4vw, 37px) !important;
    line-height: 1.1 !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    width: 190px !important;
    height: 110px !important;
    bottom: 54px !important;
    opacity: .34 !important;
  }
}

@media (max-height: 670px) and (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    font-size: clamp(28px, 7.8vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    opacity: .22 !important;
    transform: translateX(-50%) scale(.78) !important;
  }
}
/* end 20260717ak */

/* 20260717al: calmer story reading pace and no visible memory chip. */
.smart-tree-experience.is-layer-story .story-scroll-moment > span {
  display: none !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  max-width: min(20ch, calc(100vw - 92px)) !important;
  font-size: clamp(36px, 4.8vw, 72px) !important;
  line-height: 1.1 !important;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 54px) !important;
    font-size: clamp(26px, 7.1vw, 34px) !important;
    line-height: 1.14 !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 46px) !important;
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.15 !important;
  }
}
/* end 20260717al */
/* 20260717am: longer readable story moments and clean book silhouette. */
.smart-tree-experience.is-layer-story .story-text-portal {
  display: none !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  max-width: min(24ch, calc(100vw - 104px)) !important;
  font-size: clamp(34px, 4.25vw, 64px) !important;
  line-height: 1.12 !important;
}

.smart-tree-experience.is-layer-story .story-text-book-canvas {
  opacity: .56 !important;
  filter: drop-shadow(0 24px 44px rgba(24, 10, 2, .4)) drop-shadow(0 0 24px rgba(255, 191, 92, .16)) !important;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 48px) !important;
    font-size: clamp(24px, 6.45vw, 30px) !important;
    line-height: 1.16 !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    opacity: .36 !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    max-width: calc(100vw - 42px) !important;
    font-size: clamp(22px, 6.05vw, 28px) !important;
    line-height: 1.18 !important;
  }
}
/* end 20260717am */
/* 20260717an: remove the old canvas glow footprint and add a light ink/milk reveal behind story text. */
.smart-tree-experience.is-layer-story .story-text-book-canvas {
  mix-blend-mode: normal !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: min(72vmin, 620px) !important;
  height: min(52vmin, 430px) !important;
  transform: translate3d(-50%, -50%, 0) scale(.78) rotate(-9deg) !important;
  border-radius: 58% 42% 52% 48% / 48% 58% 42% 52% !important;
  background:
    radial-gradient(ellipse at 42% 46%, rgba(255, 249, 224, .45), rgba(227, 181, 92, .22) 34%, rgba(114, 86, 52, .08) 52%, transparent 68%),
    radial-gradient(ellipse at 62% 58%, rgba(255, 255, 255, .18), transparent 56%) !important;
  filter: blur(26px) contrast(1.08) saturate(1.05) !important;
  opacity: .22 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(54vmin, 460px) !important;
  height: min(54vmin, 460px) !important;
  transform: translate3d(-50%, -50%, 0) scale(.8) !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 120deg, transparent, rgba(255, 210, 125, .26), transparent 28%, rgba(255, 246, 205, .18), transparent 58%, rgba(132, 92, 45, .14), transparent) !important;
  filter: blur(22px) !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before {
  animation: storyMilkBloom 1500ms cubic-bezier(.2, .78, .2, 1) both !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after {
  animation: storyGoldWash 1900ms cubic-bezier(.2, .78, .2, 1) both !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p {
  z-index: 8 !important;
  text-shadow: 0 0 26px rgba(255, 231, 180, .18), 0 5px 26px rgba(28, 10, 2, .32) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p {
  animation: storyTextRevealBreath 1150ms cubic-bezier(.18, .86, .2, 1) both !important;
}

@keyframes storyMilkBloom {
  0% { opacity: 0; transform: translate3d(-50%, -44%, 0) scale(.46) rotate(-18deg); filter: blur(42px) contrast(.88) saturate(.9); }
  58% { opacity: .46; transform: translate3d(-50%, -50%, 0) scale(1.04) rotate(-6deg); filter: blur(24px) contrast(1.1) saturate(1.08); }
  100% { opacity: .28; transform: translate3d(-50%, -50%, 0) scale(.96) rotate(-9deg); filter: blur(30px) contrast(1.02) saturate(1); }
}

@keyframes storyGoldWash {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.58) rotate(-18deg); }
  50% { opacity: .26; transform: translate3d(-50%, -50%, 0) scale(1.08) rotate(8deg); }
  100% { opacity: .09; transform: translate3d(-50%, -50%, 0) scale(.96) rotate(18deg); }
}

@keyframes storyTextRevealBreath {
  0% { opacity: .14; filter: blur(14px); transform: translate3d(0, 32px, 0) scale(.985); }
  60% { opacity: 1; filter: blur(0); transform: translate3d(0, -2px, 0) scale(1.006); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment::before {
    width: 94vmin !important;
    height: 68vmin !important;
    top: 50% !important;
    opacity: .18 !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::after {
    width: 72vmin !important;
    height: 72vmin !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-scroll-moment::before,
  .smart-tree-experience.is-layer-story .story-scroll-moment::after,
  .smart-tree-experience.is-layer-story .story-scroll-moment p {
    animation: none !important;
  }
}
/* end 20260717an */
/* 20260717ao: stronger varied cinematic story reveal effects. Visual layer only. */
.smart-tree-experience.is-layer-story .story-scroll-moment {
  isolation: isolate !important;
  overflow: visible !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before,
.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  will-change: opacity, transform, filter !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  left: var(--reveal-x, 50%) !important;
  top: var(--reveal-y, 48%) !important;
  width: var(--reveal-w, min(88vmin, 760px)) !important;
  height: var(--reveal-h, min(64vmin, 520px)) !important;
  border-radius: var(--reveal-radius, 57% 43% 48% 52% / 44% 56% 44% 56%) !important;
  background: var(--reveal-bg,
    radial-gradient(ellipse at 42% 48%, rgba(255, 253, 235, .62), rgba(231, 190, 112, .28) 30%, rgba(132, 85, 42, .12) 54%, transparent 72%),
    radial-gradient(ellipse at 65% 44%, rgba(255, 255, 255, .26), transparent 48%)
  ) !important;
  opacity: 0 !important;
  filter: blur(var(--reveal-blur, 30px)) contrast(1.18) saturate(1.16) !important;
  mix-blend-mode: screen !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  left: var(--wash-x, 50%) !important;
  top: var(--wash-y, 50%) !important;
  width: var(--wash-size, min(70vmin, 560px)) !important;
  height: var(--wash-size, min(70vmin, 560px)) !important;
  border-radius: 50% !important;
  background: var(--wash-bg,
    conic-gradient(from 110deg, transparent, rgba(255, 225, 145, .42), transparent 24%, rgba(255, 255, 230, .2), transparent 52%, rgba(255, 185, 88, .22), transparent)
  ) !important;
  opacity: 0 !important;
  filter: blur(18px) !important;
  mix-blend-mode: screen !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 1) {
  --reveal-x: 48%;
  --reveal-y: 46%;
  --reveal-radius: 60% 40% 55% 45% / 48% 60% 40% 52%;
  --reveal-bg:
    radial-gradient(ellipse at 38% 50%, rgba(255, 255, 244, .72), rgba(218, 218, 196, .22) 27%, rgba(80, 88, 78, .16) 45%, transparent 70%),
    radial-gradient(ellipse at 68% 46%, rgba(255, 227, 164, .32), transparent 54%);
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 2) {
  --reveal-x: 53%;
  --reveal-y: 50%;
  --reveal-w: min(96vmin, 820px);
  --reveal-h: min(50vmin, 440px);
  --reveal-radius: 42% 58% 45% 55% / 58% 44% 56% 42%;
  --reveal-bg:
    radial-gradient(ellipse at 54% 48%, rgba(255, 239, 199, .64), rgba(221, 154, 69, .28) 34%, rgba(83, 42, 18, .14) 58%, transparent 76%),
    linear-gradient(104deg, transparent 7%, rgba(255, 234, 180, .18), transparent 62%);
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 3) {
  --reveal-x: 45%;
  --reveal-y: 47%;
  --reveal-w: min(82vmin, 720px);
  --reveal-h: min(82vmin, 680px);
  --reveal-radius: 50% 50% 44% 56% / 46% 54% 48% 52%;
  --reveal-bg:
    radial-gradient(circle at 45% 44%, rgba(255, 255, 238, .5), rgba(170, 170, 155, .2) 28%, rgba(55, 62, 58, .24) 52%, transparent 72%),
    radial-gradient(circle at 62% 61%, rgba(255, 205, 116, .24), transparent 48%);
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n) {
  --reveal-x: 56%;
  --reveal-y: 45%;
  --reveal-w: min(94vmin, 800px);
  --reveal-h: min(58vmin, 470px);
  --reveal-radius: 66% 34% 58% 42% / 42% 58% 40% 60%;
  --reveal-bg:
    radial-gradient(ellipse at 47% 47%, rgba(255, 247, 217, .66), rgba(231, 185, 101, .27) 32%, rgba(91, 58, 27, .14) 57%, transparent 76%),
    radial-gradient(ellipse at 28% 36%, rgba(255, 255, 255, .22), transparent 46%);
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before {
  animation: storyInkMilkBloom 1780ms cubic-bezier(.16, .86, .18, 1) both !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after {
  animation: storyGoldBreath 2100ms cubic-bezier(.2, .76, .18, 1) both !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n + 2)::before {
  animation-name: storyMilkWaveLeft !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n + 3)::before {
  animation-name: storySoftInkOpen !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n)::before {
  animation-name: storyGoldenMistSweep !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  transition: opacity 780ms cubic-bezier(.2, .72, .2, 1), transform 980ms cubic-bezier(.16, .86, .18, 1), filter 880ms cubic-bezier(.2, .72, .2, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2).is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n).is-current p {
  animation: storyTextFloatReveal 1280ms cubic-bezier(.16, .92, .18, 1) both !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n + 2) p {
  animation-name: storyTextRevealFromLeft !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n + 3) p {
  animation-name: storyTextRevealFromDepth !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current:nth-child(4n) p {
  animation-name: storyTextRevealFromMist !important;
}

@keyframes storyInkMilkBloom {
  0% { opacity: 0; transform: translate3d(-50%, -42%, 0) scale(.36) rotate(-24deg); filter: blur(48px) contrast(.9) saturate(.9); }
  42% { opacity: .72; transform: translate3d(-50%, -50%, 0) scale(1.08) rotate(-7deg); filter: blur(22px) contrast(1.22) saturate(1.12); }
  100% { opacity: .34; transform: translate3d(-50%, -50%, 0) scale(.98) rotate(-11deg); filter: blur(34px) contrast(1.08) saturate(1.02); }
}

@keyframes storyMilkWaveLeft {
  0% { opacity: 0; transform: translate3d(-68%, -48%, 0) scale(.48, .72) rotate(12deg); filter: blur(44px) contrast(.92); }
  48% { opacity: .68; transform: translate3d(-50%, -50%, 0) scale(1.18, 1.02) rotate(-3deg); filter: blur(20px) contrast(1.18); }
  100% { opacity: .32; transform: translate3d(-50%, -50%, 0) scale(1, .96) rotate(4deg); filter: blur(32px) contrast(1.04); }
}

@keyframes storySoftInkOpen {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.28) rotate(26deg); filter: blur(52px) contrast(.7) grayscale(.2); }
  38% { opacity: .62; transform: translate3d(-50%, -50%, 0) scale(1.12) rotate(7deg); filter: blur(18px) contrast(1.28) grayscale(.04); }
  100% { opacity: .3; transform: translate3d(-50%, -50%, 0) scale(.98) rotate(0deg); filter: blur(34px) contrast(1.08); }
}

@keyframes storyGoldenMistSweep {
  0% { opacity: 0; transform: translate3d(-36%, -48%, 0) scale(.42, .72) rotate(-18deg); filter: blur(42px) brightness(1.08); }
  46% { opacity: .72; transform: translate3d(-50%, -50%, 0) scale(1.12, 1) rotate(-4deg); filter: blur(20px) brightness(1.2); }
  100% { opacity: .32; transform: translate3d(-50%, -50%, 0) scale(1, .96) rotate(-10deg); filter: blur(32px) brightness(1.04); }
}

@keyframes storyGoldBreath {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.5) rotate(-28deg); }
  42% { opacity: .38; transform: translate3d(-50%, -50%, 0) scale(1.1) rotate(8deg); }
  100% { opacity: .12; transform: translate3d(-50%, -50%, 0) scale(.98) rotate(24deg); }
}

@keyframes storyTextFloatReveal {
  0% { opacity: 0; filter: blur(18px); transform: translate3d(0, 42px, 0) scale(.975); }
  58% { opacity: 1; filter: blur(0); transform: translate3d(0, -4px, 0) scale(1.008); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes storyTextRevealFromLeft {
  0% { opacity: 0; filter: blur(18px); transform: translate3d(-34px, 18px, 0) scale(.985); }
  62% { opacity: 1; filter: blur(0); transform: translate3d(3px, -2px, 0) scale(1.006); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes storyTextRevealFromDepth {
  0% { opacity: 0; filter: blur(22px); transform: translate3d(0, 8px, 0) scale(.88); }
  60% { opacity: 1; filter: blur(0); transform: translate3d(0, -2px, 0) scale(1.012); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes storyTextRevealFromMist {
  0% { opacity: 0; filter: blur(26px); transform: translate3d(24px, 30px, 0) scale(.98); }
  58% { opacity: 1; filter: blur(0); transform: translate3d(-2px, -3px, 0) scale(1.006); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment::before {
    width: 108vmin !important;
    height: 78vmin !important;
    opacity: 0 !important;
    filter: blur(24px) contrast(1.14) saturate(1.1) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::after {
    width: 84vmin !important;
    height: 84vmin !important;
    filter: blur(18px) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before {
    animation-duration: 1600ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current p {
    animation: none !important;
  }
}
/* end 20260717ao */

/* 20260717ap: scroll-reactive premium motion system for story text. Visual layer only. */
.smart-tree-experience.is-layer-story .story-text-experience {
  --reader-glow: 0;
}

.smart-tree-experience.is-layer-story .story-text-experience::before {
  opacity: calc(.18 + var(--reader-glow, 0) * .24) !important;
  filter: blur(calc(24px - var(--reader-glow, 0) * 8px)) saturate(calc(1 + var(--reader-glow, 0) * .12)) !important;
  transition: opacity 1400ms cubic-bezier(.16, .88, .18, 1), filter 1400ms cubic-bezier(.16, .88, .18, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment {
  --story-motion: 0;
  --story-away: 1;
  --story-depth-x: 0px;
  --story-depth-y: 64px;
  --story-scale: .92;
  --story-glow-scale: .64;
  --story-glow-x: -50%;
  --story-glow-y: -50%;
  --story-glow-rotate: 0deg;
    --story-wash-rotate: 0deg;
  --story-text-opacity: .16;
  --story-glow-opacity: .04;
  --story-wash-opacity: 0;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  opacity: var(--story-glow-opacity) !important;
  transform:
    translate3d(var(--story-glow-x), var(--story-glow-y), 0)
    scale(var(--story-glow-scale))
    rotate(var(--story-glow-rotate)) !important;
  filter: blur(calc(18px + var(--story-away) * 26px)) contrast(calc(1.04 + var(--story-motion) * .18)) saturate(calc(1 + var(--story-motion) * .18)) !important;
  transition:
    opacity 1500ms cubic-bezier(.12, .88, .18, 1),
    transform 1800ms cubic-bezier(.12, .88, .18, 1),
    filter 1600ms cubic-bezier(.12, .88, .18, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  opacity: var(--story-wash-opacity) !important;
  transform:
    translate3d(calc(-50% + var(--story-depth-x) * -.34), calc(-50% + var(--story-depth-y) * -.26), 0)
    scale(calc(.74 + var(--story-motion) * .38))
    rotate(calc(var(--story-glow-rotate) * -1)) !important;
  filter: blur(calc(16px + var(--story-away) * 16px)) !important;
  transition:
    opacity 1700ms cubic-bezier(.14, .84, .18, 1),
    transform 1900ms cubic-bezier(.14, .84, .18, 1),
    filter 1700ms cubic-bezier(.14, .84, .18, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  opacity: var(--story-text-opacity) !important;
  transform:
    translate3d(var(--story-depth-x), var(--story-depth-y), 0)
    scale(var(--story-scale)) !important;
  filter: blur(var(--story-blur)) saturate(calc(.82 + var(--story-motion) * .24)) brightness(calc(.88 + var(--story-motion) * .14)) !important;
  text-shadow:
    0 0 calc(8px + var(--story-motion) * 24px) rgba(255, 236, 190, calc(.12 + var(--story-motion) * .18)),
    0 14px 36px rgba(39, 14, 4, calc(.38 + var(--story-motion) * .22)) !important;
  transition:
    opacity 1350ms cubic-bezier(.12, .88, .18, 1),
    transform 1700ms cubic-bezier(.12, .88, .18, 1),
    filter 1450ms cubic-bezier(.12, .88, .18, 1),
    text-shadow 1450ms cubic-bezier(.12, .88, .18, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 1)::before {
  background:
    radial-gradient(ellipse at 42% 48%, rgba(255, 252, 232, .7), rgba(218, 216, 196, .28) 28%, rgba(72, 82, 76, .22) 48%, transparent 72%),
    radial-gradient(ellipse at 68% 42%, rgba(255, 224, 150, .32), transparent 54%) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 2)::before {
  background:
    linear-gradient(104deg, transparent 4%, rgba(255, 240, 191, .34), transparent 60%),
    radial-gradient(ellipse at 55% 50%, rgba(255, 238, 195, .66), rgba(224, 154, 70, .25) 36%, rgba(73, 38, 20, .16) 60%, transparent 78%) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n + 3)::before {
  background:
    radial-gradient(circle at 48% 46%, rgba(255, 255, 239, .54), rgba(160, 166, 150, .25) 30%, rgba(46, 58, 52, .24) 52%, transparent 74%),
    radial-gradient(circle at 66% 64%, rgba(255, 202, 112, .24), transparent 50%) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(4n)::before {
  background:
    radial-gradient(ellipse at 46% 47%, rgba(255, 246, 214, .68), rgba(230, 181, 92, .3) 34%, rgba(91, 58, 27, .16) 58%, transparent 78%),
    radial-gradient(ellipse at 28% 36%, rgba(255, 255, 255, .24), transparent 48%) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2).is-current p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n).is-current p {
  animation: none !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before,
.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after {
  animation: none !important;
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment::before {
    width: 116vmin !important;
    height: 86vmin !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::after {
    width: 88vmin !important;
    height: 88vmin !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    transition-duration: 1550ms, 1900ms, 1650ms, 1650ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-scroll-moment::before,
  .smart-tree-experience.is-layer-story .story-scroll-moment::after,
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* end 20260717ap */
/* 20260717ar: premium ink/mist scroll reveal layer */
.story-text-experience .story-scroll-moment {
  --story-ink-scale: 1;
  --story-ink-opacity: 0;
  --story-sweep-x: 50%;
  --story-spark-x: 50%;
  --story-spark-y: 50%;
  --story-spark-opacity: 0;
  --story-shadow-blur: 14px;
  --story-ink-blur: 24px;
  isolation: isolate !important;
  overflow: visible !important;
}

.story-text-experience .story-scroll-moment::before,
.story-text-experience .story-scroll-moment::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform, filter;
}

.story-text-experience .story-scroll-moment::before {
  inset: -16% -12%;
  background:
    radial-gradient(ellipse at var(--story-spark-x) var(--story-spark-y), rgba(255, 252, 232, .78) 0 2%, rgba(255, 213, 134, .34) 6%, transparent 24%),
    radial-gradient(ellipse at 48% 54%, rgba(255, 245, 218, .34) 0 18%, rgba(207, 146, 72, .20) 35%, transparent 66%),
    conic-gradient(from var(--story-glow-rotate), transparent 0 12%, rgba(255, 232, 165, .32) 17%, transparent 28%, rgba(82, 48, 28, .18) 43%, rgba(255, 238, 190, .22) 57%, transparent 78%);
  border-radius: 47% 53% 45% 55% / 58% 42% 54% 46%;
  filter: blur(var(--story-ink-blur)) saturate(1.18);
  opacity: var(--story-ink-opacity);
  transform: translate3d(var(--story-depth-x), var(--story-depth-y), 0) scale(var(--story-ink-scale)) rotate(var(--story-glow-rotate));
  mix-blend-mode: screen;
}

.story-text-experience .story-scroll-moment::after {
  left: 50%;
  top: 50%;
  width: min(78vw, 620px);
  height: min(42vh, 360px);
  background:
    linear-gradient(108deg, transparent 0 32%, rgba(255, 251, 230, .52) 42%, rgba(255, 210, 115, .25) 49%, transparent 62%),
    radial-gradient(ellipse at var(--story-sweep-x) 50%, rgba(255, 239, 190, .42) 0 9%, rgba(255, 239, 190, .18) 25%, transparent 57%),
    radial-gradient(circle at 22% 70%, rgba(255, 198, 97, .20), transparent 32%);
  border-radius: 999px;
  filter: blur(22px) saturate(1.12);
  opacity: var(--story-wash-opacity);
  transform: translate3d(-50%, -50%, 0) rotate(var(--story-wash-rotate)) scale(var(--story-ink-scale));
  mix-blend-mode: screen;
}

.story-text-experience .story-scroll-moment p {
  position: relative;
  z-index: 2;
  transition:
    opacity 1550ms cubic-bezier(.16, 1, .22, 1),
    transform 1750ms cubic-bezier(.16, 1, .22, 1),
    filter 1650ms cubic-bezier(.16, 1, .22, 1),
    text-shadow 1650ms cubic-bezier(.16, 1, .22, 1) !important;
  text-shadow:
    0 0 var(--story-shadow-blur) rgba(255, 223, 155, .34),
    0 18px 52px rgba(31, 15, 8, .40);
}

.story-text-experience .story-scroll-moment:nth-child(4n + 1)::before {
  border-radius: 62% 38% 56% 44% / 44% 60% 40% 56%;
}

.story-text-experience .story-scroll-moment:nth-child(4n + 2)::before {
  background:
    radial-gradient(ellipse at var(--story-spark-x) var(--story-spark-y), rgba(255, 255, 248, .70) 0 2%, rgba(255, 228, 163, .30) 8%, transparent 27%),
    radial-gradient(ellipse at 58% 45%, rgba(238, 222, 188, .30) 0 20%, rgba(120, 96, 72, .22) 42%, transparent 68%),
    conic-gradient(from var(--story-glow-rotate), transparent 0 16%, rgba(255, 245, 205, .30) 23%, transparent 37%, rgba(70, 43, 31, .20) 58%, transparent 80%);
}

.story-text-experience .story-scroll-moment:nth-child(4n + 3)::before {
  border-radius: 48% 52% 66% 34% / 58% 42% 56% 44%;
  mix-blend-mode: lighten;
}

.story-text-experience .story-scroll-moment:nth-child(4n + 4)::after {
  background:
    linear-gradient(76deg, transparent 0 30%, rgba(255, 236, 180, .45) 45%, rgba(255, 255, 242, .38) 50%, transparent 66%),
    radial-gradient(ellipse at var(--story-sweep-x) 42%, rgba(255, 214, 132, .34) 0 12%, transparent 54%);
}

.story-text-experience .story-scroll-moment.is-active p {
  letter-spacing: -.01em;
}

.story-text-experience .story-scroll-moment:not(.is-active) p {
  text-shadow: 0 12px 36px rgba(31, 15, 8, .26);
}

@media (prefers-reduced-motion: reduce) {
  .story-text-experience .story-scroll-moment::before,
  .story-text-experience .story-scroll-moment::after {
    opacity: .08 !important;
    transform: none !important;
    filter: blur(18px) !important;
  }

  .story-text-experience .story-scroll-moment p {
    transition: none !important;
    filter: none !important;
  }
}

@media (max-width: 760px) {
  .story-text-experience .story-scroll-moment::before {
    inset: -8% -24%;
    filter: blur(calc(var(--story-ink-blur) + 4px));
  }

  .story-text-experience .story-scroll-moment::after {
    width: 112vw;
    height: 34vh;
    filter: blur(18px);
  }
}
/* 20260717as: visible cinematic scroll reveal enhancement */
.story-text-experience .story-scroll-reader {
  background:
    radial-gradient(circle at 54% 42%, rgba(255, 219, 138, .18), transparent 34%),
    radial-gradient(circle at 28% 68%, rgba(255, 178, 82, .10), transparent 30%),
    linear-gradient(120deg, rgba(55, 24, 12, .08), rgba(255, 206, 128, .10), rgba(33, 14, 8, .08));
}

.story-text-experience .story-scroll-moment {
  --story-ripple-opacity: 0;
  --story-reveal-lift: 0px;
  --story-text-warmth: 1;
  position: relative !important;
  min-height: 112vh !important;
}

.story-text-experience .story-scroll-moment::before {
  inset: 18% -10% auto -10% !important;
  height: min(48vh, 460px) !important;
  border-radius: 50% 42% 48% 55% / 58% 44% 56% 43% !important;
  background:
    radial-gradient(ellipse at var(--story-spark-x) var(--story-spark-y), rgba(255,255,242,.95) 0 2%, rgba(255,222,147,.58) 7%, transparent 26%),
    radial-gradient(ellipse at 50% 54%, rgba(255,244,217,.52) 0 18%, rgba(226,154,74,.32) 39%, transparent 70%),
    conic-gradient(from var(--story-glow-rotate), rgba(255,249,226,.00), rgba(255,230,154,.42), rgba(131,70,35,.08), rgba(255,243,206,.32), transparent 78%);
  opacity: calc(var(--story-ink-opacity) + .07) !important;
  filter: blur(var(--story-ink-blur)) saturate(1.35) brightness(1.12) !important;
  transform: translate3d(var(--story-depth-x), calc(var(--story-depth-y) + var(--story-reveal-lift)), 0) scale(var(--story-ink-scale)) rotate(var(--story-glow-rotate)) !important;
  mix-blend-mode: screen !important;
}

.story-text-experience .story-scroll-moment::after {
  width: min(94vw, 760px) !important;
  height: min(38vh, 360px) !important;
  background:
    linear-gradient(102deg, transparent 0 24%, rgba(255,255,238,.00) 30%, rgba(255,249,223,.68) 43%, rgba(255,202,102,.33) 52%, transparent 68%),
    repeating-radial-gradient(ellipse at var(--story-sweep-x) 48%, rgba(255,236,185,.22) 0 1px, transparent 2px 13px),
    radial-gradient(ellipse at var(--story-sweep-x) 48%, rgba(255,213,124,.52), transparent 58%);
  opacity: calc(var(--story-wash-opacity) + var(--story-ripple-opacity)) !important;
  filter: blur(16px) saturate(1.18) !important;
  transform: translate3d(-50%, -50%, 0) rotate(var(--story-wash-rotate)) scale(var(--story-ink-scale)) !important;
  mix-blend-mode: screen !important;
}

.story-text-experience .story-scroll-moment p {
  color: rgba(255, 250, 234, .98) !important;
  transform: translate3d(var(--story-depth-x), calc(var(--story-depth-y) + var(--story-reveal-lift)), 0) scale(var(--story-scale)) !important;
  filter: blur(var(--story-blur)) drop-shadow(0 0 var(--story-shadow-blur) rgba(255, 218, 138, .42)) !important;
  text-shadow:
    0 0 var(--story-shadow-blur) rgba(255, 228, 164, .42),
    0 3px 18px rgba(255, 186, 76, .24),
    0 20px 60px rgba(21, 8, 3, .46) !important;
}

.story-text-experience .story-scroll-moment.is-active p {
  opacity: 1 !important;
}

.story-text-experience .story-scroll-moment:nth-child(3n + 1) p {
  transform-origin: 20% 55% !important;
}

.story-text-experience .story-scroll-moment:nth-child(3n + 2) p {
  transform-origin: 80% 48% !important;
}

.story-text-experience .story-scroll-moment:nth-child(3n) p {
  transform-origin: 50% 48% !important;
}

.story-text-experience .story-scroll-moment:nth-child(4n + 1)::after {
  border-radius: 68% 32% 56% 44% / 42% 62% 38% 58% !important;
}

.story-text-experience .story-scroll-moment:nth-child(4n + 2)::after {
  border-radius: 36% 64% 40% 60% / 60% 42% 58% 40% !important;
}

.story-text-experience .story-scroll-moment:nth-child(4n + 3)::before {
  height: min(56vh, 520px) !important;
}

.story-text-experience .story-scroll-moment:nth-child(4n)::before {
  background:
    radial-gradient(ellipse at var(--story-spark-x) var(--story-spark-y), rgba(255,255,242,.86) 0 2%, rgba(255,219,145,.48) 8%, transparent 28%),
    radial-gradient(ellipse at 46% 56%, rgba(245,233,205,.44) 0 18%, rgba(128,93,64,.30) 42%, transparent 72%),
    conic-gradient(from var(--story-glow-rotate), transparent, rgba(255,238,183,.40), transparent 36%, rgba(255,205,110,.24), transparent 75%) !important;
}

@media (max-width: 760px) {
  .story-text-experience .story-scroll-moment {
    min-height: 118vh !important;
  }

  .story-text-experience .story-scroll-moment::before {
    inset: 18% -30% auto -30% !important;
    height: 44vh !important;
    filter: blur(22px) saturate(1.28) brightness(1.08) !important;
  }

  .story-text-experience .story-scroll-moment::after {
    width: 122vw !important;
    height: 34vh !important;
    filter: blur(13px) saturate(1.14) !important;
  }
}
/* 20260717at: one contextual Back button */
.smart-tree-experience .memory-stage-actions,
.smart-tree-experience .story-text-actions {
  display: none !important;
}

.smart-tree-experience.is-layer-open .smart-tree-return {
  z-index: 80;
}

/* 20260717au: immersive Gallery + Video memory room. */
.smart-tree-experience.is-layer-gallery .memory-function-stage {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1120px, calc(100vw - 44px)) !important;
  max-height: min(84svh, 780px) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  overflow: auto !important;
  padding: clamp(22px, 3vw, 42px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 214, 139, .42) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 220, 148, .18), transparent 34%),
    linear-gradient(135deg, rgba(35, 20, 11, .84), rgba(114, 72, 34, .54) 48%, rgba(31, 18, 12, .9)) !important;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(24px) saturate(1.12) !important;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage::before {
  opacity: .22 !important;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage > span,
.smart-tree-experience.is-layer-gallery .memory-function-stage > h3,
.smart-tree-experience.is-layer-gallery .memory-function-stage > p {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.memory-gallery-world {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr);
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(18px, 3vw, 30px);
  min-height: 360px;
  perspective: 1100px;
}

.memory-gallery-world::before {
  content: "";
  position: absolute;
  inset: -32px -24px;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 218, 132, .2), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 183, 72, .14), transparent 30%);
  filter: blur(8px);
  opacity: .9;
}

.memory-gallery-world span,
.memory-gallery-world small {
  background: transparent;
  border: 0;
  color: inherit;
  display: initial;
  letter-spacing: normal;
  padding: 0;
  text-transform: none;
}

.memory-gallery-ambient {
  position: absolute;
  inset: 8% 12%;
  pointer-events: none;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, rgba(255, 219, 139, .12) 0 1px, transparent 1px 18px),
    radial-gradient(circle, rgba(255, 207, 105, .12), transparent 66%);
  transform: rotateX(68deg) translateY(56px);
  opacity: .72;
}

.memory-gallery-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  align-content: center;
  gap: clamp(14px, 2vw, 22px);
  min-height: 360px;
}

.memory-gallery-frame {
  position: relative;
  min-height: 178px;
  padding: 10px 10px 44px;
  border-radius: 18px;
  border: 1px solid rgba(255, 218, 145, .56);
  background: linear-gradient(145deg, rgba(255, 238, 195, .18), rgba(70, 42, 22, .42));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
  cursor: zoom-in;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: memoryGalleryFloat 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.48s);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease, border-color .55s ease;
}

.memory-gallery-frame:nth-child(6n+1) { transform: translateY(-8px) rotateX(3deg) rotateY(-8deg); }
.memory-gallery-frame:nth-child(6n+2) { transform: translateY(14px) rotateX(1deg) rotateY(7deg); }
.memory-gallery-frame:nth-child(6n+3) { transform: translateY(-2px) rotateX(4deg) rotateY(4deg); }
.memory-gallery-frame:nth-child(6n+4) { transform: translateY(18px) rotateX(0deg) rotateY(-6deg); }
.memory-gallery-frame:nth-child(6n+5) { transform: translateY(-14px) rotateX(5deg) rotateY(8deg); }
.memory-gallery-frame:nth-child(6n) { transform: translateY(6px) rotateX(2deg) rotateY(-3deg); }

.memory-gallery-frame:hover,
.memory-gallery-frame:focus-visible {
  transform: translateY(-16px) rotateX(0) rotateY(0) scale(1.035) !important;
  border-color: rgba(255, 231, 168, .95);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34), 0 0 34px rgba(238, 177, 65, .24);
  outline: none;
}

.memory-gallery-frame-glow {
  position: absolute;
  inset: -26%;
  display: block !important;
  background: radial-gradient(circle at 50% 35%, rgba(255, 224, 143, .28), transparent 46%);
  opacity: .7;
  pointer-events: none;
}

.memory-gallery-frame img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 236, 183, .42);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .26);
}

.memory-gallery-frame small {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: block;
  color: rgba(255, 239, 206, .92);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.memory-gallery-empty-card {
  display: grid;
  place-content: center;
  min-height: 260px;
  padding: 28px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 220, 150, .48);
  background: rgba(255, 240, 207, .09);
  color: rgba(255, 240, 210, .9);
  text-align: center;
}

.memory-gallery-empty-card strong,
.memory-gallery-empty-card span {
  display: block;
}

.memory-gallery-cinema {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: 24px;
  border: 1px solid rgba(255, 221, 150, .5);
  background:
    linear-gradient(180deg, rgba(255, 229, 177, .12), rgba(31, 18, 11, .46)),
    radial-gradient(circle at 50% 20%, rgba(255, 213, 126, .22), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 48px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.memory-gallery-cinema::before {
  content: "";
  position: absolute;
  inset: 10% -10%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 156, .22), transparent);
  transform: rotate(-12deg);
  animation: memoryCinemaSweep 7.5s ease-in-out infinite;
}

.memory-gallery-cinema-label {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255, 240, 209, .96);
}

.memory-gallery-cinema-label b {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.memory-gallery-cinema-label span {
  font-size: .9rem;
  opacity: .78;
}

.memory-gallery-cinema-screen {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 171, .58);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 214, 124, .2), transparent 38%),
    linear-gradient(135deg, rgba(23, 14, 9, .92), rgba(71, 43, 20, .72));
  box-shadow: 0 20px 45px rgba(0, 0, 0, .3), inset 0 0 26px rgba(255, 207, 111, .12);
}

.memory-gallery-cinema-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.memory-gallery-cinema-empty {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 26px;
  color: rgba(255, 239, 208, .92);
  text-align: center;
}

.memory-gallery-cinema-empty b,
.memory-gallery-cinema-empty span {
  display: block;
}

@keyframes memoryGalleryFloat {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes memoryCinemaSweep {
  0%, 100% { opacity: .08; transform: translateX(-20%) rotate(-12deg); }
  50% { opacity: .38; transform: translateX(18%) rotate(-12deg); }
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-gallery .memory-function-stage {
    inset: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
    padding: max(58px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
  }

  .smart-tree-experience.is-layer-gallery .memory-function-stage > h3 {
    font-size: clamp(2.2rem, 12vw, 4.1rem) !important;
    line-height: .9 !important;
  }

  .memory-gallery-world {
    display: block;
    min-height: 0;
  }

  .memory-gallery-ambient {
    inset: 22% -36%;
    opacity: .42;
  }

  .memory-gallery-rail {
    display: flex;
    gap: 14px;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 18px 4px 24px;
    margin-inline: -2px;
    -webkit-overflow-scrolling: touch;
  }

  .memory-gallery-frame,
  .memory-gallery-frame:nth-child(n) {
    flex: 0 0 min(76vw, 330px);
    min-height: 236px;
    transform: none !important;
    scroll-snap-align: center;
  }

  .memory-gallery-frame img {
    height: 176px;
  }

  .memory-gallery-cinema {
    margin-top: 8px;
    border-radius: 20px;
  }

  .memory-gallery-cinema-label {
    display: block;
  }

  .memory-gallery-cinema-label span {
    display: block;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-gallery-frame,
  .memory-gallery-cinema::before {
    animation: none !important;
    transition: none !important;
  }
}

/* 20260717av: keep Gallery visible and recover cleanly from partial layer states. */
.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open,
.smart-tree-experience[data-active-memory-layer="gallery"] .memory-function-stage.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* 20260717ax: fullscreen gallery photos + responsive memory video modal. */
.story-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 34px);
  background: radial-gradient(circle at 50% 20%, rgba(215, 169, 83, 0.24), transparent 36%), rgba(5, 3, 2, 0.88);
  backdrop-filter: blur(16px);
}

.story-video-lightbox.is-open {
  display: flex;
}

.video-lightbox-shell {
  width: min(1120px, 94vw);
  aspect-ratio: 16 / 9;
  max-height: 82svh;
  border: 1px solid rgba(245, 204, 130, 0.55);
  border-radius: 18px;
  overflow: hidden;
  background: #070402;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55), 0 0 50px rgba(220, 164, 65, 0.22);
}

.video-lightbox-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-lightbox-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245, 204, 130, 0.55);
  background: rgba(22, 13, 7, 0.74);
  color: #fff4d8;
  font-weight: 800;
  cursor: pointer;
}

body.video-lightbox-open {
  overflow: hidden;
}

.memory-gallery-video-launch {
  position: relative;
  cursor: pointer;
  color: #fff4d8;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.memory-gallery-video-launch span {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.memory-gallery-video-launch small {
  position: relative;
  z-index: 1;
  color: rgba(255, 244, 216, 0.78);
  font-weight: 700;
}

.memory-gallery-video-launch::after {
  content: '';
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(255, 220, 147, 0.72);
  background: radial-gradient(circle, rgba(239, 178, 57, 0.28), transparent 62%);
  box-shadow: 0 0 32px rgba(239, 178, 57, 0.25);
  position: absolute;
}

@media (max-width: 720px) {
  .story-video-lightbox {
    padding: 10px;
  }

  .video-lightbox-shell {
    width: 96vw;
    max-height: 72svh;
    border-radius: 14px;
  }
}
/* 20260717ay: keep mobile gallery gestures inside the gallery stage. */
.smart-tree-experience.is-layer-gallery,
.smart-tree-experience.is-layer-gallery .memory-function-stage,
.smart-tree-experience.is-layer-gallery .memory-stage-body,
.smart-tree-experience.is-layer-gallery .memory-stage-content,
.memory-gallery-world,
.memory-gallery-cinema {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: contain;
}

@supports not (overflow: clip) {
  .smart-tree-experience.is-layer-gallery,
  .smart-tree-experience.is-layer-gallery .memory-function-stage,
  .smart-tree-experience.is-layer-gallery .memory-stage-body,
  .smart-tree-experience.is-layer-gallery .memory-stage-content,
  .memory-gallery-world,
  .memory-gallery-cinema {
    overflow-x: hidden;
  }
}

.smart-tree-experience.is-layer-gallery .memory-gallery-world {
  touch-action: pan-y;
  contain: layout paint;
}

.smart-tree-experience.is-layer-gallery .memory-gallery-rail {
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.smart-tree-experience.is-layer-gallery .memory-gallery-rail::-webkit-scrollbar {
  display: none;
}

.smart-tree-experience.is-layer-gallery .memory-gallery-frame,
.smart-tree-experience.is-layer-gallery .memory-gallery-video-launch {
  touch-action: manipulation;
  -webkit-user-drag: none;
  user-select: none;
}

.smart-tree-experience.is-layer-gallery .memory-gallery-frame img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-gallery .memory-gallery-rail {
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }

  .smart-tree-experience.is-layer-gallery .memory-gallery-frame,
  .smart-tree-experience.is-layer-gallery .memory-gallery-frame:nth-child(n) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
/* 20260717az: premium Secret Message ritual, readable on 360px screens. */
.memory-secret-ritual {
  position: relative;
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
  isolation: isolate;
  margin-top: 12px;
}

.memory-secret-ritual::before,
.memory-secret-ritual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.memory-secret-ritual::before {
  inset: -18px -16px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 28% 8%, rgba(255, 224, 147, 0.22), transparent 32%),
    radial-gradient(circle at 86% 22%, rgba(255, 113, 82, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 238, 197, 0.08), rgba(62, 25, 18, 0.12));
  filter: blur(0.1px);
}

.memory-secret-ritual::after {
  width: 170px;
  height: 170px;
  right: -38px;
  top: -72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 116, 0.2), transparent 62%);
  animation: memorySecretGlow 5.8s ease-in-out infinite;
}

.memory-secret-sigil {
  width: clamp(76px, 18vw, 116px);
  aspect-ratio: 1;
  margin: 0 auto -2px;
  position: relative;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 229, 162, 0.2), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(94, 42, 25, 0.38), transparent 68%);
  box-shadow: 0 0 34px rgba(237, 173, 68, 0.22), inset 0 0 32px rgba(255, 224, 158, 0.08);
}

.memory-secret-sigil i {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 226, 154, 0.56);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 198, 83, 0.16);
  animation: memorySecretOrbit 9s linear infinite;
}

.memory-secret-sigil i:nth-child(2) {
  inset: 26%;
  transform: rotate(62deg);
  animation-duration: 7s;
  animation-direction: reverse;
}

.memory-secret-sigil i:nth-child(3) {
  inset: 39% 18%;
  border-radius: 999px;
  transform: rotate(-16deg);
  animation-duration: 5.6s;
}

.memory-secret-sigil-open {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 241, 190, 0.34), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(152, 48, 38, 0.25), transparent 70%);
}

.memory-secret-copy,
.memory-secret-letter,
.memory-secret-countdown {
  position: relative;
  z-index: 1;
}

.memory-secret-copy {
  padding: clamp(13px, 2.2vw, 18px);
  border: 1px solid rgba(255, 229, 165, 0.28);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 242, 214, 0.12), rgba(56, 27, 18, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.memory-secret-copy b {
  display: block;
  color: #fff1c5;
  font-size: clamp(15px, 2.4vw, 20px);
  line-height: 1.1;
  margin-bottom: 6px;
}

.memory-secret-copy p,
.memory-secret-unlock,
.memory-secret-letter p {
  color: rgba(255, 245, 222, 0.88);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.memory-secret-unlock {
  margin: -2px 0 0;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 800;
  letter-spacing: 0;
}

.memory-secret-countdown {
  gap: clamp(7px, 1.8vw, 12px) !important;
  margin: 2px 0 4px !important;
}

.memory-secret-countdown > div {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 232, 174, 0.14), rgba(51, 25, 17, 0.22));
  box-shadow: 0 0 26px rgba(228, 161, 54, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.memory-secret-countdown > div::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -80%;
  width: 70%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 188, 0.22), transparent);
  animation: memorySecretSweep 4.8s ease-in-out infinite;
}

.memory-secret-countdown b,
.memory-secret-countdown small {
  position: relative;
  border: 0 !important;
  background: transparent !important;
}

.memory-secret-letter {
  max-height: clamp(130px, 26vh, 260px);
  overflow: auto;
  padding: clamp(14px, 3vw, 24px) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 217, 0.17), rgba(88, 38, 24, 0.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.18);
}

.memory-secret-letter p {
  font-size: clamp(14px, 2.45vw, 17px);
  line-height: 1.58;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@keyframes memorySecretGlow {
  0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0) scale(0.94); }
  50% { opacity: 0.78; transform: translate3d(-8px, 8px, 0) scale(1.08); }
}

@keyframes memorySecretOrbit {
  to { transform: rotate(360deg); }
}

@keyframes memorySecretSweep {
  0%, 24% { transform: translateX(0) rotate(18deg); opacity: 0; }
  44% { opacity: 1; }
  72%, 100% { transform: translateX(330%) rotate(18deg); opacity: 0; }
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage {
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(100% - 18px, 420px) !important;
    max-height: min(58svh, 510px) !important;
    transform: translateX(-50%) !important;
    padding: clamp(15px, 4vw, 20px) !important;
    border-radius: 24px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > span {
    font-size: 10px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
    line-height: .98 !important;
    margin-bottom: 8px !important;
  }

  .memory-secret-ritual {
    gap: 9px;
    margin-top: 8px;
  }

  .memory-secret-sigil {
    width: 66px;
    margin-bottom: -4px;
  }

  .memory-secret-copy {
    padding: 11px 12px;
    border-radius: 16px;
  }

  .memory-secret-copy b {
    font-size: 14px;
  }

  .memory-secret-copy p {
    font-size: 12.5px;
    line-height: 1.38;
  }

  .memory-secret-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .memory-secret-countdown b {
    padding: 8px 5px !important;
    font-size: clamp(20px, 7vw, 29px) !important;
  }

  .memory-secret-countdown small {
    padding: 5px 4px !important;
    font-size: 10px !important;
  }

  .memory-secret-letter {
    max-height: 20svh;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .memory-secret-letter p {
    font-size: 13px;
    line-height: 1.44;
  }

  .memory-secret-unlock {
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage {
    width: calc(100vw - 14px) !important;
    max-height: 60svh !important;
    padding: 13px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
    font-size: clamp(22px, 6.6vw, 28px) !important;
  }

  .memory-secret-sigil {
    display: none;
  }

  .memory-secret-letter {
    max-height: 22svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-secret-ritual::after,
  .memory-secret-sigil i,
  .memory-secret-countdown > div::before {
    animation: none !important;
  }
}

/* 20260717ba: Secret Message stays readable on 360px screens. */
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
.smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: min(680px, calc(100vw - 24px)) !important;
  max-height: min(76svh, 640px) !important;
  overflow: hidden !important;
  padding: clamp(16px, 3.4vw, 28px) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
  flex: 0 0 auto !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-copy {
  flex: 0 0 auto !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 96px !important;
  max-height: min(34svh, 280px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

@media (max-width: 420px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
  .smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
    width: calc(100vw - 18px) !important;
    max-height: calc(100svh - 108px) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding: 14px !important;
    border-radius: 22px 22px 10px 10px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.02 !important;
    margin: 6px 0 6px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
    gap: 8px !important;
    margin-top: 6px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy {
    padding: 10px 12px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy p {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 120px !important;
    max-height: 34svh !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
    font-size: 13.5px !important;
    line-height: 1.46 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-stage-footer {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 380px) {
  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 128px !important;
    max-height: 36svh !important;
  }
}
/* 20260717bb: cleaner premium Secret Message capsule and safer small-screen message area. */
.smart-tree-experience.is-layer-time_capsule .memory-secret-sigil-open,
.smart-tree-experience.is-layer-time_capsule .memory-secret-sigil {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 236, 177, 0.22), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 188, 92, 0.12), transparent 72%) !important;
  box-shadow: 0 0 38px rgba(247, 185, 82, 0.18), inset 0 0 34px rgba(255, 225, 160, 0.07) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
  background:
    linear-gradient(145deg, rgba(255, 238, 202, 0.18), rgba(92, 43, 24, 0.2)),
    radial-gradient(circle at 18% 8%, rgba(255, 215, 139, 0.15), transparent 38%) !important;
  border-color: rgba(255, 226, 158, 0.28) !important;
}

@media (max-width: 420px) {
  .smart-tree-experience.is-layer-time_capsule .memory-secret-sigil {
    display: none !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
  .smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
    max-height: calc(100svh - 86px) !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 150px !important;
    max-height: 42svh !important;
  }
}
/* 20260717bd: Secret Message as premium text-first scene, readable down to 360px. */
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
.smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: clamp(10px, 2.2vw, 16px) !important;
  width: min(690px, calc(100vw - 28px)) !important;
  max-height: min(78svh, 660px) !important;
  overflow: hidden !important;
  padding: clamp(18px, 3vw, 30px) !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 211, 126, .18), transparent 34%),
    linear-gradient(145deg, rgba(31, 21, 15, .82), rgba(92, 55, 29, .55)) !important;
  box-shadow:
    0 20px 70px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 236, 188, .24),
    inset 0 -1px 0 rgba(255, 207, 111, .16) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-sigil,
.smart-tree-experience.is-layer-time_capsule .memory-secret-sigil-open {
  display: none !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(150px, 1fr) !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-locked {
  grid-template-rows: auto auto auto !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-copy {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  background: rgba(255, 234, 194, .08) !important;
  border: 1px solid rgba(255, 226, 164, .26) !important;
  box-shadow: inset 0 0 28px rgba(255, 200, 118, .05) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-copy b {
  color: #fff4d6 !important;
  font-size: clamp(14px, 2.5vw, 17px) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-copy p {
  color: rgba(255, 249, 234, .92) !important;
  font-size: clamp(12.5px, 2.4vw, 15px) !important;
  line-height: 1.48 !important;
  margin: 3px 0 0 !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  min-height: 160px !important;
  max-height: min(42svh, 330px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: clamp(14px, 3vw, 22px) !important;
  border-radius: 20px !important;
  color: #fff7df !important;
  background:
    linear-gradient(180deg, rgba(255, 239, 203, .11), rgba(60, 31, 18, .28)),
    radial-gradient(circle at 18% 0%, rgba(255, 213, 140, .16), transparent 42%) !important;
  border: 1px solid rgba(255, 226, 158, .32) !important;
  box-shadow:
    inset 0 0 36px rgba(255, 197, 101, .08),
    0 10px 28px rgba(0, 0, 0, .18) !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 32%, rgba(255, 238, 178, .14) 48%, transparent 66%);
  transform: translateX(-45%);
  animation: secretLetterSweep 5.8s ease-in-out infinite;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 0 .8em !important;
  max-width: 100% !important;
  color: #fff7df !important;
  font-size: clamp(14px, 2.8vw, 17px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-stage-footer {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
}

@keyframes secretLetterSweep {
  0%, 62%, 100% { transform: translateX(-55%); opacity: .12; }
  78% { transform: translateX(55%); opacity: .34; }
}

@media (max-width: 420px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
  .smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 18px) !important;
    max-height: calc(100svh - 88px) !important;
    transform: translateX(-50%) !important;
    padding: 13px !important;
    border-radius: 20px 20px 10px 10px !important;
    gap: 8px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > span {
    font-size: 9.5px !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
    font-size: clamp(22px, 6.8vw, 28px) !important;
    line-height: 1.02 !important;
    margin: 4px 0 4px !important;
    max-width: 100% !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
    grid-template-rows: auto minmax(172px, 1fr) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy {
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy b {
    font-size: 13px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 172px !important;
    max-height: 46svh !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 370px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open,
  .smart-tree-experience[data-active-memory-layer="time_capsule"] .memory-function-stage.is-open {
    width: calc(100vw - 12px) !important;
    max-height: calc(100svh - 76px) !important;
    padding: 11px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage > h3 {
    font-size: clamp(20px, 6.3vw, 25px) !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
    grid-template-rows: auto minmax(178px, 1fr) !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 178px !important;
    max-height: 48svh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter::before {
    animation: none !important;
  }
}

/* 20260718bg2: production mountain backdrop and tree-orb composition */
.memory-tree-entered:not(.memory-layer-open) .tree-branch-grid,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-branches,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orbs {
  left: 50% !important;
  right: auto !important;
  top: clamp(120px, 20vh, 210px) !important;
  bottom: auto !important;
  width: min(760px, 58vw) !important;
  height: min(390px, 44vh) !important;
  transform: translateX(-43%) !important;
  pointer-events: none !important;
  z-index: 7 !important;
}

.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb {
  position: absolute !important;
  width: clamp(86px, 7.2vw, 132px) !important;
  min-width: 0 !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 18px 30px rgba(105, 69, 23, 0.28));
}

.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(1),
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(1) {
  left: 8% !important;
  top: 11% !important;
}
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(2),
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(2) {
  left: 0% !important;
  top: 52% !important;
}
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(3),
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(3) {
  right: 4% !important;
  top: 12% !important;
}
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(4),
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(4) {
  right: 2% !important;
  top: 54% !important;
}

.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign::before,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb::before {
  content: '';
  position: absolute;
  top: 44%;
  height: 1px;
  width: clamp(86px, 10vw, 170px);
  background: linear-gradient(90deg, rgba(255, 218, 137, 0), rgba(255, 213, 122, 0.72), rgba(255, 218, 137, 0));
  opacity: 0.62;
  transform-origin: center;
  animation: memoryTreeLinePulse 3.9s ease-in-out infinite;
}
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(1)::before,
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(2)::before,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(1)::before,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(2)::before {
  left: 74%;
}
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(3)::before,
.memory-tree-entered:not(.memory-layer-open) .tree-branch-sign:nth-child(4)::before,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(3)::before,
.memory-tree-entered:not(.memory-layer-open) .memory-tree-orb:nth-child(4)::before {
  right: 74%;
}

@keyframes memoryTreeLinePulse {
  0%, 100% { opacity: 0.32; filter: blur(0.15px); }
  50% { opacity: 0.86; filter: blur(0.9px); }
}

@media (max-width: 780px) {
  .memory-tree-entered:not(.memory-layer-open) .tree-branch-grid,
  .memory-tree-entered:not(.memory-layer-open) .memory-tree-branches,
  .memory-tree-entered:not(.memory-layer-open) .memory-tree-orbs {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: min(96vw, 430px) !important;
    height: 112px !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 4px !important;
  }

  .memory-tree-entered:not(.memory-layer-open) .tree-branch-sign,
  .memory-tree-entered:not(.memory-layer-open) .memory-tree-orb {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .memory-tree-entered:not(.memory-layer-open) .tree-branch-sign::before,
  .memory-tree-entered:not(.memory-layer-open) .memory-tree-orb::before {
    top: -46px !important;
    left: 50% !important;
    right: auto !important;
    width: 1px !important;
    height: 48px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, rgba(255, 218, 137, 0), rgba(255, 213, 122, 0.78), rgba(255, 218, 137, 0.16));
  }
}

/* 20260718bg3: production landscape, atmosphere and tree-anchored navigation */
.smart-tree-experience[data-smart-tree] {
  --memory-gold: #f4c879;
  --memory-gold-light: #fff0be;
  --memory-ink: rgba(12, 9, 8, .82);
  background-color: #3c332d;
  background-image:
    linear-gradient(90deg, rgba(10, 9, 9, .82) 0%, rgba(18, 14, 12, .54) 20%, rgba(28, 21, 17, .08) 48%, rgba(43, 28, 18, .02) 73%, rgba(38, 24, 16, .12) 100%),
    linear-gradient(180deg, rgba(9, 9, 10, .12) 0%, transparent 31%, rgba(255, 220, 162, .055) 51%, rgba(12, 12, 12, .1) 64%, rgba(7, 7, 7, .58) 100%),
    url('/assets/img/story-realm/irish-mountain-backdrop.png');
  background-position: center, center, center 48%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 700ms ease;
}

.smart-tree-landscape {
  display: none !important;
}

.smart-tree-experience[data-smart-tree]::before {
  background:
    radial-gradient(circle at 88% 27%, rgba(255, 230, 166, .18), transparent 24%),
    radial-gradient(ellipse at 50% 62%, transparent 28%, rgba(7, 7, 8, .24) 100%);
  mix-blend-mode: soft-light;
  opacity: .78;
  transition: opacity 650ms ease, background-color 650ms ease;
}

.smart-tree-experience[data-smart-tree]::after {
  background:
    linear-gradient(180deg, rgba(9, 9, 10, .08) 0%, transparent 34%, rgba(255, 224, 171, .035) 51%, rgba(8, 8, 8, .62) 100%),
    radial-gradient(ellipse at 50% 58%, transparent 34%, rgba(8, 7, 7, .2) 100%);
  opacity: .88;
  transition: opacity 650ms ease;
}

.smart-tree-experience[data-smart-tree].is-layer-open {
  background-color: #17110e;
  background-image:
    linear-gradient(rgba(11, 8, 7, .7), rgba(8, 7, 7, .78)),
    url('/assets/img/story-realm/irish-mountain-backdrop.png');
}

.smart-tree-experience[data-smart-tree].is-layer-open::before {
  opacity: .42 !important;
}

.smart-tree-experience[data-smart-tree].is-layer-open::after {
  opacity: .72 !important;
}

.smart-tree-experience[data-smart-tree] .smart-tree-canvas {
  filter: saturate(.94) contrast(1.015);
  opacity: 1;
  transition: opacity 1100ms cubic-bezier(.22, .72, .2, 1), filter 900ms ease;
}

.smart-tree-experience[data-smart-tree].is-loading-scene .smart-tree-canvas {
  opacity: .08;
}

.smart-tree-experience[data-smart-tree].is-scene-ready .smart-tree-canvas {
  animation: memorySceneResolve 1200ms cubic-bezier(.2, .75, .18, 1) both;
}

@keyframes memorySceneResolve {
  from { opacity: .08; filter: saturate(.74) contrast(.94) blur(2px); }
  to { opacity: 1; filter: saturate(.94) contrast(1.015) blur(0); }
}

.smart-tree-experience[data-smart-tree] .smart-tree-content > .eyebrow {
  color: var(--memory-gold-light);
  border-color: rgba(247, 207, 126, .34);
  background: rgba(15, 11, 9, .28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px);
}

.smart-tree-experience[data-smart-tree] .smart-tree-content > h2 {
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .48), 0 1px 1px rgba(0, 0, 0, .6);
}

.smart-tree-experience[data-smart-tree] .smart-tree-content > p {
  color: rgba(255, 247, 229, .84);
  text-wrap: pretty;
  text-shadow: 0 2px 15px rgba(0, 0, 0, .56);
}

.smart-tree-experience[data-smart-tree] .smart-tree-back,
.smart-tree-experience[data-smart-tree] .smart-tree-return {
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(245, 206, 130, .34);
  background: linear-gradient(145deg, rgba(28, 21, 17, .7), rgba(12, 10, 9, .42));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 242, 207, .1);
  backdrop-filter: blur(14px) saturate(1.12);
  transition: transform 220ms cubic-bezier(.2, .75, .18, 1), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.smart-tree-experience[data-smart-tree] .smart-tree-back:focus-visible,
.smart-tree-experience[data-smart-tree] .smart-tree-return:focus-visible {
  outline: 2px solid rgba(255, 234, 176, .96);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(230, 168, 77, .2), 0 12px 34px rgba(0, 0, 0, .28);
}

.smart-tree-experience:not(.is-layer-open) .tree-branch {
  cursor: pointer;
  transition: transform 430ms cubic-bezier(.18, .82, .2, 1), filter 280ms ease, opacity 360ms ease !important;
  will-change: transform;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch span img {
  border-color: rgba(255, 231, 170, .55) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 251, 226, .3), rgba(224, 155, 61, .18) 44%, rgba(47, 28, 17, .34) 72%, rgba(255, 211, 119, .07)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 222, .26),
    inset 0 -12px 28px rgba(43, 24, 12, .2),
    0 0 24px rgba(255, 188, 78, .28),
    0 18px 42px rgba(12, 8, 6, .22) !important;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch::after {
  opacity: .58 !important;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch:focus-visible {
  outline: 0;
}

.smart-tree-experience:not(.is-layer-open) .tree-branch:focus-visible span img {
  outline: 2px solid rgba(255, 239, 193, .98);
  outline-offset: 5px;
  box-shadow: 0 0 0 8px rgba(224, 159, 65, .2), 0 0 42px rgba(255, 198, 98, .42) !important;
}

@media (hover: hover) and (pointer: fine) {
  .smart-tree-experience[data-smart-tree] .smart-tree-back:hover,
  .smart-tree-experience[data-smart-tree] .smart-tree-return:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 226, 158, .62);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28), 0 0 22px rgba(239, 178, 85, .1), inset 0 1px 0 rgba(255, 242, 207, .16);
  }

  .smart-tree-experience:not(.is-layer-open) .tree-branch:hover span img {
    border-color: rgba(255, 239, 194, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 249, 222, .34), 0 0 36px rgba(255, 194, 91, .42), 0 20px 52px rgba(12, 8, 6, .28) !important;
  }
}

@media (min-width: 781px) {
  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch-grid {
    left: var(--memory-tree-anchor-x, 50%) !important;
    right: auto !important;
    top: calc(var(--memory-tree-anchor-y, 43%) - clamp(158px, 21vh, 202px)) !important;
    bottom: auto !important;
    display: block !important;
    width: min(760px, 62vw) !important;
    min-width: 620px !important;
    height: clamp(332px, 44vh, 430px) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch {
    position: absolute !important;
    inset: auto !important;
    width: clamp(112px, 7.4vw, 142px) !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(1) {
    left: 3% !important;
    top: 4% !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(2) {
    left: -1% !important;
    top: 54% !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(3) {
    right: 3% !important;
    top: 5% !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(4) {
    right: -1% !important;
    top: 55% !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch::after {
    width: clamp(94px, 10vw, 176px) !important;
    opacity: .68 !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(1)::after {
    left: 72% !important;
    right: auto !important;
    transform: rotate(11deg) !important;
    transform-origin: left center !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(2)::after {
    left: 72% !important;
    right: auto !important;
    transform: rotate(-10deg) !important;
    transform-origin: left center !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(3)::after {
    left: auto !important;
    right: 72% !important;
    transform: rotate(-11deg) !important;
    transform-origin: right center !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(4)::after {
    left: auto !important;
    right: 72% !important;
    transform: rotate(10deg) !important;
    transform-origin: right center !important;
  }
}

@media (min-width: 781px) and (max-width: 1400px) {
  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(1) {
    left: -1% !important;
    top: 22% !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch:nth-child(2) {
    left: -4% !important;
    top: 63% !important;
  }
}

@media (min-width: 781px) and (max-height: 760px) {
  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch-grid {
    top: calc(var(--memory-tree-anchor-y, 43%) - 150px) !important;
    height: 320px !important;
  }

  .smart-tree-experience.is-entered:not(.is-layer-open) .tree-branch {
    width: clamp(104px, 7.1vw, 124px) !important;
  }
}

@media (max-width: 780px) {
  .smart-tree-experience[data-smart-tree] {
    background-image:
      linear-gradient(180deg, rgba(10, 9, 9, .48) 0%, rgba(18, 13, 10, .12) 43%, rgba(8, 8, 8, .7) 100%),
      linear-gradient(90deg, rgba(12, 10, 9, .34), transparent 48%, rgba(53, 32, 18, .08)),
      url('/assets/img/story-realm/irish-mountain-backdrop.png');
    background-position: center, center, 56% center;
  }

  .smart-tree-experience[data-smart-tree]::before {
    mix-blend-mode: normal;
    opacity: .54;
  }

  .smart-tree-experience[data-smart-tree] .smart-tree-back,
  .smart-tree-experience[data-smart-tree] .smart-tree-return {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch-grid {
    --orb-size: clamp(64px, 18vw, 76px);
    --orb-label: clamp(12px, 3.5vw, 14px);
    position: absolute !important;
    inset: auto auto max(16px, env(safe-area-inset-bottom)) 50% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 8px clamp(18px, 8vw, 42px) !important;
    width: min(310px, calc(100vw - 30px)) !important;
    height: auto !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(1),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(2),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(3),
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch:nth-child(4) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 92px !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::before,
  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch::after {
    display: none !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch span {
    gap: 5px !important;
    line-height: 1.15 !important;
  }

  .smart-tree-experience:not(.is-layer-open).smart-tree-sign-count-4 .tree-branch span img {
    padding: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience[data-smart-tree],
  .smart-tree-experience[data-smart-tree]::before,
  .smart-tree-experience[data-smart-tree]::after,
  .smart-tree-experience[data-smart-tree] .smart-tree-canvas {
    transition-duration: 180ms !important;
  }

  .smart-tree-experience[data-smart-tree].is-scene-ready .smart-tree-canvas,
  .smart-tree-experience:not(.is-layer-open) .tree-branch,
  .smart-tree-experience:not(.is-layer-open) .tree-branch::before,
  .smart-tree-experience:not(.is-layer-open) .tree-branch::after,
  .smart-tree-experience:not(.is-layer-open) .tree-branch span img {
    animation: none !important;
    will-change: auto !important;
  }

  .smart-tree-experience:not(.is-layer-open) .tree-branch.is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 20260718: Story motion direction — staged entrance, responsive pacing and calmer depth. */
@keyframes storyCoverReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes storyProgressReveal {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.smart-tree-experience.is-layer-story .story-text-cover > * {
  opacity: 0;
  animation: storyCoverReveal 900ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.smart-tree-experience.is-layer-story .story-text-cover > :nth-child(1) { animation-delay: 120ms; }
.smart-tree-experience.is-layer-story .story-text-cover > :nth-child(2) { animation-delay: 230ms; }
.smart-tree-experience.is-layer-story .story-text-cover > :nth-child(3) { animation-delay: 370ms; }
.smart-tree-experience.is-layer-story .story-text-cover > :nth-child(4) { animation-delay: 510ms; }

.smart-tree-experience.is-layer-story .story-text-progress {
  animation: storyProgressReveal 720ms 420ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-story .story-text-book-canvas {
  opacity: 0 !important;
  transform: translate3d(-50%, 24px, 0) scale(.9) !important;
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1), filter 850ms ease !important;
}

.smart-tree-experience.is-layer-story .story-text-experience.is-story-ready .story-text-book-canvas {
  opacity: .88 !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  transition:
    opacity 460ms ease-out,
    transform 680ms cubic-bezier(.16, 1, .3, 1),
    filter 560ms ease-out,
    text-shadow 560ms ease-out !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::before {
  opacity: var(--story-ink-opacity) !important;
  transition: opacity 600ms ease-out, transform 820ms cubic-bezier(.16, 1, .3, 1), filter 650ms ease !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment::after {
  opacity: var(--story-wash-opacity) !important;
  transition: opacity 540ms ease-out, transform 760ms cubic-bezier(.16, 1, .3, 1) !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment:not(.is-current)::before,
.smart-tree-experience.is-layer-story .story-scroll-moment:not(.is-current)::after,
.smart-tree-experience.is-layer-story .story-scroll-moment:not(.is-current) p {
  will-change: auto;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::before,
.smart-tree-experience.is-layer-story .story-scroll-moment.is-current::after,
.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p {
  will-change: opacity, transform, filter;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-text-cover h4 {
    width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    font-size: clamp(40px, 10.5vw, 54px) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-cover p {
    width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  .smart-tree-experience.is-layer-story .story-text-cover small {
    display: block !important;
    width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .smart-tree-experience.is-layer-story .story-text-cover small::before {
    display: none !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment {
    min-height: 108svh !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::before {
    height: 40vh !important;
    filter: blur(18px) saturate(1.2) brightness(1.05) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment::after {
    width: 108vw !important;
    filter: blur(11px) saturate(1.08) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-text-cover > *,
  .smart-tree-experience.is-layer-story .story-text-progress,
  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    transform: translateX(-50%) !important;
  }
}

/* 20260718: high-impact cinematic Story treatment. */
@keyframes storyAuroraDrift {
  0%, 100% { transform: translate3d(-5%, 2%, 0) rotate(-7deg) scale(1.05); }
  50% { transform: translate3d(6%, -4%, 0) rotate(6deg) scale(1.18); }
}

@keyframes storyRayBreath {
  0%, 100% { opacity: .18; transform: translateX(-50%) scaleX(.78) rotate(-3deg); }
  48% { opacity: .48; transform: translateX(-50%) scaleX(1.08) rotate(3deg); }
}

@keyframes storyDustTravel {
  from { background-position: 0 0, 40px 80px, 110px 20px; }
  to { background-position: 40px -180px, -30px -110px, 160px -240px; }
}

@keyframes storyOrbitPulse {
  0%, 100% { opacity: .22; transform: translateX(-50%) rotateX(68deg) scale(.86); }
  50% { opacity: .6; transform: translateX(-50%) rotateX(68deg) scale(1.08); }
}

@keyframes storyMomentIgnite {
  0% { opacity: 0; transform: translate3d(0, 38px, 0) scale(.94); filter: blur(12px); letter-spacing: .025em; }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); letter-spacing: inherit; }
}

@keyframes storyGoldShimmer {
  0%, 18% { background-position: 115% 50%; }
  62%, 100% { background-position: -30% 50%; }
}

@keyframes storyNumberReveal {
  from { opacity: 0; transform: translate3d(42px, -42%, 0) scale(.82); filter: blur(12px); }
  to { opacity: .24; transform: translate3d(0, -50%, 0) scale(1); filter: blur(0); }
}

.smart-tree-experience.is-layer-story .story-cinematic-fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.smart-tree-experience.is-layer-story .story-cinematic-fx > i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.smart-tree-experience.is-layer-story .story-fx-aurora {
  inset: -22%;
  background:
    radial-gradient(ellipse at 68% 32%, rgba(255, 222, 150, .3), transparent 34%),
    radial-gradient(ellipse at 32% 70%, rgba(194, 101, 32, .2), transparent 38%),
    conic-gradient(from 110deg at 50% 54%, transparent 0 18%, rgba(255, 198, 85, .13) 28%, transparent 42% 66%, rgba(255, 239, 190, .12) 78%, transparent 92%);
  filter: blur(36px) saturate(1.18);
  mix-blend-mode: screen;
  animation: storyAuroraDrift 13s ease-in-out infinite;
}

.smart-tree-experience.is-layer-story .story-fx-rays {
  left: 50%;
  bottom: -12vh;
  width: min(1160px, 96vw);
  height: 92vh;
  transform-origin: 50% 100%;
  clip-path: polygon(42% 100%, 49% 0, 53% 0, 62% 100%, 68% 100%, 56% 0, 59% 0, 82% 100%, 20% 100%, 45% 0, 47% 0, 34% 100%);
  background: linear-gradient(to top, rgba(255, 196, 82, .34), rgba(255, 238, 184, .08) 62%, transparent);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: storyRayBreath 7.5s ease-in-out infinite;
}

.smart-tree-experience.is-layer-story .story-fx-dust {
  inset: 0;
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(255, 239, 195, .88) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 190, 83, .66) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255, 249, 222, .58) 0 .8px, transparent 1.5px);
  background-size: 118px 142px, 174px 196px, 92px 128px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 25%, #000 88%, transparent);
  animation: storyDustTravel 22s linear infinite;
}

.smart-tree-experience.is-layer-story .story-fx-orbit {
  left: 50%;
  bottom: max(44px, 4vh);
  width: min(560px, 76vw);
  height: min(230px, 25vh);
  border: 1px solid rgba(255, 224, 157, .72);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 208, 116, .38),
    0 0 80px rgba(255, 164, 48, .2),
    inset 0 0 42px rgba(255, 234, 177, .16);
  mix-blend-mode: screen;
  animation: storyOrbitPulse 5.8s ease-in-out infinite;
}

.smart-tree-experience.is-layer-story .story-scroll-moment > .story-moment-index {
  position: absolute !important;
  top: 48%;
  right: clamp(30px, 7vw, 120px);
  z-index: 0;
  display: block !important;
  color: transparent;
  font-size: clamp(150px, 24vw, 390px);
  font-weight: 950;
  line-height: .7;
  letter-spacing: -.09em;
  -webkit-text-stroke: 1px rgba(255, 226, 166, .32);
  text-shadow: 0 0 80px rgba(255, 178, 61, .16);
  opacity: 0;
  transform: translate3d(42px, -42%, 0) scale(.82);
  filter: blur(12px);
  pointer-events: none;
  mix-blend-mode: screen;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current > .story-moment-index {
  animation: storyNumberReveal 1150ms 80ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.smart-tree-experience.is-layer-story .story-moment-copy {
  position: relative;
  z-index: 2;
  display: block;
  transform-origin: 24% 60%;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current .story-moment-copy {
  color: transparent;
  background: linear-gradient(104deg, #fff9e9 0 34%, #ffd98d 43%, #fffdf2 49%, #e9ad4e 58%, #fff9e9 72% 100%);
  background-size: 240% 100%;
  background-position: 115% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    storyMomentIgnite 900ms cubic-bezier(.16, 1, .3, 1) both,
    storyGoldShimmer 5.6s 950ms ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 208, 118, .18));
}

.smart-tree-experience.is-layer-story .story-text-book-canvas {
  width: min(540px, 68vw) !important;
  height: min(320px, 34vh) !important;
  bottom: max(34px, 3.5vh) !important;
  filter:
    drop-shadow(0 30px 46px rgba(0, 0, 0, .48))
    drop-shadow(0 0 34px rgba(255, 185, 71, .38)) !important;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-fx-aurora {
    filter: blur(28px) saturate(1.12);
  }

  .smart-tree-experience.is-layer-story .story-fx-rays {
    width: 130vw;
    height: 76vh;
    opacity: .32;
  }

  .smart-tree-experience.is-layer-story .story-fx-dust {
    opacity: .34;
    background-size: 142px 176px, 196px 224px, 112px 154px;
  }

  .smart-tree-experience.is-layer-story .story-fx-orbit {
    bottom: 28px;
    width: 88vw;
    height: 160px;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment > .story-moment-index {
    top: 38%;
    right: 22px;
    font-size: clamp(126px, 44vw, 190px);
    -webkit-text-stroke-color: rgba(255, 226, 166, .24);
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    width: min(340px, 86vw) !important;
    height: min(220px, 24vh) !important;
    bottom: 22px !important;
    opacity: .96 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-cinematic-fx > i,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current > .story-moment-index,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current .story-moment-copy {
    animation: none !important;
  }

  .smart-tree-experience.is-layer-story .story-fx-dust,
  .smart-tree-experience.is-layer-story .story-fx-rays {
    opacity: .12 !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current > .story-moment-index {
    opacity: .14 !important;
    transform: translate3d(0, -50%, 0) !important;
    filter: none !important;
  }
}

/* 20260718: cinematic typography pass — large editorial scale and word choreography. */
@keyframes storyWordPremiere {
  0% {
    opacity: 0;
    transform: translate3d(0, .72em, 0) rotateX(-42deg) scale(.96);
    filter: blur(12px);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -.035em, 0) rotateX(2deg) scale(1.012);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes storyCaptionCut {
  0% { opacity: 0; transform: scaleX(.04); }
  45% { opacity: .9; }
  100% { opacity: .42; transform: scaleX(1); }
}

@keyframes storyBookLevitate {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.smart-tree-experience.is-layer-story .story-scroll-moment,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
  min-height: 108svh !important;
  padding: clamp(96px, 12vh, 142px) clamp(40px, 9vw, 150px) clamp(250px, 30vh, 340px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
.smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
  position: relative !important;
  width: min(1120px, calc(100vw - 120px)) !important;
  max-width: 14.5ch !important;
  margin: 0 !important;
  color: #fff9e9 !important;
  font-size: clamp(54px, 6.2vw, 104px) !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
  perspective: 900px;
}

.smart-tree-experience.is-layer-story .story-scroll-moment p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.3em;
  width: min(240px, 34vw);
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 241, 197, .95), rgba(234, 157, 44, .72), transparent);
  box-shadow: 0 0 18px rgba(255, 193, 76, .5);
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current p::after {
  animation: storyCaptionCut 1100ms 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-story .story-moment-copy {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  perspective: 900px;
}

.smart-tree-experience.is-layer-story .story-word {
  display: inline-block;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  opacity: .12;
  color: #fff9e9;
  -webkit-text-fill-color: #fff9e9;
  transform-origin: 50% 100%;
  will-change: auto;
}

.smart-tree-experience.is-layer-story .story-word:nth-child(4n + 3) {
  color: #ffe1a0;
  -webkit-text-fill-color: #ffe1a0;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-word {
  animation: storyWordPremiere 920ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(90ms + var(--story-word, 0) * 54ms);
  will-change: opacity, transform, filter;
}

.smart-tree-experience.is-layer-story [data-story-direction="backward"] .story-scroll-moment.is-first-reveal .story-word {
  animation-delay: calc(70ms + var(--story-word, 0) * 34ms);
}

.smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-word {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  will-change: auto;
}

.smart-tree-experience.is-layer-story .story-scroll-moment.is-current > .story-moment-index {
  opacity: .3;
  -webkit-text-stroke-width: 1.35px;
  text-shadow: 0 0 100px rgba(255, 184, 55, .22);
}

.smart-tree-experience.is-layer-story .story-text-book-canvas {
  animation: storyBookLevitate 5.8s ease-in-out infinite !important;
}

@media (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    min-height: 108svh !important;
    padding: 84px 28px 188px !important;
    justify-content: center !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    width: calc(100vw - 56px) !important;
    max-width: 11ch !important;
    font-size: clamp(42px, 11.8vw, 62px) !important;
    line-height: .99 !important;
    letter-spacing: -.038em !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p::after {
    bottom: -.42em;
    width: 42vw;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment > .story-moment-index {
    top: 43%;
    right: 8px;
    font-size: clamp(150px, 48vw, 220px);
    opacity: .2;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    width: min(310px, 80vw) !important;
    height: min(188px, 22vh) !important;
    bottom: 18px !important;
  }
}

@media (max-width: 390px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    padding: 82px 24px 170px !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    width: calc(100vw - 48px) !important;
    max-width: 10.5ch !important;
    font-size: clamp(38px, 10.8vw, 48px) !important;
    line-height: 1.01 !important;
  }
}

@media (max-height: 680px) and (max-width: 760px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    font-size: clamp(34px, 9.6vw, 44px) !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    height: 132px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-story .story-word,
  .smart-tree-experience.is-layer-story .story-scroll-moment p::after,
  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    animation: none !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-word,
  .smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* 20260718story10: deterministic touch entry and flicker-free mobile Story typography. */
@keyframes storyWordPremiereMobile {
  0% { opacity: 0; transform: translate3d(0, .5em, 0) scale(.985); }
  72% { opacity: 1; transform: translate3d(0, -.025em, 0) scale(1.005); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.smart-tree-enter {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.smart-tree-enter:active,
.smart-tree-experience.is-entering .smart-tree-enter {
  transform: translateY(1px) scale(.975);
  box-shadow: 0 10px 32px rgba(72, 28, 15, .3), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.smart-tree-experience.is-early-interactive.is-loading-scene .smart-tree-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 420ms ease;
}

.smart-tree-experience.is-early-interactive.is-loading-scene .smart-tree-canvas {
  opacity: .16;
}

.smart-tree-experience.is-early-interactive.is-loading-scene::before,
.smart-tree-experience.is-early-interactive.is-loading-scene::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

@media (max-width: 760px), (pointer: coarse) {
  .smart-tree-experience.is-layer-story .story-scroll-moment {
    --story-depth-x: 0px !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    filter: none !important;
    transition: opacity 420ms ease-out, transform 620ms cubic-bezier(.16, 1, .3, 1), text-shadow 520ms ease-out !important;
    backface-visibility: hidden;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-word {
    animation-name: storyWordPremiereMobile;
    animation-duration: 640ms;
    animation-delay: calc(36ms + var(--story-word, 0) * 28ms);
    will-change: opacity, transform;
    filter: none !important;
    backface-visibility: hidden;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* 20260719story17: rebuilt mobile Story reader.
   A single snap-scrolling DOM scene replaces the competing WebGL/text stack.
   The Memory Tree remains the premium 3D entrance; reading uses lightweight
   spatial light, a CSS 3D book and always-present typography. */
@keyframes storyMobileWorldDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.03); opacity: .54; }
  50% { transform: translate3d(1.5%, 1%, 0) scale(1.08); opacity: .72; }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1.03); opacity: .54; }
}

@keyframes storyMobileDustRise {
  0% { background-position: 0 0, 24px 42px, 10px 18px; opacity: .28; }
  50% { opacity: .52; }
  100% { background-position: 12px -180px, 44px -132px, -8px -164px; opacity: .28; }
}

@keyframes storyMobileBookFloat {
  0%, 100% { transform: rotateX(58deg) rotateZ(-1.5deg) translate3d(0, 0, 0); }
  50% { transform: rotateX(56deg) rotateZ(1deg) translate3d(0, -5px, 8px); }
}

@keyframes storyMobileOrbitPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.88); opacity: .28; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: .66; }
}

@keyframes storyMobileCaptionLine {
  from { transform: scaleX(.08); opacity: .22; }
  to { transform: scaleX(1); opacity: .9; }
}

@media (max-width: 760px), (pointer: coarse) {
  .smart-tree-experience.is-mobile-story-active {
    background: #25170f !important;
    overscroll-behavior: none !important;
  }

  .smart-tree-experience.is-mobile-story-active .smart-tree-canvas,
  .smart-tree-experience.is-mobile-story-active .smart-tree-content,
  .smart-tree-experience.is-mobile-story-active .tree-branch-grid,
  .smart-tree-experience.is-mobile-story-active .smart-tree-landscape,
  .smart-tree-experience.is-mobile-story-active .smart-tree-birds,
  .smart-tree-experience.is-mobile-story-active .smart-tree-atmosphere {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .smart-tree-experience.is-mobile-story-active::before,
  .smart-tree-experience.is-mobile-story-active::after {
    display: none !important;
  }

  .smart-tree-experience.is-mobile-story-active .smart-tree-back {
    z-index: 240 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(31, 20, 14, .72) !important;
    border-color: rgba(255, 222, 151, .42) !important;
    box-shadow: 0 10px 28px rgba(12, 7, 4, .34), inset 0 1px 0 rgba(255, 244, 211, .1) !important;
    backdrop-filter: none !important;
  }

  .smart-tree-experience.is-mobile-story-active .memory-function-stage.is-memory-story.is-open {
    position: absolute !important;
    inset: 0 !important;
    z-index: 200 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #2a1a11 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    isolation: isolate !important;
  }

  .smart-tree-experience.is-mobile-story-active .memory-function-stage.is-memory-story::before,
  .smart-tree-experience.is-mobile-story-active .memory-function-stage.is-memory-story::after {
    display: none !important;
  }

  .story-mobile-experience {
    --story-mobile-progress: 0;
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    color: #fff8e7;
    background:
      linear-gradient(180deg, rgba(24, 14, 10, .76), rgba(91, 55, 27, .3) 46%, rgba(138, 83, 32, .42) 100%),
      linear-gradient(90deg, rgba(21, 13, 10, .64), transparent 52%, rgba(82, 51, 28, .12)),
      url('/assets/img/story-realm/irish-mountain-backdrop.png') center / cover no-repeat;
    isolation: isolate;
    contain: layout paint;
  }

  .story-mobile-world,
  .story-mobile-world::before,
  .story-mobile-world::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
  }

  .story-mobile-world {
    z-index: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 74% 28%, rgba(255, 225, 155, .3), transparent 22%),
      radial-gradient(ellipse at 50% 72%, rgba(231, 148, 53, .2), transparent 46%),
      linear-gradient(180deg, rgba(12, 8, 7, .12), rgba(34, 18, 11, .28));
  }

  .story-mobile-world::before {
    inset: -8%;
    background:
      radial-gradient(ellipse at 26% 36%, rgba(255, 248, 221, .13), transparent 23%),
      radial-gradient(ellipse at 72% 58%, rgba(255, 193, 91, .16), transparent 29%),
      radial-gradient(ellipse at 48% 48%, rgba(255, 228, 169, .1), transparent 44%);
    animation: storyMobileWorldDrift 9s ease-in-out infinite;
  }

  .story-mobile-world::after {
    background-image:
      radial-gradient(circle, rgba(255, 239, 193, .78) 0 1px, transparent 1.6px),
      radial-gradient(circle, rgba(255, 191, 91, .62) 0 1px, transparent 1.8px),
      radial-gradient(circle, rgba(255, 250, 225, .52) 0 .7px, transparent 1.3px);
    background-size: 94px 126px, 151px 184px, 72px 108px;
    background-position: 0 0, 24px 42px, 10px 18px;
    animation: storyMobileDustRise 18s linear infinite;
  }

  .story-mobile-world > i {
    position: absolute;
    top: -8%;
    bottom: 14%;
    width: 32%;
    opacity: .16;
    background: linear-gradient(180deg, rgba(255, 239, 192, .42), rgba(255, 193, 87, .06) 72%, transparent);
    transform: skewX(-8deg);
    transform-origin: top center;
  }

  .story-mobile-world > i:nth-child(1) { left: 12%; }
  .story-mobile-world > i:nth-child(2) { left: 42%; width: 23%; opacity: .11; transform: skewX(6deg); }
  .story-mobile-world > i:nth-child(3) { right: -2%; width: 29%; opacity: .08; transform: skewX(-3deg); }

  .story-mobile-progress {
    position: absolute;
    z-index: 12;
    top: max(84px, calc(env(safe-area-inset-top) + 72px));
    right: 7px;
    bottom: max(164px, calc(env(safe-area-inset-bottom) + 150px));
    width: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 239, 202, .13);
  }

  .story-mobile-progress > i {
    position: absolute;
    inset: 0;
    display: block;
    transform: scaleY(.04);
    transform-origin: center top;
    border-radius: inherit;
    background: linear-gradient(180deg, #fff1ba, #e6a23d);
    box-shadow: 0 0 12px rgba(255, 191, 75, .62);
    transition: transform 320ms cubic-bezier(.2, .75, .18, 1);
  }

  .story-mobile-counter {
    position: absolute;
    z-index: 12;
    top: max(23px, calc(env(safe-area-inset-top) + 13px));
    left: 94px;
    max-width: calc(100% - 118px);
    padding: 8px 11px;
    border: 1px solid rgba(255, 223, 155, .16);
    border-radius: 999px;
    color: #ffe8ad;
    background: rgba(50, 31, 18, .52);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 250, 230, .06);
  }

  .story-mobile-reader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .story-mobile-reader::-webkit-scrollbar { display: none; }

  .story-mobile-cover,
  .story-mobile-slide {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .story-mobile-cover {
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: max(108px, calc(env(safe-area-inset-top) + 94px)) 30px max(230px, calc(env(safe-area-inset-bottom) + 214px));
  }

  .story-mobile-cover > span,
  .story-mobile-copy-shell > small {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid rgba(255, 224, 159, .32);
    border-radius: 999px;
    color: #ffe6a8;
    background: rgba(59, 34, 18, .38);
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .story-mobile-cover h4 {
    max-width: 10ch;
    margin: 0;
    color: #fff9e9;
    font-size: clamp(42px, 13vw, 62px);
    font-weight: 950;
    line-height: .91;
    letter-spacing: -.055em;
    text-wrap: balance;
    text-shadow: 0 3px 22px rgba(28, 13, 7, .46);
  }

  .story-mobile-cover > p {
    max-width: 28ch;
    margin: 2px 0 0;
    color: rgba(255, 246, 223, .82);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
  }

  .story-mobile-cover > small {
    max-width: 30ch;
    color: rgba(255, 224, 164, .68);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .03em;
  }

  .story-mobile-slide {
    z-index: 3;
    align-items: center;
    justify-content: flex-start;
    padding: max(102px, calc(env(safe-area-inset-top) + 88px)) 30px max(220px, calc(env(safe-area-inset-bottom) + 204px));
    overflow: hidden;
  }

  .story-mobile-copy-shell {
    position: relative;
    z-index: 4;
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .story-mobile-copy-shell > small { justify-self: start; }

  .story-mobile-copy-shell > p {
    position: relative !important;
    display: block !important;
    width: min(100%, 13ch) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    color: #fff9e9 !important;
    background: transparent !important;
    font-size: clamp(39px, 11.4vw, 54px) !important;
    font-weight: 950 !important;
    line-height: .94 !important;
    letter-spacing: -.047em !important;
    text-align: left !important;
    text-wrap: balance !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    transition: none !important;
    animation: none !important;
    contain: none !important;
  }

  .story-mobile-slide.is-hero-copy .story-mobile-copy-shell > p {
    width: min(100%, 11ch) !important;
    font-size: clamp(48px, 14vw, 66px) !important;
    line-height: .9 !important;
  }

  .story-mobile-slide.is-long-copy .story-mobile-copy-shell > p {
    width: min(100%, 14.5ch) !important;
    font-size: clamp(34px, 9.8vw, 47px) !important;
    line-height: .97 !important;
  }

  .story-mobile-copy-shell .story-moment-copy-mobile,
  .story-mobile-slide.is-current .story-mobile-copy-shell .story-moment-copy-mobile,
  .story-mobile-slide.has-read .story-mobile-copy-shell .story-moment-copy-mobile {
    display: block !important;
    visibility: visible !important;
    color: #fff9e9 !important;
    -webkit-text-fill-color: #fff9e9 !important;
    background: transparent !important;
    filter: none !important;
    transition: none !important;
  }

  .story-mobile-slide:not(.is-current):not(.has-read) .story-moment-copy-mobile {
    opacity: 0;
    transform: translate3d(0, 32vh, 0) scale(.14);
    transform-origin: 50% 100%;
  }

  .story-mobile-slide.has-read .story-moment-copy-mobile {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .story-mobile-slide.is-current .story-moment-copy-mobile {
    animation: storyTextLeavesBook 820ms cubic-bezier(.16, 1, .3, 1) both;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }

  .story-mobile-copy-shell > i {
    display: block;
    width: min(176px, 42vw);
    height: 2px;
    margin-top: 2px;
    transform: scaleX(.08);
    transform-origin: left center;
    opacity: .2;
    background: linear-gradient(90deg, #fff0b8, #e6a03b 64%, transparent);
    box-shadow: 0 0 12px rgba(255, 181, 64, .34);
  }

  .story-mobile-slide.is-current .story-mobile-copy-shell > i {
    animation: storyMobileCaptionLine 720ms 120ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .story-mobile-depth-number {
    position: absolute;
    z-index: 1;
    top: 28%;
    right: -4%;
    color: transparent;
    font-size: clamp(150px, 52vw, 220px);
    font-weight: 950;
    line-height: .75;
    letter-spacing: -.09em;
    -webkit-text-stroke: 1px rgba(255, 225, 162, .16);
    opacity: .8;
    pointer-events: none;
  }

  .story-mobile-slide:nth-of-type(3n + 1) .story-mobile-depth-number { top: 22%; right: -8%; }
  .story-mobile-slide:nth-of-type(3n + 2) .story-mobile-depth-number { top: 38%; right: 4%; }

  .story-mobile-book-scene {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
    width: 260px;
    height: 156px;
    transform: translateX(-50%);
    perspective: 900px;
    pointer-events: none;
  }

  .story-mobile-book-scene::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 210px;
    height: 48px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 186, 71, .34), rgba(88, 40, 15, .18) 54%, transparent 72%);
    box-shadow: 0 0 42px rgba(255, 171, 55, .17);
  }

  .story-mobile-book-orbit {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 246px;
    height: 68px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 221, 145, .38);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(255, 188, 73, .2), inset 0 0 12px rgba(255, 226, 164, .08);
    animation: storyMobileOrbitPulse 4.8s ease-in-out infinite;
  }

  .story-mobile-book-orbit-two {
    width: 196px;
    height: 52px;
    animation-delay: -2.4s;
    animation-duration: 5.8s;
  }

  .story-mobile-book {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 184px;
    height: 94px;
    margin-left: -92px;
    transform-style: preserve-3d;
    animation: storyMobileBookFloat 5.4s ease-in-out infinite;
  }

  .story-mobile-book-cover,
  .story-mobile-book-stack,
  .story-mobile-page,
  .story-mobile-book-spine {
    position: absolute;
    display: block;
    box-sizing: border-box;
  }

  .story-mobile-book-cover {
    inset: 7px -5px -7px;
    z-index: 0;
    border: 1px solid rgba(82, 39, 14, .9);
    border-radius: 7px 9px 10px 8px;
    background: linear-gradient(135deg, #5d250d, #a4541b 46%, #4b1b09 100%);
    box-shadow: 0 16px 24px rgba(19, 8, 4, .42), inset 0 1px 0 rgba(255, 192, 89, .28);
    transform: translateZ(-8px);
  }

  .story-mobile-book-stack {
    inset: 2px 2px -2px;
    z-index: 1;
    border-radius: 7px;
    background: repeating-linear-gradient(180deg, #c98d45 0 2px, #f3c879 2px 4px, #9a5c25 4px 5px);
    box-shadow: inset 0 0 12px rgba(80, 35, 10, .35);
    transform: translateZ(-2px);
  }

  .story-mobile-page {
    top: 0;
    z-index: 3;
    width: 51%;
    height: 88px;
    padding-top: 22px;
    overflow: hidden;
    border: 1px solid rgba(119, 72, 30, .38);
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 250, 211, .88), transparent 40%),
      linear-gradient(125deg, #b97736, #f4cd80 52%, #a8632c);
    box-shadow: inset 0 0 14px rgba(89, 43, 12, .22), 0 4px 8px rgba(38, 15, 5, .18);
    backface-visibility: visible;
  }

  .story-mobile-page-left {
    left: 0;
    transform-origin: right center;
    transform: rotateY(16deg) rotateZ(-1.2deg) translateZ(5px);
    border-radius: 9px 2px 3px 8px;
  }

  .story-mobile-page-right {
    right: 0;
    transform-origin: left center;
    transform: rotateY(-16deg) rotateZ(1.2deg) translateZ(5px);
    border-radius: 2px 9px 8px 3px;
  }

  .story-mobile-page > b {
    display: block;
    width: 64%;
    height: 1px;
    margin: 0 auto 7px;
    border-radius: 99px;
    background: rgba(91, 49, 20, .38);
  }

  .story-mobile-page > b:nth-child(2) { width: 76%; }
  .story-mobile-page > b:nth-child(3) { width: 58%; }
  .story-mobile-page > b:nth-child(4) { width: 69%; }

  .story-mobile-book-spine {
    z-index: 5;
    top: 2px;
    bottom: -4px;
    left: 50%;
    width: 5px;
    margin-left: -2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #63300f, #e9ad50 48%, #54230b);
    box-shadow: 0 0 6px rgba(76, 30, 8, .44);
    transform: translateZ(9px);
  }

  .story-mobile-next {
    position: absolute;
    z-index: 15;
    right: 15px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
    display: grid;
    place-items: center;
    gap: 1px;
    width: 66px;
    height: 66px;
    padding: 0;
    border: 1px solid rgba(255, 229, 169, .44);
    border-radius: 50%;
    color: #fff4d1;
    background: linear-gradient(145deg, rgba(124, 69, 27, .9), rgba(44, 25, 16, .94));
    box-shadow: 0 10px 24px rgba(20, 9, 4, .34), inset 0 1px 0 rgba(255, 244, 211, .14);
    font: inherit;
    touch-action: manipulation;
  }

  .story-mobile-next > span {
    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .story-mobile-next > b {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
  }

  .story-mobile-next:active { transform: scale(.94); }

  .story-mobile-experience.is-last .story-mobile-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-mobile-world::before,
  .story-mobile-world::after,
  .story-mobile-book,
  .story-mobile-book-orbit,
  .story-mobile-slide.is-current .story-mobile-copy-shell > i {
    animation: none !important;
  }

  .story-mobile-reader { scroll-behavior: auto !important; }
}

/* 20260718: customer choice between immersive 3D and classic 2D. */
.experience-mode-picker {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(185, 122, 32, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(236, 176, 75, .16), transparent 34%),
    linear-gradient(145deg, #fffdf9, #fff7e9 58%, #f6fffb);
  box-shadow: 0 22px 64px rgba(52, 39, 20, .08);
}

.experience-mode-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.experience-mode-heading > span {
  color: #9a6518;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.experience-mode-heading h2,
.experience-mode-heading p {
  margin: 0;
}

.experience-mode-heading p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.experience-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.experience-mode-option {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 148px;
  padding: 16px;
  overflow: hidden;
  border: 2px solid rgba(117, 98, 72, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.experience-mode-option:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 122, 32, .42);
  box-shadow: 0 18px 42px rgba(85, 55, 18, .1);
}

.experience-mode-option:has(input:checked) {
  border-color: #bf7d1d;
  background: #fffaf0;
  box-shadow: 0 0 0 4px rgba(215, 153, 52, .12), 0 20px 52px rgba(91, 57, 17, .12);
}

.experience-mode-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.experience-mode-option:focus-within {
  outline: 3px solid rgba(38, 112, 196, .24);
  outline-offset: 3px;
}

.experience-mode-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 106px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 221, 158, .28);
}

.experience-mode-art-3d {
  background:
    radial-gradient(circle at 50% 68%, rgba(255, 211, 115, .54), transparent 24%),
    radial-gradient(circle at 50% 34%, #dca647 0 8%, transparent 9%),
    linear-gradient(155deg, #22130b, #704119 56%, #d59a3d);
  box-shadow: inset 0 -30px 50px rgba(19, 9, 3, .28);
}

.experience-mode-art-3d::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 31px;
  width: 42px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 52% 48% 44% 56%;
  background: radial-gradient(circle at 50% 48%, #7f9a43, #33451f 68%, transparent 70%);
  filter: drop-shadow(0 0 10px rgba(255, 204, 105, .28));
}

.experience-mode-art-3d::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55px;
  width: 4px;
  height: 31px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #6d3c1c;
  box-shadow: 0 24px 22px 14px rgba(255, 191, 79, .16);
}

.experience-mode-art-3d i {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 72px;
  height: 23px;
  transform: translateX(-50%) rotateX(65deg);
  border: 1px solid rgba(255, 219, 145, .74);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 191, 74, .42);
}

.experience-mode-art-2d {
  background: linear-gradient(155deg, #eef4fa, #ffffff 55%, #f2e8d9);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5);
}

.experience-mode-art-2d::before {
  content: "";
  position: absolute;
  inset: 15px 13px;
  border-radius: 8px;
  background:
    linear-gradient(#dca64d, #dca64d) 10px 12px / 34px 6px no-repeat,
    linear-gradient(#d3dae2, #d3dae2) 10px 27px / 48px 4px no-repeat,
    linear-gradient(#d3dae2, #d3dae2) 10px 37px / 42px 4px no-repeat,
    linear-gradient(#c2d4c8, #c2d4c8) 10px 54px / 48px 23px no-repeat,
    #fff;
  border: 1px solid #d9e0e7;
  box-shadow: 0 10px 24px rgba(54, 70, 84, .12);
}

.experience-mode-option-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.experience-mode-option-copy strong {
  color: var(--ink);
  font-size: 18px;
}

.experience-mode-option-copy small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.experience-mode-option-copy em {
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(185, 122, 32, .1);
  color: #8b5b14;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.experience-mode-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.experience-mode-segment {
  display: inline-flex !important;
  grid-auto-flow: unset;
  gap: 4px !important;
  padding: 4px;
  border: 1px solid rgba(128, 80, 13, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .76);
}

.experience-mode-segment label {
  position: relative;
  cursor: pointer;
}

.experience-mode-segment input {
  position: absolute;
  opacity: 0;
}

.opening-mode-card .experience-mode-segment label span {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 9px;
  background: transparent;
  color: #765b35;
  font-size: 12px;
  font-weight: 950;
}

.opening-mode-card .experience-mode-segment input:checked + span {
  background: linear-gradient(135deg, #c68220, #e3aa49);
  color: #fff;
  box-shadow: 0 6px 16px rgba(143, 87, 12, .22);
}

@media (max-width: 760px) {
  .experience-mode-options {
    grid-template-columns: 1fr;
  }

  .experience-mode-option {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 130px;
  }

  .experience-mode-art {
    width: 76px;
    height: 92px;
  }

  .experience-mode-quick {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .experience-mode-segment,
  .experience-mode-quick .button {
    width: 100%;
  }

  .experience-mode-segment label {
    flex: 1;
  }
}

/* 20260718story8: cinematic Secret Message reveal. */
@keyframes secretPortalBreathe {
  0%, 100% { opacity: .72; transform: scale(.96) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.04) rotate(2deg); }
}

@keyframes secretSealOrbit {
  to { transform: rotate(360deg); }
}

@keyframes secretSealOrbitReverse {
  to { transform: rotate(-360deg); }
}

@keyframes secretStarFloat {
  0%, 100% { opacity: .18; transform: translate3d(0, 8px, 0) scale(.72); }
  50% { opacity: .92; transform: translate3d(0, -14px, 0) scale(1.16); }
}

@keyframes secretPortalDepart {
  0% { opacity: 1; transform: scale(1); }
  34% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 0; transform: scale(1.16); visibility: hidden; }
}

@keyframes secretSealRelease {
  0% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
  42% { opacity: 1; transform: scale(.88) rotate(-8deg); filter: brightness(1.7); }
  100% { opacity: 0; transform: scale(2.15) rotate(16deg); filter: brightness(2.4); }
}

@keyframes secretPanelArrival {
  from { opacity: 0; transform: translate3d(-50%, 42px, 0) scale(.94); filter: blur(14px); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); filter: blur(0); }
}

@keyframes secretContentArrival {
  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes secretBurstRay {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--secret-ray-angle)) scaleX(.08); }
  36% { opacity: .84; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--secret-ray-angle)) scaleX(1); }
}

@keyframes secretLetterWake {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); clip-path: inset(0 0 100% 0 round 20px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0 0 0 0 round 20px); }
}

.smart-tree-experience > .memory-secret-reveal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: max(88px, env(safe-area-inset-top)) 24px max(54px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #fff8e7;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 223, 144, .2), transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(196, 112, 42, .18), transparent 36%),
    linear-gradient(155deg, rgba(12, 8, 7, .92), rgba(49, 27, 17, .88) 54%, rgba(88, 49, 24, .82));
  box-shadow: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.smart-tree-experience > .memory-secret-reveal::before,
.smart-tree-experience > .memory-secret-reveal::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.smart-tree-experience > .memory-secret-reveal::before {
  left: 50%;
  top: 50%;
  width: min(780px, 116vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 224, 157, .18);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 12deg, transparent 0 13deg, rgba(255, 221, 147, .13) 14deg, transparent 16deg 31deg),
    radial-gradient(circle, transparent 0 34%, rgba(255, 218, 137, .07) 34.4% 34.8%, transparent 35.2% 51%, rgba(255, 229, 172, .1) 51.3% 51.7%, transparent 52.1%);
  box-shadow: 0 0 100px rgba(255, 184, 66, .12), inset 0 0 90px rgba(255, 210, 112, .06);
  transform: translate(-50%, -50%);
  animation: secretPortalBreathe 7s ease-in-out infinite;
}

.smart-tree-experience > .memory-secret-reveal::after {
  inset: 0;
  opacity: .38;
  background-image:
    radial-gradient(circle, rgba(255, 242, 203, .86) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 190, 82, .66) 0 1.2px, transparent 2px);
  background-size: 128px 148px, 194px 218px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
}

.smart-tree-experience > .memory-secret-reveal:focus-visible {
  outline: 2px solid #ffe4a2;
  outline-offset: -8px;
}

.smart-tree-experience > .memory-secret-reveal.is-revealing {
  pointer-events: none;
  animation: secretPortalDepart 1450ms cubic-bezier(.2, .72, .16, 1) both;
}

.smart-tree-experience > .memory-secret-reveal.is-revealing .memory-secret-seal {
  animation: secretSealRelease 1050ms cubic-bezier(.16, .8, .16, 1) both;
}

.memory-secret-reveal-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memory-secret-reveal-stars i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe4a0;
  box-shadow: 0 0 15px #ffc45d, 0 0 34px rgba(255, 177, 57, .6);
  animation: secretStarFloat 4.8s ease-in-out infinite;
}

.memory-secret-reveal-stars i:nth-child(1) { left: 17%; top: 24%; animation-delay: -.6s; }
.memory-secret-reveal-stars i:nth-child(2) { left: 78%; top: 19%; animation-delay: -2.1s; transform: scale(.68); }
.memory-secret-reveal-stars i:nth-child(3) { left: 12%; top: 67%; animation-delay: -3.2s; }
.memory-secret-reveal-stars i:nth-child(4) { left: 86%; top: 72%; animation-delay: -1.4s; transform: scale(1.3); }
.memory-secret-reveal-stars i:nth-child(5) { left: 29%; top: 83%; animation-delay: -4s; transform: scale(.75); }
.memory-secret-reveal-stars i:nth-child(6) { left: 70%; top: 87%; animation-delay: -2.7s; }

.memory-secret-seal {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(154px, 25vw, 220px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 226, 161, .52);
  border-radius: 50%;
  color: #fff1bf;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 248, 218, .52), rgba(235, 163, 64, .22) 20%, rgba(70, 34, 18, .18) 56%, transparent 70%);
  box-shadow:
    0 0 0 12px rgba(255, 219, 143, .035),
    0 0 70px rgba(255, 178, 55, .32),
    inset 0 0 58px rgba(255, 219, 137, .13);
}

.memory-secret-seal::before,
.memory-secret-seal::after,
.memory-secret-seal > i {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.memory-secret-seal::before {
  inset: -13%;
  border: 1px solid rgba(255, 221, 147, .38);
  border-left-color: transparent;
  border-right-color: rgba(255, 192, 80, .08);
  animation: secretSealOrbit 12s linear infinite;
}

.memory-secret-seal::after {
  inset: 12%;
  border: 1px dashed rgba(255, 231, 175, .5);
  animation: secretSealOrbitReverse 9s linear infinite;
}

.memory-secret-seal > i:nth-child(1) {
  inset: -25%;
  border: 1px solid rgba(255, 226, 161, .17);
  clip-path: polygon(0 0, 46% 0, 46% 100%, 0 100%);
  animation: secretSealOrbitReverse 18s linear infinite;
}

.memory-secret-seal > i:nth-child(2) {
  inset: 24%;
  border: 1px solid rgba(255, 244, 205, .55);
  box-shadow: inset 0 0 22px rgba(255, 209, 115, .2);
}

.memory-secret-seal > i:nth-child(3) {
  inset: 38%;
  background: radial-gradient(circle at 38% 32%, #fff5ce, #e5a547 48%, #6c361c 100%);
  box-shadow: 0 0 28px rgba(255, 195, 85, .72);
}

.memory-secret-seal em {
  position: relative;
  z-index: 3;
  color: #fff7dc;
  font-size: clamp(26px, 4vw, 40px);
  font-style: normal;
  text-shadow: 0 0 24px #ffca6c;
}

.memory-secret-reveal-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(100%, 620px);
  text-align: center;
  white-space: normal;
}

.memory-secret-reveal-copy small {
  color: #e8b660;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.memory-secret-reveal-copy b {
  display: block;
  max-width: 12ch;
  color: #fff8e8;
  font-size: clamp(30px, 5vw, 58px);
  line-height: .96;
  letter-spacing: -.04em;
  text-shadow: 0 9px 36px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 195, 91, .18);
  white-space: normal;
  overflow-wrap: normal;
}

.smart-tree-experience.is-layer-time_capsule > .smart-tree-return {
  z-index: 2501 !important;
}

.memory-secret-reveal-copy em {
  color: rgba(255, 241, 211, .72);
  font-size: clamp(12px, 1.8vw, 15px);
  font-style: normal;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-awaiting {
  opacity: 0 !important;
  pointer-events: none !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing,
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealed {
  opacity: 1 !important;
  pointer-events: auto !important;
  border-color: rgba(255, 221, 148, .48) !important;
  background:
    linear-gradient(145deg, rgba(24, 15, 11, .9), rgba(75, 42, 23, .72) 62%, rgba(127, 72, 30, .52)),
    radial-gradient(circle at 78% 8%, rgba(255, 216, 137, .2), transparent 34%) !important;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, .48),
    0 0 50px rgba(240, 166, 57, .12),
    inset 0 1px 0 rgba(255, 241, 204, .28),
    inset 0 0 70px rgba(255, 180, 65, .055) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing {
  animation: secretPanelArrival 1100ms 220ms cubic-bezier(.16, 1, .3, 1) both;
}

.memory-secret-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 0;
  width: min(760px, 116vw);
  aspect-ratio: 1;
  pointer-events: none;
}

.memory-secret-burst i {
  --secret-ray-angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 245, 205, .8), rgba(255, 186, 67, .25), transparent);
}

.memory-secret-burst i:nth-child(2) { --secret-ray-angle: 60deg; }
.memory-secret-burst i:nth-child(3) { --secret-ray-angle: 120deg; }
.memory-secret-burst i:nth-child(4) { --secret-ray-angle: 180deg; }
.memory-secret-burst i:nth-child(5) { --secret-ray-angle: 240deg; }
.memory-secret-burst i:nth-child(6) { --secret-ray-angle: 300deg; }

.memory-function-stage.is-secret-revealing .memory-secret-burst i {
  animation: secretBurstRay 1050ms 80ms cubic-bezier(.12, .72, .18, 1) both;
}

.memory-function-stage.is-secret-revealing .memory-secret-burst i:nth-child(2),
.memory-function-stage.is-secret-revealing .memory-secret-burst i:nth-child(5) { animation-delay: 150ms; }
.memory-function-stage.is-secret-revealing .memory-secret-burst i:nth-child(3),
.memory-function-stage.is-secret-revealing .memory-secret-burst i:nth-child(6) { animation-delay: 230ms; }

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > span,
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > h3,
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-copy {
  animation: secretContentArrival 820ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > span { animation-delay: 520ms; }
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > h3 { animation-delay: 610ms; }
.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-copy { animation-delay: 720ms; }

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-letter {
  animation: secretLetterWake 980ms 820ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open {
  grid-template-rows: auto minmax(160px, 1fr) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 11px;
  align-items: center;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(255, 224, 163, .11), rgba(255, 228, 174, .035)) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy::before {
  content: "✓";
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 229, 172, .38);
  border-radius: 50%;
  color: #ffe2a0;
  background: rgba(223, 149, 54, .12);
  box-shadow: 0 0 20px rgba(255, 188, 72, .13);
  font-size: 13px;
  font-weight: 950;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy b,
.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy p {
  grid-column: 2;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy b {
  margin: 0 !important;
  font-size: 13px !important;
  letter-spacing: .02em;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy p {
  margin: 1px 0 0 !important;
  color: rgba(255, 243, 217, .68) !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 172, 72, .58) rgba(255, 255, 255, .04);
  background:
    linear-gradient(152deg, rgba(255, 241, 210, .17), rgba(104, 56, 27, .12) 56%, rgba(37, 22, 15, .18)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 231, 178, .025) 31px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 226, .2),
    inset 18px 0 42px rgba(255, 198, 98, .025),
    0 18px 48px rgba(0, 0, 0, .24) !important;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter::after {
  content: "“";
  position: absolute;
  right: 16px;
  top: 2px;
  z-index: 0;
  color: rgba(255, 221, 155, .08);
  font: 900 92px/1 Georgia, serif;
  pointer-events: none;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
  font-size: clamp(15px, 2.5vw, 18px) !important;
  line-height: 1.64 !important;
  text-shadow: 0 1px 18px rgba(255, 218, 146, .04);
}

.smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-letter p {
  animation: secretContentArrival 720ms 1050ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-locked .memory-secret-sigil,
.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-pending .memory-secret-sigil {
  display: block !important;
}

@media (hover: hover) and (pointer: fine) {
  .smart-tree-experience > .memory-secret-reveal:hover .memory-secret-seal {
    transform: scale(1.035);
    border-color: rgba(255, 238, 194, .78);
    box-shadow: 0 0 0 16px rgba(255, 219, 143, .045), 0 0 90px rgba(255, 178, 55, .4), inset 0 0 64px rgba(255, 219, 137, .18);
  }
}

@media (max-width: 760px) {
  .smart-tree-experience > .memory-secret-reveal {
    gap: 22px;
    padding-inline: 20px;
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }

  .smart-tree-experience > .memory-secret-reveal::before {
    width: 132vw;
  }

  .memory-secret-seal {
    width: min(168px, 46vw);
  }

  .memory-secret-reveal-copy b {
    max-width: 9.5ch;
    font-size: clamp(34px, 10vw, 48px);
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing {
    animation-name: secretPanelArrivalMobile;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
    font-size: 14px !important;
    line-height: 1.56 !important;
  }
}

@keyframes secretPanelArrivalMobile {
  from { opacity: 0; transform: translate3d(-50%, 44px, 0) scale(.95); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); filter: blur(0); }
}

@media (max-width: 420px) {
  .smart-tree-experience > .memory-secret-reveal {
    padding-top: max(74px, env(safe-area-inset-top));
  }

  .memory-secret-reveal-copy {
    gap: 6px;
  }

  .memory-secret-reveal-copy small {
    font-size: 9px;
  }

  .memory-secret-reveal-copy em {
    font-size: 12px;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open {
    grid-template-rows: auto minmax(190px, 1fr) !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy {
    padding: 9px 10px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy::before {
    width: 28px;
    height: 28px;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-open .memory-secret-copy p {
    font-size: 10.5px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 190px !important;
    max-height: 49svh !important;
    padding: 15px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
    font-size: 14px !important;
    line-height: 1.58 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience > .memory-secret-reveal::before,
  .memory-secret-reveal-stars i,
  .memory-secret-seal::before,
  .memory-secret-seal::after,
  .memory-secret-seal > i,
  .smart-tree-experience > .memory-secret-reveal.is-revealing,
  .smart-tree-experience > .memory-secret-reveal.is-revealing .memory-secret-seal,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing,
  .memory-function-stage.is-secret-revealing .memory-secret-burst i,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > span,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing > h3,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-copy,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-letter,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-secret-revealing .memory-secret-letter p {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* 20260718story12: keep cinematic memory layers inside short landscape phones. */
.smart-tree-experience.is-layer-open.is-loading-scene::before,
.smart-tree-experience.is-layer-open.is-loading-scene::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open {
    left: 50% !important;
    right: auto !important;
    top: 62px !important;
    bottom: auto !important;
    width: min(720px, calc(100vw - 112px)) !important;
    height: calc(100svh - 76px) !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.28fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 7px !important;
    align-items: start !important;
    justify-content: stretch !important;
    padding: 14px 16px !important;
    border-radius: 24px 24px 12px 12px !important;
    overflow: hidden !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open > span,
  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open > h3 {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open > span {
    font-size: 9px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-function-stage.is-open > h3 {
    margin: 5px 0 0 !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: .96 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-copy {
    padding: 9px 11px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 13px !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .smart-tree-experience.is-layer-story .story-text-scroll-reader {
    padding-inline: clamp(64px, 9vw, 96px) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    min-height: 118svh !important;
    padding: 66px 0 116px !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: stretch !important;
    justify-items: start !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    justify-self: start !important;
    width: min(72vw, 620px) !important;
    max-width: min(14ch, 72vw) !important;
    margin-inline: 0 !important;
    font-size: clamp(34px, 5.1vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -.03em !important;
    transform-origin: left center !important;
  }

  .smart-tree-experience.is-layer-story .story-text-book-canvas {
    width: min(250px, 32vw) !important;
    height: min(128px, 31vh) !important;
    bottom: 8px !important;
  }
}

/* 20260718story9: intimate cinematic Voice Memory player. */
@keyframes voiceAuraDrift {
  0%, 100% { opacity: .34; transform: translate(-50%, -50%) rotate(0) scale(.9); }
  50% { opacity: .72; transform: translate(-50%, -50%) rotate(180deg) scale(1.08); }
}

@keyframes voiceRingListen {
  0% { opacity: .68; transform: scale(.82); }
  70%, 100% { opacity: 0; transform: scale(1.42); }
}

@keyframes voiceCorePulse {
  0%, 100% { transform: scale(.96); box-shadow: 0 0 20px rgba(255, 189, 73, .24); }
  50% { transform: scale(1.05); box-shadow: 0 0 44px rgba(255, 189, 73, .52); }
}

@keyframes voiceBarLiving {
  0%, 100% { transform: scaleY(var(--voice-low, .28)); opacity: .48; }
  35% { transform: scaleY(var(--voice-high, .88)); opacity: 1; }
  68% { transform: scaleY(var(--voice-mid, .54)); opacity: .7; }
}

@keyframes voiceChamberGlow {
  0%, 100% { opacity: .2; transform: translateX(-48%); }
  50% { opacity: .56; transform: translateX(48%); }
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-open {
  width: min(720px, calc(100vw - 28px)) !important;
  max-height: min(78svh, 680px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(255, 218, 138, .18), transparent 34%),
    radial-gradient(circle at 92% 76%, rgba(198, 113, 43, .12), transparent 36%),
    linear-gradient(145deg, rgba(20, 15, 12, .88), rgba(74, 46, 26, .65)) !important;
  border-color: rgba(255, 222, 153, .38) !important;
  box-shadow:
    0 28px 100px rgba(0, 0, 0, .46),
    0 0 55px rgba(231, 158, 51, .1),
    inset 0 1px 0 rgba(255, 243, 207, .24),
    inset 0 0 70px rgba(255, 190, 80, .045) !important;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-open > span {
  border: 1px solid rgba(255, 225, 163, .24);
  background: rgba(255, 221, 151, .1);
  color: #ffd985;
  letter-spacing: .055em;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-open > h3 {
  max-width: 13ch;
  color: #fff9e9;
  text-shadow: 0 12px 42px rgba(0, 0, 0, .46), 0 0 28px rgba(255, 200, 104, .1);
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-open > p {
  color: rgba(255, 242, 216, .76);
}

.smart-tree-experience.is-layer-voice .memory-stage-voice-premium {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  min-height: 0;
  margin-top: 12px;
  padding: clamp(14px, 2.5vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(255, 225, 158, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 224, 157, .13), transparent 34%),
    linear-gradient(152deg, rgba(255, 242, 211, .07), rgba(52, 32, 21, .22));
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 229, .14),
    inset 0 0 46px rgba(255, 192, 82, .035),
    0 18px 46px rgba(0, 0, 0, .22);
}

.smart-tree-experience.is-layer-voice .memory-stage-voice-premium::before {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  z-index: -1;
  width: 70%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 226, 166, .08), transparent);
  animation: voiceChamberGlow 8s ease-in-out infinite;
}

.voice-cinematic-ambient {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: -1;
  width: min(520px, 100%);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.voice-cinematic-ambient i {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255, 224, 158, .13);
  border-radius: 50%;
  animation: voiceAuraDrift 13s linear infinite;
}

.voice-cinematic-ambient i:nth-child(2) {
  inset: 28%;
  animation-duration: 9s;
  animation-direction: reverse;
}

.voice-cinematic-ambient i:nth-child(3) {
  inset: 39%;
  background: radial-gradient(circle, rgba(255, 198, 95, .1), transparent 68%);
  border-color: rgba(255, 239, 196, .16);
  animation-duration: 6.5s;
}

.smart-tree-experience.is-layer-voice .voice-heartbeat {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 24px);
  width: 100% !important;
  min-height: 104px;
  margin: 0;
  padding: 7px 12px 7px 7px !important;
  border: 0 !important;
  border-radius: 20px !important;
  color: #fff8e8 !important;
  background: linear-gradient(90deg, rgba(255, 225, 166, .07), rgba(255, 220, 150, .018)) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.smart-tree-experience.is-layer-voice .voice-heartbeat:focus-visible {
  outline: 2px solid #ffe1a0;
  outline-offset: 3px;
}

.voice-heartbeat-rings {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(88px, 14vw, 116px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 225, 162, .36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 247, 214, .42), rgba(226, 147, 49, .2) 24%, rgba(68, 37, 21, .16) 58%, transparent 70%);
  box-shadow: 0 0 42px rgba(255, 180, 59, .18), inset 0 0 34px rgba(255, 215, 130, .1);
}

.voice-heartbeat-rings i {
  position: absolute;
  inset: -4%;
  border: 1px solid rgba(255, 217, 143, .26);
  border-radius: 50%;
  opacity: .42;
}

.voice-heartbeat-rings i:nth-child(2) { inset: 14%; border-style: dashed; }
.voice-heartbeat-rings i:nth-child(3) { inset: 30%; border-color: rgba(255, 241, 199, .5); }

.voice-heartbeat-rings em {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  padding-left: .08em;
  border-radius: 50%;
  color: #fff5cf;
  background: linear-gradient(145deg, #efb453, #b96c20);
  box-shadow: 0 0 24px rgba(255, 182, 66, .5), inset 0 1px 0 rgba(255, 250, 224, .5);
  font-size: clamp(18px, 3vw, 25px);
  font-style: normal;
  line-height: 1;
}

.voice-heartbeat-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.voice-heartbeat-copy small {
  color: #dda54d;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.voice-heartbeat-copy b {
  color: #fff8e8;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
  letter-spacing: -.035em;
}

.voice-heartbeat-copy em {
  color: rgba(255, 242, 216, .62);
  font-size: 11.5px;
  font-style: normal;
}

.smart-tree-experience.is-layer-voice .voice-wave {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.15vw, 8px);
  height: 66px;
  margin: 0;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 162, .13);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 224, 160, .055), transparent),
    rgba(255, 245, 222, .025);
}

.smart-tree-experience.is-layer-voice .voice-wave::before,
.smart-tree-experience.is-layer-voice .voice-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 219, 142, .22), transparent);
}

.smart-tree-experience.is-layer-voice .voice-wave::after {
  top: auto;
  bottom: 13px;
  opacity: .35;
}

.smart-tree-experience.is-layer-voice .voice-wave i {
  --voice-low: .22;
  --voice-mid: .5;
  --voice-high: .84;
  position: relative;
  z-index: 1;
  flex: 0 1 9px;
  width: clamp(4px, 1vw, 8px);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0b8, #edae4b 52%, #a55a20);
  box-shadow: 0 0 12px rgba(255, 183, 61, .22);
  transform: scaleY(var(--voice-low));
  transform-origin: center;
  animation: voiceBarLiving 3.8s ease-in-out infinite;
}

.smart-tree-experience.is-layer-voice .voice-wave i:nth-child(2n) { --voice-low: .34; --voice-mid: .66; --voice-high: .96; animation-delay: -.7s; }
.smart-tree-experience.is-layer-voice .voice-wave i:nth-child(3n) { --voice-low: .16; --voice-mid: .42; --voice-high: .72; animation-delay: -1.4s; }
.smart-tree-experience.is-layer-voice .voice-wave i:nth-child(4n) { --voice-low: .42; --voice-mid: .74; --voice-high: 1; animation-delay: -2.1s; }
.smart-tree-experience.is-layer-voice .voice-wave i:nth-child(5n) { --voice-low: .2; --voice-mid: .56; --voice-high: .82; animation-delay: -2.8s; }

.smart-tree-experience.is-layer-voice .memory-function-stage:not(.is-voice-playing) .voice-wave i {
  animation-duration: 5.6s;
  opacity: .52;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-wave i {
  animation-duration: .92s;
  opacity: 1;
  box-shadow: 0 0 18px rgba(255, 195, 79, .5);
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings {
  animation: voiceCorePulse 1.8s ease-in-out infinite;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings i:nth-child(1),
.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings i:nth-child(2) {
  animation: voiceRingListen 1.9s ease-out infinite;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings i:nth-child(2) {
  animation-delay: .55s;
}

.smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-copy b {
  color: #ffe09a;
  text-shadow: 0 0 22px rgba(255, 184, 67, .24);
}

.voice-transport {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  color: rgba(255, 239, 205, .64);
}

.voice-transport time {
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.voice-transport time:last-child { text-align: right; }

.voice-progress {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 239, 204, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

.voice-progress i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #d88a2c, #ffe29e);
  box-shadow: 0 0 12px rgba(255, 190, 79, .55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 120ms linear;
}

.smart-tree-experience.is-layer-voice .memory-stage-voice-premium audio {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 38px;
  max-height: 42px;
  margin: 0;
  opacity: .86;
  color-scheme: dark;
  filter: sepia(.12) saturate(.82) brightness(1.08);
}

@media (hover: hover) and (pointer: fine) {
  .smart-tree-experience.is-layer-voice .voice-heartbeat:hover {
    background: linear-gradient(90deg, rgba(255, 225, 166, .105), rgba(255, 220, 150, .03)) !important;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat:hover .voice-heartbeat-rings {
    border-color: rgba(255, 235, 191, .58);
    box-shadow: 0 0 54px rgba(255, 180, 59, .28), inset 0 0 38px rgba(255, 215, 130, .14);
  }
}

@media (max-width: 720px) {
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open {
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 18px) !important;
    max-height: calc(100svh - 88px) !important;
    transform: translateX(-50%) !important;
    padding: 13px !important;
    border-radius: 22px 22px 10px 10px !important;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > h3 {
    margin: 5px 0 4px;
    font-size: clamp(25px, 7.6vw, 34px);
    line-height: .98;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > p {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium {
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 19px;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    min-height: 88px;
    padding: 4px 8px 4px 4px !important;
  }

  .voice-heartbeat-rings {
    width: 82px;
  }

  .voice-heartbeat-copy b {
    font-size: clamp(21px, 6vw, 27px);
  }

  .voice-heartbeat-copy em {
    font-size: 10px;
  }

  .smart-tree-experience.is-layer-voice .voice-wave {
    height: 54px;
    gap: 4px;
    padding: 8px 10px;
  }

  .smart-tree-experience.is-layer-voice .voice-wave i {
    flex-basis: 6px;
    width: 5px;
  }

  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium audio {
    min-height: 36px;
    max-height: 38px;
  }
}

@media (max-width: 370px), (max-height: 690px) and (max-width: 720px) {
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open {
    padding: 10px !important;
  }

  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium {
    gap: 6px;
    padding: 8px;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 74px;
  }

  .voice-heartbeat-rings { width: 68px; }
  .voice-heartbeat-copy em { display: none; }
  .smart-tree-experience.is-layer-voice .voice-wave { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium::before,
  .voice-cinematic-ambient i,
  .smart-tree-experience.is-layer-voice .voice-wave i,
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings,
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-voice-playing .voice-heartbeat-rings i {
    animation: none !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open {
    left: 50% !important;
    right: auto !important;
    top: 62px !important;
    bottom: auto !important;
    width: min(720px, calc(100vw - 112px)) !important;
    height: calc(100svh - 76px) !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: minmax(190px, .78fr) minmax(330px, 1.22fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 6px !important;
    align-items: start !important;
    padding: 14px 16px !important;
    border-radius: 24px 24px 12px 12px !important;
    overflow: hidden !important;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > span,
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > h3,
  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > p {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > span {
    font-size: 9px !important;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > h3 {
    margin: 4px 0 2px !important;
    font-size: clamp(27px, 3.8vw, 38px) !important;
    line-height: .95 !important;
  }

  .smart-tree-experience.is-layer-voice .memory-function-stage.is-open > p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 18px !important;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 66px !important;
    padding: 3px 7px 3px 3px !important;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat-rings {
    width: 64px !important;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat-copy b {
    font-size: 23px !important;
  }

  .smart-tree-experience.is-layer-voice .voice-heartbeat-copy em {
    display: none !important;
  }

  .smart-tree-experience.is-layer-voice .voice-wave {
    height: 43px !important;
    padding: 7px 10px !important;
  }

  .smart-tree-experience.is-layer-voice .memory-stage-voice-premium audio {
    min-height: 34px !important;
    max-height: 36px !important;
  }
}
/* end 20260718story9 */

/* 20260718story13: keep unbroken customer text inside the Secret letter. */
.smart-tree-experience.is-layer-time_capsule .memory-secret-ritual,
.smart-tree-experience.is-layer-time_capsule .memory-secret-copy,
.smart-tree-experience.is-layer-time_capsule .memory-secret-letter,
.smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
  min-width: 0;
  max-width: 100%;
}

.smart-tree-experience.is-layer-time_capsule .memory-secret-copy p,
.smart-tree-experience.is-layer-time_capsule .memory-secret-letter p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 20260718story14: restore the full-width cinematic grid on desktop.
   The legacy 980px card cap conflicted with the newer full-screen padding and
   could place balanced lines outside the reader. Mobile framing is unchanged. */
@media (min-width: 900px) {
  .smart-tree-experience.is-layer-story .story-scroll-moment,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2),
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(18px, 2vw, 36px) !important;
    justify-items: start !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    justify-self: start !important;
  }
}

/* 20260719story15: stable Samsung/Android Story typography.
   Keep the per-word premiere and cinematic scene, but avoid nesting it inside
   a second transparent, filtered text animation that can drop compositor
   layers on coarse-pointer mobile Chrome. */
@media (max-width: 760px), (pointer: coarse) {
  .smart-tree-experience.is-layer-story .story-scroll-moment {
    --story-depth-x: 0px !important;
    --story-depth-y: 0px !important;
    --story-scale: 1 !important;
    --story-text-opacity: 1 !important;
    --story-blur: 0px !important;
    --story-reveal-lift: 0px !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p {
    opacity: 1 !important;
    filter: none !important;
  }

  .smart-tree-experience.is-layer-story .story-moment-copy,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current .story-moment-copy {
    opacity: 1 !important;
    color: #fff9e9 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff9e9 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .smart-tree-experience.is-layer-story .story-word {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-word {
    animation: storyWordPremiereMobile 560ms cubic-bezier(.16, 1, .3, 1) both !important;
    animation-delay: calc(40ms + var(--story-word, 0) * 24ms) !important;
  }

  .smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* 20260719story16: physical Android/Samsung compositor-safe Story copy.
   Coarse-pointer devices render each moment as one text layer. The cinematic
   number, mist, light, book and caption line keep moving around stable type. */
@media (max-width: 760px), (pointer: coarse) {
  .smart-tree-experience.is-layer-story .story-scroll-moment p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n + 2) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment:nth-child(3n) p,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current p,
  .smart-tree-experience.is-layer-story .story-scroll-moment.has-read p {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    backface-visibility: visible !important;
    contain: none !important;
    will-change: auto !important;
    transition: none !important;
  }

  .smart-tree-experience.is-layer-story .story-moment-copy-mobile,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-current .story-moment-copy-mobile,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-moment-copy-mobile,
  .smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-moment-copy-mobile {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff9e9 !important;
    -webkit-text-fill-color: #fff9e9 !important;
    background: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    perspective: none !important;
    backface-visibility: visible !important;
    contain: none !important;
    content-visibility: visible !important;
    isolation: auto !important;
    mix-blend-mode: normal !important;
    will-change: auto !important;
    text-shadow: 0 3px 18px rgba(38, 17, 7, .46) !important;
  }

  .smart-tree-experience.is-layer-story .story-word,
  .smart-tree-experience.is-layer-story .story-scroll-moment.is-first-reveal .story-word,
  .smart-tree-experience.is-layer-story .story-scroll-moment.has-revealed .story-word {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    backface-visibility: visible !important;
    contain: none !important;
    will-change: auto !important;
  }
}

/* 20260719story17-final: last-cascade isolation from legacy stage states. */
@media (max-width: 760px), (pointer: coarse) {
  .smart-tree-experience.is-layer-story.is-mobile-story-active .memory-function-stage.is-memory-story.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  .smart-tree-experience.is-layer-story.is-mobile-story-active .story-mobile-experience,
  .smart-tree-experience.is-layer-story.is-mobile-story-active .story-mobile-reader,
  .smart-tree-experience.is-layer-story.is-mobile-story-active .story-mobile-cover,
  .smart-tree-experience.is-layer-story.is-mobile-story-active .story-mobile-slide {
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.mobile-story-portal-open > .story-mobile-experience {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  body.mobile-story-portal-open .smart-tree-back {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .story-mobile-close {
    position: absolute;
    z-index: 30;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    min-width: 68px;
    min-height: 46px;
    padding: 0 17px;
    border: 1px solid rgba(255, 222, 151, .44);
    border-radius: 999px;
    color: #fff7df;
    background: rgba(31, 20, 14, .84);
    box-shadow: 0 10px 28px rgba(12, 7, 4, .34), inset 0 1px 0 rgba(255, 244, 211, .1);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    touch-action: manipulation;
  }

  .story-mobile-close:active { transform: scale(.96); }
}

/* 20260720story18: collision-free mobile entry into the 3D memory world. */
.smart-tree-experience:not(.is-entered) .tree-branch-grid,
.smart-tree-experience:not(.is-entered) .tree-branch {
  visibility: hidden !important;
  pointer-events: none !important;
}

.smart-tree-experience.is-entry-guarded .tree-branch-grid,
.smart-tree-experience.is-entry-guarded .tree-branch {
  pointer-events: none !important;
}

/* 20260720story19: premium-only tree, smooth Gallery arrival and book-born Story copy. */
@keyframes storyTextLeavesBook {
  0% {
    opacity: 0;
    transform: translate3d(0, 32vh, 0) scale(.14);
  }
  38% {
    opacity: .76;
    transform: translate3d(0, 8vh, 0) scale(.68);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, -.45rem, 0) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes storyBookReleaseLight {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.34) scaleY(.08); }
  26% { opacity: .68; transform: translateX(-50%) scaleX(.72) scaleY(.82); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.08) scaleY(1); }
}

@keyframes galleryMemoryArrival {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes galleryMemoryHeadingArrival {
  0% { opacity: 0; transform: translate3d(0, 10px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.smart-tree-experience.is-layer-gallery .memory-function-stage {
  opacity: 0 !important;
  transform: translate(-50%, -46%) scale(.965) !important;
  transition:
    opacity 520ms ease,
    transform 680ms cubic-bezier(.16, 1, .3, 1) !important;
  will-change: opacity, transform;
}

.memory-function-stage.is-stage-preparing {
  transition: none !important;
}

.memory-function-stage.is-mobile-gallery-seeded {
  transform: none !important;
  transition: none !important;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage.is-stage-preparing {
  opacity: 0 !important;
  transform: translate(-50%, -46%) scale(.965) !important;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open,
.smart-tree-experience[data-active-memory-layer="gallery"] .memory-function-stage.is-open {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open > span,
.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open > h3,
.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open > p {
  animation: galleryMemoryHeadingArrival 480ms cubic-bezier(.16, 1, .3, 1) both;
}

.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open > h3 { animation-delay: 45ms; }
.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open > p { animation-delay: 80ms; }

.smart-tree-experience.is-layer-gallery .memory-function-stage.is-open .memory-gallery-world {
  animation: galleryMemoryArrival 620ms 90ms cubic-bezier(.16, 1, .3, 1) both;
}

@media (max-width: 760px), (pointer: coarse) {
  .story-mobile-counter {
    display: none !important;
  }

  .story-mobile-book-scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 72px;
    width: 148px;
    height: min(38vh, 290px);
    opacity: 0;
    transform: translateX(-50%) scaleX(.34) scaleY(.08);
    transform-origin: 50% 100%;
    clip-path: polygon(34% 100%, 66% 100%, 100% 0, 0 0);
    background: linear-gradient(0deg, rgba(255, 178, 61, .46), rgba(255, 226, 154, .2) 48%, transparent 100%);
    pointer-events: none;
  }

  .story-mobile-experience.is-page-turning .story-mobile-book-scene::after {
    animation: storyBookReleaseLight 820ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .smart-tree-experience.is-layer-gallery .memory-function-stage {
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) scale(.985) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout paint;
  }

  .smart-tree-experience.is-layer-gallery .memory-function-stage.is-stage-preparing {
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) scale(.985) !important;
  }

  .smart-tree-experience.is-layer-gallery .memory-function-stage.is-open,
  .smart-tree-experience[data-active-memory-layer="gallery"] .memory-function-stage.is-open {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .smart-tree-experience.is-layer-gallery .memory-gallery-frame,
  .smart-tree-experience.is-layer-gallery .memory-gallery-frame:nth-child(n) {
    animation: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-mobile-slide.is-current .story-moment-copy-mobile {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .story-mobile-experience.is-page-turning .story-mobile-book-scene::after {
    animation: none !important;
  }
}

/* 20260720story20: keep all customer-authored copy inside the classic 2D story on narrow screens. */
body.story-public-body:not(.story-immersive-body),
body.story-public-body:not(.story-immersive-body) .public-story,
body.story-public-body:not(.story-immersive-body) .story-shell,
body.story-public-body:not(.story-immersive-body) .story-page-content {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.story-public-body:not(.story-immersive-body) .story-page-content > *,
body.story-public-body:not(.story-immersive-body) .story-kicker-row > *,
body.story-public-body:not(.story-immersive-body) .story-meta-grid > *,
body.story-public-body:not(.story-immersive-body) .memory-showcase-grid > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

body.story-public-body:not(.story-immersive-body) .story-page-content :where(
  h1,
  h2,
  h3,
  p,
  a,
  strong,
  small,
  .lead,
  .story-text,
  .story-meta-item,
  .memory-showcase-card,
  .voice-memory-gate,
  .voice-memory-player,
  .time-capsule,
  .capsule-open-message
) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px) {
  body.story-public-body:not(.story-immersive-body) .story-page-content {
    box-sizing: border-box;
    width: auto;
  }

  body.story-public-body:not(.story-immersive-body) .story-intro-card,
  body.story-public-body:not(.story-immersive-body) .memory-showcase,
  body.story-public-body:not(.story-immersive-body) .story-text-card,
  body.story-public-body:not(.story-immersive-body) .video-panel,
  body.story-public-body:not(.story-immersive-body) .story-gallery-wrap,
  body.story-public-body:not(.story-immersive-body) .voice-memory,
  body.story-public-body:not(.story-immersive-body) .time-capsule {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  body.story-public-body:not(.story-immersive-body) .story-text,
  body.story-public-body:not(.story-immersive-body) .story-text * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* 20260725: show the exact Secret Message opening date beside every countdown. */
.capsule-unlock-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 10px;
  padding: 9px 14px;
  border: 1px solid rgba(190, 137, 55, .34);
  border-radius: 999px;
  background: rgba(255, 249, 232, .08);
  color: inherit;
  line-height: 1.35;
  text-align: center;
}

.countdown-unlock-date-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  opacity: .72;
  text-transform: uppercase;
}

.countdown-unlock-date-value {
  min-width: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.memory-secret-unlock {
  gap: 5px;
}

.memory-secret-unlock .countdown-unlock-date-label {
  display: block;
  margin-bottom: 3px;
}

.memory-secret-unlock .countdown-unlock-date-value {
  display: block;
}

@media (max-width: 520px) {
  .capsule-unlock-date {
    flex-direction: column;
    gap: 3px;
    width: min(100%, 320px);
    border-radius: 18px;
  }

  .countdown-unlock-date-value {
    font-size: 12px;
  }
}

/* 20260725b: keep the exact Secret Message opening date visible on narrow phones. */
@media (max-width: 420px) {
  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual.memory-secret-ritual-locked {
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-rows: auto !important;
    align-content: end !important;
    gap: 9px !important;
    min-height: 0 !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-locked .memory-secret-copy {
    min-height: 0 !important;
    height: auto !important;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-ritual-locked .memory-secret-unlock {
    position: relative;
    z-index: 2;
    display: block !important;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 226, 164, .26);
    border-radius: 15px;
    background:
      linear-gradient(135deg, rgba(255, 238, 198, .11), rgba(74, 37, 22, .18));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .07),
      0 8px 22px rgba(31, 15, 8, .12);
    color: #fff4d6;
    line-height: 1.28;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-unlock .countdown-unlock-date-label {
    margin-bottom: 4px;
    color: #e9bd6a;
    font-size: 9px;
    letter-spacing: .12em;
    opacity: .92;
  }

  .smart-tree-experience.is-layer-time_capsule .memory-secret-unlock .countdown-unlock-date-value {
    color: #fff7e2;
    font-size: 11.5px;
    line-height: 1.35;
  }
}