.reaction-page {
  background:#fafaf8;
}

.reaction-intro {
  padding-top:30px;
  padding-bottom:36px;
}

.reaction-intro-top,.reaction-heading,.story-top,.reaction-visual-caption,.visual-bottom,.reaction-footnote,.reaction-closing {
  display:flex;
  justify-content:space-between;
  gap:24px;
}

.reaction-intro-top {
  align-items:center;
  margin-bottom:38px;
  font-size:11px;
  letter-spacing:.035em;
}

.reaction-back {
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:#555d57;
}

.concept-label {
  color:#626a63;
  border:1px solid #dce0d9;
  border-radius:30px;
  padding:6px 12px;
}

.reaction-heading {
  align-items:flex-end;
}

.reaction-heading h1 {
  font-size:clamp(44px,5vw,72px);
  line-height:1.04;
  letter-spacing:-.055em;
  margin-top:12px;
}

.reaction-heading h1 em {
  color:#bf381b;
}

.reaction-heading>p {
  font-size:14px;
  line-height:1.9;
  max-width:400px;
  color:#626961;
  padding-bottom:5px;
}

.reaction-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
  scroll-margin-top:100px;
}

.reaction-tabs button {
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  min-height:88px;
  background:#fff;
  border:1px solid #dfe3db;
  border-radius:14px;
  padding:14px 18px;
  color:#343b34;
  transition:background .2s,border-color .2s;
}

.reaction-tabs button:hover {
  border-color:#b8c1b5;
  background:#f0f2ec;
}

.reaction-tabs button[aria-selected=true] {
  background:#fff0e9;
  border-color:#ef4d29;
  box-shadow:inset 0 -3px 0 #ef4d29;
}

.event-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  color:#5d685b;
}

.event-icon svg {
  width:28px;
  height:28px;
}

[aria-selected=true] .event-icon {
  color:#bd371a;
}

.reaction-tabs button>span:nth-child(2) {
  font-size:14px;
  line-height:1.5;
}

.reaction-tabs small {
  display:block;
  color:#687064;
  font-size:10px;
  letter-spacing:.04em;
  margin-bottom:3px;
}

.reaction-tabs b {
  font-weight:400;
  margin-left:auto;
  color:#737d6c;
}

.reaction-tabs [aria-selected=true] b {
  color:#bd371a;
}

.reaction-panel {
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  border:1px solid #dfe3db;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  scroll-margin-top:100px;
}

.reaction-panel:focus-visible {
  outline-offset:4px;
}

.reaction-visual {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:660px;
  background:#333d32;
  color:#fff;
  grid-area:1 / 1;
}

.reaction-photos,.reaction-photo,.reaction-photo-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.reaction-photo {
  object-fit:cover;
  object-position:55% 50%;
  transition:opacity 1.1s ease,filter 1.2s ease,transform 1.4s ease;
  max-width:none;
}

.photo-before {
  opacity:0;
}

.photo-after {
  opacity:1;
}

[data-view=before] .photo-before {
  opacity:1;
}

[data-view=before] .photo-after {
  opacity:0;
}

[data-scene=away][data-view=after] .photo-after {
  filter:brightness(.6) saturate(.7);
}

[data-scene=guest][data-view=before] .photo-before {
  filter:brightness(.48) saturate(.7);
}

[data-scene=guest][data-view=after] .photo-after {
  filter:brightness(1.13) saturate(1.1);
  transform:scale(1.025);
}

[data-scene=energy] .reaction-photo {
  object-position:50% 50%;
  object-fit:contain;
}

.reaction-photo-shade {
  background:linear-gradient(180deg,rgba(9,20,16,.48),transparent 32%,transparent 52%,rgba(9,20,16,.84));
  pointer-events:none;
}

.reaction-visual-caption {
  position:absolute;
  top:25px;
  left:25px;
  right:25px;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  font-size:10px;
  letter-spacing:.035em;
}

.reaction-visual-caption-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffd0b3;
  flex-shrink:0;
}

.visual-state {
  margin-left:auto;
  background:#1c2b24d9;
  border:1px solid #ffffff52;
  border-radius:30px;
  padding:5px 10px;
  color:#fff;
  font-size:10px;
}

.visual-bottom {
  position:absolute;
  bottom:82px;
  left:28px;
  right:28px;
  align-items:flex-end;
}

.visual-bottom p {
  max-width:330px;
  font-size:24px;
  line-height:1.35;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.visual-bottom>span {
  display:none;
}

.view-control {
  position:absolute;
  bottom:23px;
  left:28px;
  display:flex;
  padding:4px;
  background:#142019d9;
  border:1px solid #ffffff70;
  border-radius:30px;
  gap:2px;
}

.view-control button {
  min-height:44px;
  padding:6px 19px;
  border:0;
  background:transparent;
  color:#fff;
  border-radius:30px;
  font-size:11px;
}

.view-control button[aria-pressed=true] {
  background:#fff;
  color:#25352a;
}

.visual-indicators {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.visual-marker {
  position:absolute;
  display:flex;
  align-items:center;
  gap:9px;
  background:#fcfdf7f5;
  color:#34432f;
  padding:11px 14px;
  border-radius:9px;
  font-size:12px;
  line-height:1.45;
  box-shadow:0 5px 30px #14201926;
  transition:opacity .5s,transform .5s;
  max-width:75%;
}

.visual-marker i {
  height:6px;
  width:6px;
  background:#c13c1b;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 4px #ef4d291c;
}

.marker-one {
  top:30%;
  right:6%;
  transform:translateY(6px);
  opacity:0;
}

.marker-two {
  top:58%;
  left:7%;
  transform:translateY(6px);
  opacity:0;
}

[data-step="2"] .marker-one,[data-step="3"] .marker-one,[data-step="3"] .marker-two {
  opacity:1;
  transform:translateY(0);
}

[data-view=before] .visual-marker {
  opacity:0;
  transform:translateY(6px);
}

.reaction-story {
  padding:30px 32px 25px;
  display:flex;
  flex-direction:column;
  min-height:660px;
  grid-area:1 / 2;
}

.story-top {
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  font-size:11px;
}

.story-index {
  color:#ba3c20;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

.story-category {
  color:#65725f;
}

.reaction-story h2 {
  font-size:clamp(26px,2.5vw,36px);
  line-height:1.13;
  letter-spacing:-.045em;
  margin-bottom:16px;
}

.story-lead {
  color:#626a61;
  font-size:14px;
  line-height:1.85;
}

.reaction-steps {
  margin:24px 0 20px;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
}

.reaction-steps li {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 18px;
  gap:10px;
  border-top:1px solid #e9ece4;
  padding:15px 0;
  position:relative;
  min-height:98px;
}

.step-number {
  color:#687363;
  font-size:10px;
  padding-top:1px;
  font-variant-numeric:tabular-nums;
}

.reaction-steps h3 {
  font-size:15px;
  line-height:1.4;
  letter-spacing:-.01em;
  font-weight:480;
  color:#3d4739;
  margin-bottom:5px;
}

.reaction-steps p {
  font-size:11px;
  line-height:1.7;
  color:#626a60;
}

.step-check {
  color:#bd371a;
  opacity:0;
  transition:opacity .4s;
  font-size:13px;
}

[data-step="1"] li:nth-child(1) .step-check,[data-step="2"] li:nth-child(-n+2) .step-check,[data-step="3"] .step-check {
  opacity:1;
}

[data-step="1"] li:nth-child(1) .step-number,[data-step="2"] li:nth-child(-n+2) .step-number,[data-step="3"] .step-number {
  color:#bd371a;
}

.reaction-result {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px;
  background:#f2f4ed;
  border-radius:10px;
  margin-top:auto;
  min-height:78px;
}

.reaction-result>span {
  color:#536a47;
  font-size:23px;
  line-height:1;
}

.reaction-result p {
  font-size:11px;
  line-height:1.75;
  color:#47543d;
}

.reaction-replay {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-start;
  min-height:44px;
  background:transparent;
  border:0;
  color:#ad3218;
  font-size:11px;
  padding:8px 0;
  margin-top:5px;
}

.reaction-replay>span {
  font-size:20px;
}

.reaction-footnote {
  align-items:flex-start;
  margin-top:18px;
  gap:40px;
}

.reaction-footnote>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  white-space:nowrap;
  color:#465240;
}

.footnote-dot {
  width:5px;
  height:5px;
  background:#ad3218;
  border-radius:50%;
}

.reaction-footnote p {
  font-size:11px;
  line-height:1.8;
  color:#626a60;
  max-width:490px;
}

.reaction-closing {
  padding-block:68px 78px;
  align-items:flex-end;
}

.reaction-closing .eyebrow {
  font-size:10px;
  margin-bottom:14px;
}

.reaction-closing h2 {
  font-size:clamp(24px,2.7vw,38px);
  line-height:1.25;
}

.reaction-closing em {
  color:#6b7565;
}

.reaction-link {
  display:flex;
  gap:22px;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  border-bottom:1px solid #c8d0c0;
  font-size:12px;
  white-space:nowrap;
}

.reaction-link span {
  font-size:22px;
  color:#b6381b;
}

.reaction-noscript {
  font-size:13px;
  margin-top:20px;
}

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

[data-scene=energy][data-step="3"][data-view=after] .guest-ring {
  position:absolute;
  top:38%;
  right:19%;
  padding:13px;
  border-radius:50%;
  background:#fff5e5;
  color:#a43a18;
  opacity:0;
  box-shadow:0 0 0 10px #fff5e533;
  transition:opacity .5s;
}

.guest-ring svg {
  width:24px;
  height:24px;
}

[data-scene=guest][data-step="3"][data-view=after] .guest-ring {
  opacity:1;
}

.reaction-tabs small,.reaction-visual-caption,.visual-state {
  font-size:11px;
}

.reaction-steps p,.reaction-result p {
  font-size:13px;
}

.reaction-replay,.view-control button {
  font-size:12px;
}

.reaction-mobile-switch {
  display:none;
}

.reaction-energy-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  stroke:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s;
}

.energy-route-halo,.energy-route-line {
  fill:none;
  stroke-linecap:round;
}

.energy-route-halo {
  stroke:#ffc85f55;
  stroke-width:17;
}

.energy-route-line {
  stroke:#ffe3a4;
  stroke-width:3;
  stroke-dasharray:7 15;
}

.energy-route-node {
  fill:#fff4d1;
  stroke:#cb6b2b;
  stroke-width:3;
}

[data-scene=energy] .reaction-visual {
  background:#eee3d7;
}

[data-scene=guest] .reaction-photo {
  object-fit:contain;
}

[data-scene=guest] .reaction-visual {
  background:#172028;
}

[data-scene=energy][data-step="3"][data-view=after] .reaction-energy-route {
  opacity:1;
}

[data-scene=energy][data-step="3"][data-view=after] .energy-route-line {
  animation:energy-travel 2s linear 3;
}

[data-scene=energy] .marker-one {
  top:31%;
  right:35%;
}

[data-scene=energy] .marker-two {
  top:67%;
  left:auto;
  right:5%;
}

.reaction-entry-glow {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 74% 74%,#ffcc713d,transparent 22%);
  opacity:0;
  transition:opacity 1s;
  mix-blend-mode:screen;
}

[data-scene=guest][data-step="3"][data-view=after] .reaction-entry-glow {
  opacity:1;
}

[data-scene=guest] .marker-one {
  top:34%;
  right:8%;
}

[data-scene=guest] .marker-two {
  top:65%;
  left:8%;
}

.reaction-audio {
  position:absolute;
  top:31%;
  left:8%;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border:1px solid #ffffff66;
  border-radius:10px;
  background:#18281eed;
  color:#fff;
  font-size:11px;
}

[data-scene=away] .reaction-audio {
  display:flex;
}

.audio-bars {
  display:flex;
  align-items:center;
  gap:3px;
  height:20px;
}

.audio-bars i {
  display:block;
  width:3px;
  height:14px;
  background:#ffcaad;
  border-radius:3px;
}

.audio-bars i:nth-child(2) {
  height:20px;
  animation-delay:.2s;
}

.audio-bars i:nth-child(3) {
  height:10px;
  animation-delay:.4s;
}

.audio-bars i:nth-child(4) {
  height:16px;
  animation-delay:.1s;
}

[data-view=before] .audio-bars i {
  animation:audio-level .7s ease-in-out 3 alternate;
}

.audio-paused {
  display:none;
}

[data-view=after] .audio-playing {
  display:none;
}

[data-view=after] .audio-paused {
  display:block;
}

[data-view=after] .audio-bars i {
  height:3px;
}

.reaction-story[hidden] {
  display:flex!important;
  visibility:hidden;
  pointer-events:none;
}

@keyframes energy-travel {
  to {
    stroke-dashoffset:-88;
  }
}

@keyframes audio-level {
  to {
    transform:scaleY(.35);
  }
}

@media(min-width:1700px) {
  .reaction-heading h1 {
    font-size:78px;
  }

  .reaction-visual {
    min-height:620px;
  }

  .reaction-story {
    padding:40px;
  }

  .story-lead,.reaction-steps p,.reaction-result p {
    font-size:13px;
  }

  .reaction-steps h3 {
    font-size:15px;
  }
}

@media(max-width:1100px) {
  .reaction-panel {
    grid-template-columns:1.1fr 1fr;
  }

  .reaction-story {
    padding:26px;
  }

  .reaction-tabs button {
    padding:12px;
    gap:6px;
  }

  .reaction-tabs b {
    display:none;
  }

  .reaction-tabs button>span:nth-child(2) {
    font-size:12px;
  }

  .reaction-visual {
    min-height:580px;
  }

  .visual-bottom p {
    font-size:22px;
  }

  .reaction-footnote>span {
    white-space:normal;
  }

  .visual-marker {
    font-size:11px;
  }

  .reaction-story,.reaction-visual {
    min-height:720px;
  }
}

@media(max-width:800px) {
  .reaction-heading>p {
    max-width:300px;
    font-size:12px;
  }

  .wide-break {
    display:none;
  }

  .reaction-panel {
    grid-template-columns:1fr;
    scroll-margin-top:90px;
  }

  .reaction-visual {
    min-height:0;
    height:480px;
  }

  .reaction-story {
    padding:28px;
    min-height:640px;
    grid-area:2 / 1;
  }

  .reaction-story h2 {
    font-size:34px;
  }

  .story-lead,.reaction-steps p,.reaction-result p {
    font-size:13px;
  }

  .reaction-steps h3 {
    font-size:15px;
  }

  .reaction-steps {
    margin-top:22px;
  }

  .visual-bottom p {
    max-width:420px;
    font-size:27px;
  }

  .visual-marker {
    font-size:12px;
  }

  .reaction-tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    scroll-margin-top:88px;
  }

  .reaction-tabs button {
    min-height:74px;
    padding:12px 16px;
    gap:12px;
  }

  .reaction-tabs b {
    display:block;
  }

  .reaction-tabs button>span:nth-child(2) {
    font-size:14px;
  }

  .reaction-closing {
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
  }

  .reaction-footnote {
    flex-direction:column;
    gap:10px;
  }

  .reaction-mobile-switch {
    display:flex;
    position:absolute;
    right:22px;
    bottom:25px;
    align-items:center;
    gap:9px;
  }

  .reaction-mobile-switch button {
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid #ffffff80;
    background:#142019ed;
    color:#fff;
    font-size:20px;
  }

  .reaction-mobile-switch span {
    font-size:10px;
    color:#fff;
  }

  .reaction-steps li {
    min-height:104px;
  }
}

@media(max-width:480px) {
  .reaction-intro {
    padding-top:16px;
    padding-bottom:26px;
  }

  .reaction-intro-top {
    margin-bottom:20px;
    gap:8px;
    font-size:10px;
  }

  .concept-label {
    font-size:9px;
    padding:4px 8px;
  }

  .reaction-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .reaction-heading h1 {
    font-size:46px;
  }

  .reaction-heading>p {
    font-size:13px;
    max-width:310px;
  }

  .reaction-tabs {
    gap:8px;
    margin-bottom:12px;
  }

  .reaction-tabs button {
    padding:12px 10px;
    gap:8px;
    border-radius:12px;
    min-height:86px;
  }

  .event-icon {
    width:24px;
  }

  .event-icon svg {
    width:23px;
    height:23px;
  }

  .reaction-tabs button>span:nth-child(2) {
    font-size:12px;
  }

  .reaction-tabs small {
    font-size:10px;
  }

  .reaction-tabs b {
    display:none;
  }

  .reaction-panel {
    border-radius:16px;
  }

  .reaction-visual {
    height:420px;
  }

  .reaction-visual-caption {
    top:18px;
    left:16px;
    right:16px;
    font-size:9px;
  }

  .visual-state {
    font-size:9px;
  }

  .visual-bottom {
    bottom:84px;
    left:20px;
    right:20px;
  }

  .visual-bottom p {
    font-size:23px;
    max-width:260px;
  }

  .view-control {
    left:15px;
    bottom:20px;
  }

  .visual-marker {
    font-size:11px;
    padding:9px 11px;
  }

  .marker-one {
    top:29%;
    right:5%;
  }

  .marker-two {
    top:51%;
    left:5%;
  }

  .reaction-story {
    padding:25px 20px 20px;
    min-height:720px;
  }

  .story-top {
    font-size:10px;
    margin-bottom:20px;
  }

  .reaction-story h2 {
    font-size:29px;
  }

  .story-lead,.reaction-steps p,.reaction-result p {
    font-size:12px;
  }

  .reaction-steps h3 {
    font-size:15px;
  }

  .reaction-steps li {
    gap:7px;
    grid-template-columns:21px minmax(0,1fr) 14px;
  }

  .reaction-footnote {
    margin-top:16px;
  }

  .reaction-footnote>span {
    font-size:10px;
  }

  .reaction-closing {
    padding-block:48px;
  }

  .reaction-closing h2 {
    font-size:26px;
  }

  .reaction-closing h2 br {
    display:none;
  }

  .guest-ring {
    top:37%;
    right:17%;
  }

  .reaction-visual-caption,.visual-state {
    font-size:10px;
  }

  .story-lead {
    font-size:14px;
  }

  .reaction-steps p,.reaction-result p {
    font-size:13px;
  }

  .view-control button {
    font-size:11px;
    padding-inline:13px;
  }

  .reaction-mobile-switch {
    right:15px;
    bottom:25px;
    gap:5px;
  }

  .reaction-mobile-switch span {
    display:none;
  }

  .reaction-mobile-switch button {
    width:44px;
    height:44px;
  }

  .reaction-audio {
    left:6%;
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reaction-energy-route,.reaction-entry-glow {
    transition:none;
  }

  .energy-route-line,.audio-bars i {
    animation:none!important;
  }
}

@media(max-width:360px) {
  .reaction-mobile-switch {
    top:58px;
    bottom:auto;
  }

  .visual-marker {
    max-width:88%;
    font-size:10px;
  }

  .reaction-tabs button {
    gap:5px;
  }

  .reaction-tabs button>span:nth-child(2) {
    font-size:11px;
  }
}