.experience-app {
  width: min(100%, 860px);
}

body.experience-welcome-active {
  background: #e8e6df;
}

.experience-app.is-welcome {
  position: relative;
  display: flex;
  width: min(100%, 390px);
  height: min(100vh, 844px);
  height: min(100dvh, 844px);
  min-height: 560px;
  padding: 56px clamp(24px, 10.25vw, 40px) 40px;
  overflow: hidden;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-welcome .screen {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.welcome-screen {
  position: static;
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
}

.welcome-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 46px 46px;
  border-color: transparent transparent #1a1a1a transparent;
  transform-origin: top right;
  animation: welcome-corner-wiggle 4s ease-in-out infinite;
}

.welcome-screen h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 16.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.welcome-screen h1 span {
  display: block;
  transform: rotate(var(--welcome-title-rotation));
  transform-origin: left center;
  animation: welcome-pop-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.welcome-screen h1 span:first-child {
  --welcome-title-rotation: -2deg;
}

.welcome-screen h1 span:last-child {
  --welcome-title-rotation: 1.2deg;
  margin-top: -8px;
  animation-delay: 80ms;
}

.welcome-explainer {
  margin-top: 44px;
  color: #6b6a63;
  font-size: 16px;
  line-height: 1.6;
}

.welcome-explainer p,
.welcome-demo > p {
  margin: 0 0 20px;
}

.welcome-explainer strong,
.welcome-demo strong {
  color: #1a1a1a;
}

.welcome-demo {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.6;
}

.welcome-slider-area {
  position: relative;
}

.welcome-slider-label {
  display: block;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.welcome-slider-label.is-bottom {
  margin-top: 8px;
}

.welcome-range {
  display: block;
  width: 100%;
  height: 20px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
}

.welcome-range.is-second {
  margin-top: 20px;
}

.welcome-range:active {
  cursor: grabbing;
}

.welcome-range:focus-visible {
  border-radius: 4px;
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

.welcome-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #e2e0d8;
}

.welcome-range::-webkit-slider-thumb {
  width: 6px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 3px;
  background: #1a1a1a;
  appearance: none;
  -webkit-appearance: none;
}

.welcome-range::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: #e2e0d8;
}

.welcome-range::-moz-range-thumb {
  width: 6px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: #1a1a1a;
}

.welcome-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  color: #8a887f;
  font-size: 9px;
  line-height: 1.2;
}

.welcome-start {
  width: 100%;
  min-height: 58px;
  margin-top: auto;
  padding: 17px;
  border: 0;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f5f3ee;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transform: rotate(-1deg) scale(1);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-start:active {
  transform: rotate(0deg) scale(0.96);
}

.welcome-start:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}

@keyframes welcome-pop-in {
  0% {
    opacity: 0;
    transform: translateY(14px) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--welcome-title-rotation));
  }
}

@keyframes welcome-corner-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-4deg);
  }
}

/* Quality picker — adapted from the standalone mobile reference. */
body.experience-selection-active {
  background: #e8e6df;
}

.experience-app.is-selecting {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-selecting .screen,
.picker-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.picker-screen {
  position: relative;
}

.picker-header {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px clamp(24px, 10.25vw, 40px) 0;
  background: #f5f3ee;
}

.picker-step-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.picker-step-row span {
  color: #8a887f;
  font-size: 13px;
}

.picker-header h2 {
  margin: 10px 0 6px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.picker-header > p {
  margin: 0 0 12px;
  color: #6b6a63;
  font-size: 12px;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.picker-header .selection-meta {
  align-items: baseline;
  margin: 0 0 6px;
}

.picker-header .selection-count {
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.picker-header .selection-count span {
  margin-left: 4px;
  color: #8a887f;
  font-size: 11px;
  font-weight: 400;
}

.selection-status {
  margin: 0;
  color: #8a887f;
  font-size: 11px;
  font-weight: 400;
}

.selection-meter-wrap {
  position: relative;
  margin-bottom: 16px;
}

.picker-header .selection-meter {
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: #e2e0d8;
}

.picker-header .selection-meter span {
  border-radius: 2px;
  background: #1a1a1a;
}

.minimum-marker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 4px;
  background: #1a1a1a;
  transform: translateX(-50%);
}

.minimum-label {
  position: absolute;
  top: 6px;
  left: 50%;
  color: #8a887f;
  font-size: 8px;
  line-height: 1;
  transform: translateX(-50%);
}

.picker-list {
  padding: 0 clamp(24px, 10.25vw, 40px) 148px;
}

.picker-group {
  margin-top: 16px;
}

.picker-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #8a887f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.picker-group-heading h3 {
  margin: 0;
  font: inherit;
  text-transform: uppercase;
}

.picker-options {
  display: grid;
}

.quality-row {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 2px;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  text-align: left;
  transform: rotate(0deg);
  box-shadow: none;
}

.quality-row[aria-pressed="true"] {
  background: linear-gradient(90deg, #f5f3ee, rgba(26, 26, 26, 0.07));
  box-shadow: 0 3px 0 rgba(26, 26, 26, 0.18);
}

.quality-row.tilt-left[aria-pressed="true"] {
  transform: rotate(-1.5deg);
}

.quality-row.tilt-right[aria-pressed="true"] {
  transform: rotate(1.5deg);
}

.quality-row:disabled {
  opacity: 0.38;
}

.quality-row:focus-visible {
  border-radius: 4px;
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

.quality-check {
  display: flex;
  width: 18px;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border: 1.5px solid #c9c7bd;
  border-radius: 50%;
  color: #f5f3ee;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.quality-row[aria-pressed="true"] .quality-check {
  border-color: #1a1a1a;
  background: #1a1a1a;
}

.check-mark {
  display: inline-block;
}

.check-mark.is-popping {
  animation: check-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quality-row-copy {
  flex: 1;
}

.quality-row-copy strong,
.quality-row-copy > span {
  display: block;
}

.quality-row-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.quality-row-copy > span {
  margin-top: 1px;
  color: #8a887f;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.experience-app.is-selecting .selection-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px clamp(24px, 10.25vw, 40px) 20px;
  border: 0;
  background: linear-gradient(180deg, rgba(245, 243, 238, 0), #f5f3ee 30%);
  backdrop-filter: none;
}

.picker-surprise {
  justify-self: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.picker-surprise:hover,
.picker-surprise:focus-visible {
  color: #1a1a1a;
}

.picker-continue {
  width: 100%;
  min-height: 49px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f5f3ee;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.picker-continue:disabled {
  background: #d8d6cd;
  color: #8a887f;
  opacity: 1;
}

.experience-app.is-selecting .selection-rule {
  margin: 0;
  color: #8a887f;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

@keyframes check-pop {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes select-left {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-1.5deg);
  }
}

@keyframes select-right {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1.5deg);
  }
}

@media (min-width: 500px) {
  .experience-app.is-selecting,
  .experience-app.is-welcome,
  .experience-app.is-priming,
  .experience-app.is-calibrating {
    box-shadow: 0 20px 70px rgba(26, 26, 26, 0.1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .quality-check,
  .picker-surprise,
  .picker-continue {
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      opacity 150ms ease;
  }

  .quality-row {
    transition:
      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
      background 200ms ease,
      box-shadow 200ms ease,
      opacity 150ms ease;
  }

  .quality-row.tilt-left.is-new-selection[aria-pressed="true"] {
    animation: select-left 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .quality-row.tilt-right.is-new-selection[aria-pressed="true"] {
    animation: select-right 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-corner,
  .welcome-screen h1 span {
    animation: none;
  }

  .check-mark.is-popping {
    animation: none;
  }
}

/* Priming — a deliberate pause before the catalogue opens. */
body.experience-priming-active {
  background: #e8e6df;
}

.experience-app.is-priming {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-priming .screen,
.priming-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.priming-screen {
  display: flex;
  flex-direction: column;
  padding: 56px clamp(24px, 10.25vw, 40px) 20px;
}

.priming-kicker {
  margin: 0;
  color: #8a887f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.priming-header h2 {
  max-width: 330px;
  margin: 12px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 10.25vw, 40px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.priming-copy {
  display: grid;
  gap: 28px;
  margin-top: 42px;
  color: #6b6a63;
  font-size: 14px;
  line-height: 1.55;
}

.priming-copy > p,
.priming-rules p {
  margin: 0;
}

.priming-rules {
  display: grid;
  gap: 9px;
  padding: 18px 0;
  border-top: 1px solid #e2e0d8;
  border-bottom: 1px solid #e2e0d8;
  color: #1a1a1a;
}

.priming-rules p:nth-child(1) {
  transform: rotate(-0.6deg);
  transform-origin: left center;
}

.priming-rules p:nth-child(2) {
  transform: rotate(0.5deg);
  transform-origin: left center;
}

.priming-rules p:nth-child(3) {
  margin-top: 4px;
}

.priming-rules strong,
.priming-time {
  color: #1a1a1a;
  font-weight: 750;
}

.priming-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 32px;
}

.priming-back {
  justify-self: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.priming-back:hover,
.priming-back:focus-visible {
  color: #1a1a1a;
}

.priming-continue {
  width: 100%;
  min-height: 58px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f5f3ee;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transform: rotate(-1deg) scale(1);
}

.priming-continue:active {
  transform: rotate(0deg) scale(0.96);
}

.priming-continue:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}

@media (max-height: 700px) {
  .priming-screen {
    padding-top: 32px;
  }

  .priming-header h2 {
    font-size: 32px;
  }

  .priming-copy {
    gap: 18px;
    margin-top: 26px;
    font-size: 13px;
  }

  .priming-rules {
    padding: 12px 0;
  }

  .priming-footer {
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .priming-header,
  .priming-copy {
    animation: priming-arrive 420ms ease both;
  }

  .priming-copy {
    animation-delay: 80ms;
  }

  .priming-back,
  .priming-continue {
    transition:
      transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
      color 150ms ease;
  }
}

@keyframes priming-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

/* Calibration — a quiet beat between choosing the questions and answering them. */
body.experience-calibration-active {
  background: #e8e6df;
}

.experience-app.is-calibrating {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-calibrating .screen,
.calibration-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.calibration-screen {
  display: flex;
  flex-direction: column;
  padding: 56px clamp(24px, 10.25vw, 40px) 20px;
}

.calibration-kicker {
  margin: 0;
  color: #8a887f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.calibration-header h2 {
  max-width: 330px;
  margin: 12px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 10.25vw, 40px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.calibration-copy {
  display: grid;
  gap: 24px;
  margin-top: 42px;
  color: #6b6a63;
  font-size: 14px;
  line-height: 1.55;
}

.calibration-copy > p,
.calibration-own-it p {
  margin: 0;
}

.calibration-own-it {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid #e2e0d8;
  border-bottom: 1px solid #e2e0d8;
  color: #1a1a1a;
}

.calibration-own-it p:first-child {
  transform: rotate(-0.6deg);
  transform-origin: left center;
}

.calibration-own-it p:last-child {
  transform: rotate(0.6deg);
  transform-origin: left center;
}

.calibration-own-it strong {
  font-weight: 750;
}

.calibration-mantra {
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 750;
}

.calibration-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 32px;
}

.calibration-back {
  justify-self: center;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.calibration-back:hover,
.calibration-back:focus-visible {
  color: #1a1a1a;
}

.calibration-continue {
  width: 100%;
  min-height: 58px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f5f3ee;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transform: rotate(-1deg) scale(1);
}

.calibration-continue:active {
  transform: rotate(0deg) scale(0.96);
}

.calibration-continue:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}

@media (max-height: 700px) {
  .calibration-screen {
    padding-top: 32px;
  }

  .calibration-header h2 {
    font-size: 32px;
  }

  .calibration-copy {
    gap: 16px;
    margin-top: 26px;
    font-size: 13px;
  }

  .calibration-own-it {
    padding: 12px 0;
  }

  .calibration-footer {
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .calibration-header,
  .calibration-copy {
    animation: calibration-arrive 420ms ease both;
  }

  .calibration-copy {
    animation-delay: 80ms;
  }

  .calibration-back,
  .calibration-continue {
    transition:
      transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
      color 150ms ease;
  }
}

@keyframes calibration-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

/* Self-rating — the same mobile paper system as welcome and selection. */
body.experience-rating-active {
  background: #e8e6df;
}

.experience-app.is-rating {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-rating .screen,
.rating-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.rating-screen {
  position: relative;
}

.rating-step-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rating-step-row span {
  color: #8a887f;
  font-size: 13px;
}

.rating-meter {
  height: 4px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 2px;
  background: #e2e0d8;
}

.rating-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1a1a1a;
}

.rating-question-number {
  margin: 0;
  color: #8a887f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.rating-submit {
  width: 100%;
  min-height: 49px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: #1a1a1a;
  color: #f5f3ee;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.rating-submit:disabled {
  background: #d8d6cd;
  color: #8a887f;
  opacity: 1;
}

@media (min-width: 500px) {
  .experience-app.is-rating {
    box-shadow: 0 20px 70px rgba(26, 26, 26, 0.1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rating-meter span,
  .rating-submit {
    transition:
      width 180ms ease,
      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease;
  }
}

/* One-at-a-time self-rating — quick, roomy, and deliberately low-drama. */
.rating-one-screen {
  display: flex;
  flex-direction: column;
}

.rating-one-header {
  padding: 16px clamp(24px, 10.25vw, 40px) 0;
}

.rating-one-header .rating-step-row {
  justify-content: space-between;
}

.rating-change {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.rating-change:hover,
.rating-change:focus-visible {
  color: #1a1a1a;
}

.rating-one-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 7px;
  color: #8a887f;
  font-size: 11px;
}

.rating-one-progress span:first-child {
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 750;
}

.rating-one-header .rating-meter {
  margin-bottom: 0;
}

.rating-one-question {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px clamp(24px, 10.25vw, 40px) 24px;
}

.rating-one-copy .rating-question-number {
  font-size: 11px;
}

.rating-one-copy h2 {
  margin: 6px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 13vw, 50px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.rating-one-copy > p:last-child {
  max-width: 290px;
  margin: 12px 0 0;
  color: #6b6a63;
  font-size: 13px;
  line-height: 1.45;
}

.rating-one-prompt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.rating-one-prompt p,
.rating-one-prompt span {
  margin: 0;
}

.rating-one-prompt p {
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 750;
}

.rating-one-prompt span {
  color: #8a887f;
  font-size: 9px;
  text-align: right;
}

.rating-one-choices {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.rating-one-choice {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid #c9c7bd;
  border-radius: 8px;
  background: rgba(245, 243, 238, 0.72);
  color: #1a1a1a;
  font-family: inherit;
  letter-spacing: -0.03em;
  text-align: left;
  transform: rotate(0deg) translateY(0);
}

.rating-one-choice strong,
.rating-one-choice span {
  display: block;
}

.rating-one-choice strong {
  max-width: 46%;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.05;
}

.rating-one-choice span {
  max-width: 48%;
  color: #6b6a63;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
}

.rating-one-choice[aria-pressed="true"] {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #f5f3ee;
  box-shadow: 0 3px 0 rgba(26, 26, 26, 0.18);
}

.rating-one-choice.tilt-left[aria-pressed="true"] {
  transform: rotate(-1deg) translateY(-1px);
}

.rating-one-choice.tilt-right[aria-pressed="true"] {
  transform: rotate(1deg) translateY(-1px);
}

.rating-one-choice[aria-pressed="true"] span {
  color: #c9c7bd;
}

.rating-one-choice:disabled {
  cursor: default;
  opacity: 1;
}

.rating-one-choice:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

.rating-one-footer {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(24px, 10.25vw, 40px) 20px;
}

.rating-previous {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.rating-previous:disabled {
  cursor: default;
  opacity: 0;
}

.rating-one-footer p {
  margin: 0;
  color: #8a887f;
  font-size: 10px;
}

.rating-ready {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  padding: 56px clamp(24px, 10.25vw, 40px) 20px;
}

.rating-ready h2 {
  margin: 10px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 16vw, 64px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.rating-ready > p:not(.calibration-kicker) {
  margin: 16px 0 0;
  color: #6b6a63;
  font-size: 14px;
}

.rating-ready-mark {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  align-self: center;
  margin-top: 92px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  color: #1a1a1a;
  font-size: 48px;
  font-weight: 700;
  transform: rotate(-5deg);
}

.rating-ready footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.rating-ready footer .rating-previous {
  justify-self: center;
}

.rating-ready footer p {
  margin: 0;
  color: #8a887f;
  font-size: 11px;
  text-align: center;
}

@media (max-height: 700px) {
  .rating-one-question {
    padding-top: 20px;
  }

  .rating-one-copy h2 {
    font-size: 38px;
  }

  .rating-one-copy > p:last-child {
    margin-top: 8px;
    font-size: 12px;
  }

  .rating-one-prompt {
    margin-top: 18px;
  }

  .rating-one-choices {
    gap: 5px;
    margin-top: 9px;
  }

  .rating-one-choice {
    min-height: 48px;
    padding-block: 8px;
  }

  .rating-ready-mark {
    margin-top: 52px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rating-one-question {
    animation: rating-question-arrive 260ms ease both;
  }

  .rating-one-choice {
    transition:
      transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      box-shadow 150ms ease;
  }

  .rating-one-question.is-advancing .rating-one-choice[aria-pressed="true"] {
    animation: rating-choice-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .rating-ready-mark {
    animation: rating-ready-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

@keyframes rating-question-arrive {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

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

@keyframes rating-choice-pop {
  50% {
    transform: rotate(0deg) scale(1.025);
  }
}

@keyframes rating-ready-pop {
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
}

/* Finale — collect the return address, then make sharing feel like the win. */
body.experience-finale-active {
  background: #ddd9cf;
}

.experience-app.is-finale {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
  overflow-anchor: none;
}

.experience-app.is-finale .screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.finale-capture,
.finale-share {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  padding: 34px clamp(24px, 8vw, 32px) 22px;
  overflow: hidden;
}

.finale-kicker {
  margin: 0;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.finale-capture-header h2,
.finale-share-header h2 {
  margin: 10px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 12.5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.finale-capture-header > p:last-child,
.finale-share-header > p:last-child {
  max-width: 310px;
  margin: 14px 0 0;
  color: #6b6a63;
  font-size: 14px;
  line-height: 1.4;
}

.finale-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 12px 0;
  border-block: 1px solid #d6d3ca;
}

.finale-check {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: #1a1a1a;
  color: #f5f3ee;
  font-size: 19px;
  font-weight: 800;
  transform: rotate(-5deg);
}

.finale-proof strong,
.finale-proof span {
  display: block;
}

.finale-proof strong {
  font-size: 13px;
}

.finale-proof div > span {
  margin-top: 2px;
  color: #6b6a63;
  font-size: 11px;
}

.finale-form {
  display: grid;
  gap: 14px;
  margin-top: 25px;
}

.finale-field {
  display: grid;
  gap: 7px;
}

.finale-field > span {
  font-size: 12px;
  font-weight: 750;
}

.finale-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #bbb8ae;
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.72);
  color: #1a1a1a;
  font: inherit;
  font-size: 16px;
  outline: none;
}

.finale-field input::placeholder {
  color: #aaa79e;
}

.finale-field input:focus {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.finale-promise {
  margin: -2px 0 0;
  color: #6b6a63;
  font-size: 11px;
  line-height: 1.4;
}

.finale-primary,
.finale-secondary {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.finale-primary {
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #f5f3ee;
  box-shadow: 0 3px 0 rgba(26, 26, 26, 0.18);
}

.finale-primary:disabled {
  border-color: #d6d3ca;
  background: #d6d3ca;
  color: #8a887f;
  box-shadow: none;
  cursor: default;
}

.finale-secondary {
  border: 1px solid #bbb8ae;
  background: transparent;
  color: #1a1a1a;
}

.finale-form-status,
.finale-share-status {
  min-height: 16px;
  margin: -5px 0 0;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.finale-back,
.finale-start-over {
  align-self: center;
  margin-top: auto;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #6b6a63;
  font-size: 11px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #c9c7bd;
  text-underline-offset: 3px;
}

.finale-experience-note {
  margin: 4px 0 0;
  color: #9a978e;
  font-size: 9px;
  text-align: center;
}

.finale-share {
  padding-top: 28px;
}

.finale-burst {
  position: absolute;
  top: 20px;
  right: -33px;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background: #1a1a1a;
  color: #f5f3ee;
  transform: rotate(12deg);
}

.finale-burst::before,
.finale-burst::after {
  position: absolute;
  width: 118px;
  height: 1px;
  background: #1a1a1a;
  content: "";
}

.finale-burst::before {
  transform: rotate(45deg);
}

.finale-burst::after {
  transform: rotate(-45deg);
}

.finale-burst span {
  width: 60px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 0.95;
  text-align: center;
}

.finale-share-header {
  position: relative;
  z-index: 1;
  padding-right: 54px;
}

.finale-share-header h2 {
  font-size: clamp(39px, 11.5vw, 46px);
}

.reply-card {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 3px 3px 0 #1a1a1a;
  transform: rotate(-0.5deg);
}

.reply-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.reply-card-top span {
  font-size: 12px;
  font-weight: 750;
}

.reply-card-top strong {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.reply-people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

.reply-people span {
  display: grid;
  height: 35px;
  place-items: center;
  border: 1px dashed #aaa79e;
  border-radius: 50%;
  color: #aaa79e;
  font-size: 10px;
  font-weight: 750;
}

.reply-card > p {
  margin: 10px 0 0;
  color: #6b6a63;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.finale-link-box {
  display: grid;
  gap: 4px;
  margin-top: 21px;
  padding: 11px 13px;
  border: 1px solid #d6d3ca;
  border-radius: 8px;
  background: #ebe8e0;
}

.finale-link-box span {
  color: #6b6a63;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.finale-link-box code {
  overflow: hidden;
  color: #1a1a1a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finale-share-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.finale-email-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d6d3ca;
}

.finale-email-confirmation > span {
  font-size: 17px;
  line-height: 1;
}

.finale-email-confirmation p {
  margin: 0;
  color: #6b6a63;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.finale-email-confirmation strong {
  color: #1a1a1a;
}

.finale-share .finale-start-over {
  margin-top: 4px;
}

@media (max-height: 740px) {
  .finale-capture,
  .finale-share {
    padding-top: 22px;
  }

  .finale-capture-header h2,
  .finale-share-header h2 {
    font-size: 38px;
  }

  .finale-proof,
  .reply-card {
    margin-top: 18px;
  }

  .finale-form {
    gap: 10px;
    margin-top: 18px;
  }

  .finale-field input,
  .finale-primary,
  .finale-secondary {
    min-height: 46px;
  }

  .finale-link-box {
    margin-top: 15px;
  }
}

@media (min-width: 500px) {
  .experience-app.is-finale {
    box-shadow: 0 20px 70px rgba(26, 26, 26, 0.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .finale-capture-header,
  .finale-share-header,
  .finale-proof,
  .reply-card,
  .finale-link-box,
  .finale-email-confirmation {
    animation: finale-arrive 420ms ease both;
  }

  .finale-proof,
  .reply-card {
    animation-delay: 70ms;
  }

  .finale-link-box,
  .finale-email-confirmation {
    animation-delay: 130ms;
  }

  .finale-burst {
    animation: finale-stamp 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .finale-primary,
  .finale-secondary {
    transition:
      transform 160ms ease,
      background-color 160ms ease,
      color 160ms ease;
  }

  .finale-primary:not(:disabled):active,
  .finale-secondary:active {
    transform: translateY(2px);
  }
}

@keyframes finale-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes finale-stamp {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(0.4);
  }

  to {
    opacity: 1;
    transform: rotate(12deg) scale(1);
  }
}

/* Production-only routes: rater, utility states, and the final report. */
body.experience-rater-active,
body.experience-state-active {
  background: #ddd9cf;
}

.experience-app.is-rater,
.experience-app.is-state {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-rater .screen,
.experience-app.is-state .screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.rater-intro,
.rater-ready,
.rater-thanks,
.app-state {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  padding: 38px clamp(24px, 8vw, 32px) 24px;
}

.rater-intro h1,
.rater-ready h1,
.rater-thanks h1,
.app-state h1 {
  margin: 11px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 13vw, 52px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.rater-intro header > p:last-child,
.rater-ready > p,
.rater-thanks > p,
.app-state > p:not(.finale-kicker) {
  margin: 15px 0 0;
  color: #6b6a63;
  font-size: 14px;
  line-height: 1.45;
}

.rater-kindness-card {
  display: flex;
  gap: 13px;
  margin-top: 30px;
  padding: 16px;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 3px 3px 0 #1a1a1a;
  transform: rotate(-0.5deg);
}

.rater-kindness-card > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #1a1a1a;
  color: #f5f3ee;
  font-size: 18px;
  font-weight: 800;
}

.rater-kindness-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.rater-kindness-card p {
  margin: 5px 0 0;
  color: #6b6a63;
  font-size: 11px;
  line-height: 1.4;
}

.rater-promises {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid #d6d3ca;
  list-style: none;
}

.rater-promises li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #d6d3ca;
  color: #6b6a63;
  font-size: 11px;
}

.rater-promises span {
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 800;
}

.rater-intro footer,
.rater-ready footer,
.rater-thanks footer {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.rater-intro footer > p,
.rater-ready footer > p {
  min-height: 15px;
  margin: 0;
  color: #8a887f;
  font-size: 10px;
  text-align: center;
}

.rater-ready-mark {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  align-self: center;
  margin-top: 72px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  font-size: 45px;
  font-weight: 800;
  transform: rotate(-5deg);
}

.rater-thanks .rater-ready-mark {
  margin: 16px 0 46px;
}

.rater-thanks .rater-kindness-card {
  margin-top: 30px;
}

.app-state .finale-primary {
  margin-top: auto;
}

.state-pulse {
  width: 18px;
  height: 18px;
  align-self: center;
  margin-top: 80px;
  border-radius: 50%;
  background: #1a1a1a;
  animation: state-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes state-pulse {
  to { transform: translateX(52px); }
}

.reply-people span.is-filled {
  border-style: solid;
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #f5f3ee;
}

.finale-owner-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.finale-owner-actions .finale-start-over {
  margin-top: 0;
}

body.experience-report-active {
  background: #ddd9cf;
}

.experience-app.is-report {
  width: min(100%, 760px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px clamp(20px, 6.5vw, 32px) 48px;
  background: #f5f3ee;
  color: #1a1a1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}

.experience-app.is-report .screen {
  min-height: 0;
}

.experience-app.is-report .result-hero {
  padding: 0;
}

.report-brand-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #1a1a1a;
  color: #8a887f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-brand-row span:first-child {
  color: #1a1a1a;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

.experience-app.is-report .status-line {
  gap: 8px 16px;
  padding: 11px 0;
  border-bottom: 1px solid #d6d3ca;
  color: #6b6a63;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.experience-app.is-report .status-line span {
  min-height: 0;
}

.experience-app.is-report .status-line span:last-child {
  color: #1a1a1a;
  text-transform: lowercase;
}

.experience-app.is-report .score-block {
  margin-top: 28px;
}

.experience-app.is-report .score-label,
.experience-app.is-report .section-kicker {
  margin: 0;
  color: #6b6a63;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.experience-app.is-report .score-block h1 {
  max-width: 39rem;
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8.8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.experience-app.is-report .score {
  margin: 3px 0 15px;
  color: #1a1a1a;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.06em;
  font-size: clamp(4.25rem, 20vw, 6rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  white-space: nowrap;
}

.experience-app.is-report .interpretation {
  max-width: 37rem;
  margin: 15px 0 0;
  color: #6b6a63;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.experience-app.is-report .spectrum {
  margin-top: 30px;
  padding-top: 0;
}

.experience-app.is-report .spectrum-labels,
.experience-app.is-report .pole-labels,
.experience-app.is-report .range-labels,
.experience-app.is-report .legend {
  color: #8a887f;
  font-size: 9px;
  letter-spacing: 0;
}

.experience-app.is-report .track {
  height: 8px;
  margin-block: 8px 10px;
  border-radius: 2px;
  background: #d8d6cd;
  box-shadow: none;
}

.experience-app.is-report .ideal-zone {
  width: 6%;
  height: 8px;
  border-radius: 1px;
  background: rgba(26, 26, 26, 0.15);
}

.experience-app.is-report .zero-line {
  height: 18px;
  background: #8a887f;
}

.experience-app.is-report .score-marker {
  width: 20px;
  height: 20px;
  border: 3px solid #f5f3ee;
  background: #1a1a1a;
  box-shadow: 0 4px 10px rgba(26, 26, 26, 0.18);
}

.experience-app.is-report .mirror-note,
.experience-app.is-report .domains,
.experience-app.is-report .privacy-panel,
.experience-app.is-report .result-actions {
  border-bottom: 0;
}

.experience-app.is-report .mirror-note {
  margin-top: 34px;
  padding: 20px;
  border: 1px solid #1a1a1a;
  border-radius: 9px;
  background: rgba(255, 254, 250, 0.58);
  box-shadow: 3px 3px 0 #1a1a1a;
  transform: rotate(-0.35deg);
}

.experience-app.is-report .mirror-note p:last-child {
  margin: 9px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 5.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.experience-app.is-report .domains {
  padding: 42px 0 0;
}

.experience-app.is-report .section-heading h2 {
  margin: 7px 0 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.experience-app.is-report .domain-list {
  margin-top: 20px;
  border-bottom: 1px solid #d6d3ca;
}

.experience-app.is-report .domain-row {
  gap: 13px 14px;
  padding: 19px 0 21px;
  border-top-color: #d6d3ca;
}

.experience-app.is-report .domain-copy h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.experience-app.is-report .domain-copy p {
  margin-top: 3px;
  color: #6b6a63;
  font-size: 11px;
  line-height: 1.35;
}

.experience-app.is-report .gap-pill {
  min-width: 50px;
  min-height: 29px;
  padding-inline: 9px;
  border-color: #c9c7bd;
  border-radius: 6px;
  background: transparent;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 800;
}

.experience-app.is-report .range-track {
  height: 6px;
  margin: 7px 0 10px;
  border-radius: 2px;
  background: #d8d6cd;
  box-shadow: none;
}

.experience-app.is-report .gap-fill {
  border-radius: 1px;
  background: rgba(26, 26, 26, 0.18);
}

.experience-app.is-report .marker-dot {
  width: 17px;
  height: 17px;
}

.experience-app.is-report .peer-dot {
  border: 2px solid #6b6a63;
  background: #f5f3ee;
}

.experience-app.is-report .self-dot {
  border: 2px solid #f5f3ee;
  background: #1a1a1a;
  box-shadow: 0 3px 8px rgba(26, 26, 26, 0.16);
}

.experience-app.is-report .peer-key {
  border-color: #6b6a63;
}

.experience-app.is-report .result-actions {
  margin-top: 38px;
  padding: 22px 20px 20px;
  border: 1px solid #1a1a1a;
  border-radius: 9px;
  background: rgba(255, 254, 250, 0.58);
}

.experience-app.is-report .result-actions h2 {
  margin: 7px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.55rem, 6.8vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.experience-app.is-report .button-row {
  margin-top: 18px;
}

.experience-app.is-report .primary-button,
.experience-app.is-report .secondary-button {
  min-height: 50px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: -0.025em;
}

.experience-app.is-report .secondary-button {
  border-color: #bbb8ae;
  background: transparent;
}

.experience-app.is-report .privacy-panel {
  margin-top: 38px;
  padding: 22px 0 0;
  border-top: 1px solid #1a1a1a;
}

.experience-app.is-report .privacy-panel ul {
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 17px;
  color: #6b6a63;
  font-size: 11px;
  line-height: 1.45;
}

@media (min-width: 560px) {
  .experience-app.is-report {
    padding: 34px 40px 60px;
    box-shadow: 0 20px 70px rgba(26, 26, 26, 0.1);
  }

  .experience-app.is-report .score-block {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    margin-top: 36px;
  }

  .experience-app.is-report .score-label,
  .experience-app.is-report .score {
    grid-column: 1;
  }

  .experience-app.is-report .score {
    grid-row: 2 / span 2;
    margin: 3px 0 0;
    font-size: 4.5rem;
  }

  .experience-app.is-report .score-block h1 {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: -4px;
  }

  .experience-app.is-report .interpretation {
    grid-column: 2;
    grid-row: 3;
  }

  .experience-app.is-report .spectrum {
    margin-top: 38px;
  }

  .experience-app.is-report .mirror-note {
    padding: 24px 26px;
  }

  .experience-app.is-report .result-actions {
    padding: 26px;
  }
}

@media (min-width: 700px) {
  .experience-app.is-report {
    padding-inline: 48px;
  }

  .experience-app.is-report .domain-row {
    grid-template-columns: minmax(160px, 0.85fr) 64px minmax(260px, 1.15fr);
    gap: 22px;
  }
}

@media (max-height: 700px) {
  .rater-intro,
  .rater-ready,
  .rater-thanks {
    padding-top: 24px;
  }

  .rater-kindness-card,
  .rater-promises {
    margin-top: 20px;
  }

  .rater-ready-mark {
    margin-top: 42px;
  }
}

@media (min-width: 500px) {
  .experience-app.is-rater,
  .experience-app.is-state {
    box-shadow: 0 20px 70px rgba(26, 26, 26, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .state-pulse {
    animation: none;
  }
}