.mirror-scene {
  --mirror-gold: #cba96b;
  --mirror-line: #79545b;
  --mirror-soft: #cfb4b0;
  --mirror-ease: cubic-bezier(.2,.7,.2,1);
  position: relative;
  max-width: 1140px;
  margin: 36px auto 60px;
  padding: clamp(24px, 4vw, 56px);
  color: var(--paper, #f3e7d1);
  background: radial-gradient(ellipse at 75% 46%, #381820 0%, #190d12 62%);
  border: 1px solid #513037;
  overflow: hidden;
  isolation: isolate;
}
.mirror-scene *, .mirror-scene *::before, .mirror-scene *::after {box-sizing: border-box}
.mirror-scene .mirror-heading {max-width: 700px; margin: 0 0 30px}
.mirror-scene .mirror-kicker {margin: 0 0 14px; color: var(--signal, #ef8591); font: 400 10px/1.6 var(--mono, monospace); letter-spacing: .13em; text-transform: uppercase}
.mirror-scene h3 {margin: 0 0 14px; color: var(--paper, #f3e7d1); font: 500 clamp(34px, 4vw, 52px)/1.04 var(--serif, Georgia, serif); letter-spacing: -.025em}
.mirror-scene .mirror-heading > p:last-child {margin: 0; max-width: 570px; color: var(--mirror-soft); font: 400 15px/1.7 var(--sans, sans-serif)}
.mirror-scene .mirror-button {display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-width: 44px; min-height: 48px; max-width: 100%; border: 1px solid #cb596b; border-radius: 0; padding: 12px 20px; color: #fff2df; background: #a2263b; box-shadow: 0 4px 0 #521323, inset 0 1px 0 #d66273; font: 600 13px/1.4 var(--sans, sans-serif); text-align: center; cursor: pointer; touch-action: manipulation; transition: transform 180ms, box-shadow 180ms, background 180ms, opacity 280ms}
.mirror-scene .mirror-button:hover {background: #b52e46; transform: translateY(-1px)}
.mirror-scene .mirror-button:active {transform: translateY(3px); box-shadow: 0 1px 0 #521323, inset 0 1px 0 #d66273}
.mirror-scene .mirror-button:focus-visible {outline: 3px solid #f0ba8c; outline-offset: 5px}
.mirror-scene .mirror-button:disabled {cursor: default; opacity: .66; transform: none; box-shadow: none}
.mirror-scene .mirror-secondary {background: #39232b; border-color: #906c73; box-shadow: 0 4px 0 #160b10, inset 0 1px 0 #705059}
.mirror-scene .mirror-secondary:hover {background: #49303a}
.mirror-scene .mirror-button[aria-pressed='true'] {border-color: var(--mirror-gold); background: #623038; box-shadow: inset 0 -3px 0 var(--mirror-gold)}
.mirror-scene .mirror-controls, .mirror-scene .mirror-mode-controls, .mirror-scene .mirror-uncover-controls {display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px}
.mirror-scene .mirror-feedback {min-height: 3.5em; margin: 28px auto 0; max-width: 740px; color: #ead3c7; font: 400 14px/1.65 var(--sans, sans-serif); text-align: center}
.mirror-scene .mirror-ending {margin-top: 12px; text-align: center}
.mirror-scene .mirror-ending > p {max-width: 740px; margin: 0 auto 25px; color: var(--signal, #ef8591); font: 500 clamp(25px, 3vw, 35px)/1.24 var(--serif, Georgia, serif)}
.mirror-scene .mirror-caption {margin: 28px auto 0; max-width: 690px; font: 400 10px/1.7 var(--mono, monospace); color: var(--mirror-soft); text-align: center}
.mirror-scene .mirror-ambient {animation: mirror-drift 4.6s ease-in-out infinite alternate; animation-play-state: paused}
.mirror-scene.is-running .mirror-ambient {animation-play-state: running}
@keyframes mirror-drift {from {opacity: .4; transform: translateY(1px)} to {opacity: 1; transform: translateY(-2px)}}

.mirror-scene .mirror-book {display: grid; grid-template-columns: 1fr 1fr; gap: 3px; position: relative; padding: 9px; border: 1px solid #694038; background: #472b2b; box-shadow: 0 18px 36px #08050855; transform: rotate(-.45deg)}
.mirror-scene .mirror-book::after {content: ''; position: absolute; width: 20px; left: calc(50% - 10px); top: 9px; bottom: 9px; background: linear-gradient(90deg, transparent, #3c22192b 48%, #170c1022 50%, transparent); pointer-events: none}
.mirror-scene .mirror-page {position: relative; padding: clamp(20px, 3vw, 34px); color: var(--ink, #30161c); background: #ebdbc0; overflow: hidden}
.mirror-scene .mirror-page-top {display: flex; justify-content: space-between; gap: 10px; margin: 0 0 22px; color: #6f4547; font: 400 10px/1.6 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase}
.mirror-scene .mirror-page-title {margin: 0 0 10px; font: 500 clamp(28px, 3vw, 40px)/1.1 var(--serif, Georgia, serif)}
.mirror-scene .mirror-terms {min-height: 3.4em; margin: 0; max-width: 290px; font: 400 12px/1.7 var(--sans, sans-serif); color: #70504b}
.mirror-scene .mirror-account-line {display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid #bfa28c; margin-bottom: 22px; padding-top: 12px; font: 400 10px/1.5 var(--mono, monospace)}
.mirror-scene .mirror-account-line strong {font-weight: 400; color: #8b263b; text-align: right}
.mirror-scene .mirror-page > .mirror-button {width: 100%; min-height: 54px}
.mirror-scene .mirror-report-tray {height: 170px; display: flex; justify-content: center; align-items: center; position: relative}
.mirror-scene .mirror-report {width: 83px; height: 105px; padding: 14px 12px; display: block; color: #8e684f; background: #f6ead5; border: 1px solid #c4a78b; box-shadow: 2px 4px 6px #472b2b22; transition: transform 650ms var(--mirror-ease), opacity 450ms; transform: rotate(-6deg)}
.mirror-scene .mirror-report-two {margin-left: -19px; transform: translateY(12px) rotate(8deg)}
.mirror-scene .mirror-report b {font: 400 10px var(--mono, monospace)}
.mirror-scene .mirror-report em {display: block; height: 1px; margin-top: 12px; background: #c3a38b}
.mirror-scene .mirror-report.is-delivered {transform: translateY(-28px) rotate(0deg) scale(.88); opacity: .24}
.mirror-scene .mirror-report.is-delivered::after {content: '✓'; display: block; margin: -30px auto 0; width: 32px; color: #8b263b; font-size: 35px; font-style: normal}
.mirror-scene .mirror-stamp {position: absolute; top: 47%; left: 50%; padding: 14px 11px; border: 3px double #8b263b; color: #8b263b; font: 400 16px var(--mono, monospace); letter-spacing: .08em; opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(1.6); pointer-events: none; transition: opacity 250ms, transform 420ms var(--mirror-ease)}
.mirror-scene .mirror-account.is-settled .mirror-stamp {opacity: .88; transform: translate(-50%,-50%) rotate(-12deg) scale(1)}
.mirror-scene .mirror-favor-records {height: 170px; position: relative; padding-top: 18px}
.mirror-scene .mirror-original-claim {position: relative; z-index: 2; border-bottom: 1px solid #a02e40; padding: 0 0 8px; color: #8b263b; font: 500 20px/1.2 var(--serif, Georgia, serif)}
.mirror-scene .mirror-original-claim::after {content: ''; position: absolute; bottom: -2px; left: 0; width: 32%; height: 3px; background: #a2263b; opacity: .45; animation: mirror-claim 4s ease-in-out infinite alternate; animation-play-state: paused}
.mirror-scene.is-running .mirror-original-claim::after {animation-play-state: running}
@keyframes mirror-claim {to {width: 78%; opacity: .9}}
.mirror-scene .mirror-return {display: flex; justify-content: space-between; gap: 8px; color: #6a4d44; font: 400 11px/1.5 var(--mono, monospace); border-bottom: 1px solid #cbb49e; padding: 8px 0 5px; opacity: 0; transform: translateX(28px); transition: opacity 420ms, transform 650ms var(--mirror-ease)}
.mirror-scene .mirror-return.is-returned {opacity: 1; transform: translateX(0)}
.mirror-scene .mirror-denied-receipt {position: absolute; z-index: 3; bottom: 6px; left: 0; right: 0; padding: 11px; border: 1px solid #a2263b; color: #852639; background: #f4e3cb; text-align: center; font: 500 18px/1.2 var(--serif, Georgia, serif); opacity: 0; transform: rotate(4deg) translateY(30px); transition: opacity 350ms, transform 650ms var(--mirror-ease)}
.mirror-scene .mirror-account.is-denied .mirror-denied-receipt {opacity: 1; transform: rotate(-2deg) translateY(0)}

.mirror-scene .mirror-grid-table {position: relative; margin: 0 auto; max-width: 830px; border: 1px solid #93654f; color: #30161c; background: #ecddc4; overflow: hidden}
.mirror-scene .mirror-grid-labels {display: grid; grid-template-columns: 31% 69%; background: #dac5a8; padding: 13px 20px; color: #6b4641; font: 400 10px/1.5 var(--mono, monospace); text-transform: uppercase; letter-spacing: .1em}
.mirror-scene .mirror-life-row {display: grid; grid-template-columns: 31% 69%; min-height: 114px; border-top: 1px solid #bca28c}
.mirror-scene .mirror-life-object {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-right: 1px solid #bca28c; padding: 12px; font: 400 10px/1.5 var(--mono, monospace); text-align: center}
.mirror-scene .mirror-life-object svg {display: block; width: 80px; height: 56px; fill: none; stroke: #8a4c3e; stroke-width: 1.5}
.mirror-scene .mirror-life-entry {position: relative; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; font: 500 clamp(20px, 2.2vw, 28px)/1.15 var(--serif, Georgia, serif)}
.mirror-scene .mirror-life-original {transition: transform 600ms var(--mirror-ease), opacity 350ms}
.mirror-scene .mirror-life-metric {position: absolute; inset: 0; padding: 22px 24px; display: flex; align-items: center; color: #84283a; opacity: 0; transform: translateX(22px); transition: transform 600ms var(--mirror-ease), opacity 450ms}
.mirror-scene .mirror-life-strip {font: 400 10px/1.45 var(--mono, monospace); color: #765046; border-top: 1px dashed #b08a78; margin-top: 10px; padding-top: 8px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(20px) rotate(-2deg); transition: max-height 600ms var(--mirror-ease), opacity 500ms, transform 650ms var(--mirror-ease)}
.mirror-scene.is-filtered .mirror-life-original {opacity: 0; transform: translateX(-20px)}
.mirror-scene.is-filtered .mirror-life-metric {opacity: 1; transform: translateX(0)}
.mirror-scene.is-filtered .mirror-life-strip {max-height: 45px; opacity: .8; transform: translateY(16px) rotate(-1deg)}
.mirror-scene .mirror-life-row.is-restored .mirror-life-original {opacity: 1; transform: translateX(0)}
.mirror-scene .mirror-life-row.is-restored .mirror-life-metric {opacity: 0; transform: translateX(20px)}
.mirror-scene .mirror-life-row.is-restored .mirror-life-strip {opacity: 1; transform: translateY(0); color: #634838; border-color: #97734d}
.mirror-scene .mirror-filter-rule {position: absolute; z-index: 2; pointer-events: none; top: 39px; bottom: 0; width: 4px; left: 31%; background: #a2263b; box-shadow: 0 0 16px #a2263b55; transform-origin: top; transition: left 700ms var(--mirror-ease), opacity 300ms; animation: mirror-drift 4.6s ease-in-out infinite alternate; animation-play-state: paused}
.mirror-scene.is-running .mirror-filter-rule {animation-play-state: running}
.mirror-scene.is-filtered .mirror-filter-rule {left: calc(100% - 4px)}
.mirror-scene.is-restored .mirror-filter-rule {opacity: 0}
.mirror-scene .mirror-discarded {margin: 26px auto 0; max-width: 830px; padding: 20px; border: 1px dashed #6d4e55; text-align: center}
.mirror-scene .mirror-restore-controls {display: flex; flex-wrap: wrap; gap: 12px; justify-content: center}
.mirror-scene .mirror-restore-controls .mirror-button {flex: 1 1 180px}

.mirror-scene .mirror-mode-controls {justify-content: flex-start; margin: 0 0 24px}
.mirror-scene .mirror-subject-stage {position: relative; margin: 0 auto; max-width: 760px; min-height: 335px; padding-top: 67px; overflow: hidden}
.mirror-scene .mirror-justification {position: absolute; z-index: 3; inset: 0 0 auto; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px; text-align: center; background: linear-gradient(120deg, #372129f5, #24131cf5); border: 1px solid #79545b; transition: height 650ms var(--mirror-ease), background 650ms, padding 650ms}
.mirror-scene .mirror-justification > p {max-width: 600px; margin: 0 0 15px; font: 500 clamp(29px, 4vw, 45px)/1.13 var(--serif, Georgia, serif); transition: font-size 650ms var(--mirror-ease), margin 650ms}
.mirror-scene .mirror-quote-mark {font: 500 90px/.5 var(--serif, Georgia, serif); color: var(--signal, #ef8591); height: 35px; opacity: .85; visibility: visible; animation: mirror-drift 4.6s ease-in-out infinite alternate; animation-play-state: paused; transition: height 400ms, opacity 280ms, transform 280ms, visibility 0s 280ms}
.mirror-scene.is-running .mirror-quote-mark {animation-play-state: running}
.mirror-scene .mirror-small {font: 400 10px/1.6 var(--mono, monospace); color: var(--mirror-soft); transition: opacity 280ms, max-height 400ms; max-height: 40px}
.mirror-scene.is-uncovered .mirror-justification {height: 57px; padding: 10px 20px; background: #39232b}
.mirror-scene.is-uncovered .mirror-justification > p {font-size: 21px; margin: 0}
.mirror-scene.is-uncovered .mirror-quote-mark {height: 0; opacity: 0; visibility: hidden; overflow: hidden; transform: translateY(-12px); animation: none}
.mirror-scene.is-uncovered .mirror-small {opacity: 0; max-height: 0; overflow: hidden}
.mirror-scene .mirror-minutes {position: relative; min-height: 268px; padding: 25px 32px 28px; background: #ebdbc0; color: #30161c; opacity: .3; transform: translateY(16px); transition: opacity 550ms, transform 650ms var(--mirror-ease)}
.mirror-scene.is-uncovered .mirror-minutes {opacity: 1; transform: translateY(0)}
.mirror-scene .mirror-minutes .mirror-page-top {margin-bottom: 10px}
.mirror-scene .mirror-record-action {margin: 0 0 18px; font: 500 25px/1.2 var(--serif, Georgia, serif)}
.mirror-scene .mirror-record-row {display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); border-top: 1px solid #bfa28c; padding: 12px 0; gap: 10px; font: 400 11px/1.5 var(--mono, monospace)}
.mirror-scene .mirror-record-row > span:first-child {color: #6d4546}
.mirror-scene .mirror-redaction {display: block; position: relative; padding-right: 8px}
.mirror-scene .mirror-redaction::after {content: ''; position: absolute; z-index: 1; inset: -2px 0; background: #382027; opacity: 1; visibility: visible; transform-origin: right center; transition: transform 550ms var(--mirror-ease), opacity 550ms var(--mirror-ease), visibility 0s 550ms}
.mirror-scene .mirror-redaction.is-revealed::after {transform: scaleX(0); opacity: 0; visibility: hidden}
.mirror-scene .mirror-response-line {border-top: 1px solid #a56f60; padding-top: 14px; margin-top: 5px; color: #8b263b; font: 500 19px/1.3 var(--serif, Georgia, serif); opacity: 0; transform: translateY(10px); transition: opacity 450ms, transform 600ms var(--mirror-ease)}
.mirror-scene.is-complete .mirror-response-line {opacity: 1; transform: translateY(0)}
.mirror-scene .mirror-record-corner {position: absolute; width: 17px; height: 17px; right: 0; bottom: 0; background: linear-gradient(135deg,#c7aa8e 50%,#190d12 51%)}
.mirror-scene .mirror-uncover-controls {max-width: 760px; margin-left: auto; margin-right: auto}
.mirror-scene .mirror-uncover-controls .mirror-button {flex: 1 1 200px}

@media (max-width: 700px) {
  .mirror-scene {margin: 28px 0 40px; padding: 25px 20px}
  .mirror-scene .mirror-book {transform: none; padding: 5px}
  .mirror-scene .mirror-page {padding: 20px 16px}
  .mirror-scene .mirror-page-title {font-size: 29px}
  .mirror-scene .mirror-page-top {font-size: 9px; letter-spacing: .03em}
  .mirror-scene .mirror-terms {min-height: 5em}
  .mirror-scene .mirror-life-entry {padding: 16px}
  .mirror-scene .mirror-life-metric {padding: 16px}
  .mirror-scene .mirror-grid-labels {padding: 12px}
  .mirror-scene .mirror-minutes {padding: 23px 22px}
  .mirror-scene .mirror-record-row {grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 6px}
}
@media (max-width: 480px) {
  .mirror-scene .mirror-book {grid-template-columns: 1fr; gap: 8px}
  .mirror-scene .mirror-book::after {display: none}
  .mirror-scene .mirror-page {padding: 23px}
  .mirror-scene .mirror-terms {min-height: 0}
  .mirror-scene .mirror-report-tray, .mirror-scene .mirror-favor-records {height: 150px}
  .mirror-scene .mirror-life-row {grid-template-columns: 29% 71%; min-height: 134px}
  .mirror-scene .mirror-grid-labels {grid-template-columns: 29% 71%}
  .mirror-scene .mirror-life-object {padding: 8px 5px}
  .mirror-scene .mirror-life-object svg {width: 63px; height: 54px}
  .mirror-scene .mirror-life-entry {font-size: 21px; padding: 14px}
  .mirror-scene .mirror-life-metric {padding: 14px}
  .mirror-scene .mirror-life-strip {font-size: 9px}
  .mirror-scene .mirror-record-row {display: block; padding: 10px 0}
  .mirror-scene .mirror-redaction {margin-top: 7px}
  .mirror-scene .mirror-record-action {font-size: 23px}
  .mirror-scene .mirror-mode-controls .mirror-button {flex: 1 1 100px; padding: 12px 10px}
  .mirror-scene.is-uncovered .mirror-justification > p {font-size: 19px}
}
@media (prefers-reduced-motion: reduce) {
  .mirror-scene *, .mirror-scene *::before, .mirror-scene *::after {animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important}
}
@media print {
  .mirror-scene {break-inside: avoid; color: #000; background: #fff; border: 1px solid #777; margin: 18px 0; padding: 20px}
  .mirror-scene .mirror-button, .mirror-scene .mirror-feedback, .mirror-scene .mirror-discarded, .mirror-scene .mirror-filter-rule, .mirror-scene .mirror-uncover-controls, .mirror-scene .mirror-mode-controls {display: none !important}
  .mirror-scene .mirror-ending {display: block !important}
  .mirror-scene .mirror-ending > p, .mirror-scene h3, .mirror-scene .mirror-kicker, .mirror-scene .mirror-caption, .mirror-scene .mirror-heading > p:last-child {color: #000}
  .mirror-scene .mirror-book {box-shadow: none; transform: none}
  .mirror-scene .mirror-justification {display: none}
  .mirror-scene .mirror-subject-stage {padding: 0; min-height: 0}
  .mirror-scene .mirror-minutes {opacity: 1; transform: none}
  .mirror-scene .mirror-redaction::after {display: none}
  .mirror-scene .mirror-response-line {opacity: 1; transform: none}
}