.mirror-page { max-width: 1220px; padding-bottom: 48px; }
.mirror-page section { border-top: 1px solid var(--merch-line); padding-top: clamp(22px, 5vw, 52px); }
.mirror-page h1 { font: 300 clamp(53px, 9vw, 106px)/.98 var(--font-serif); letter-spacing: -.06em; margin: 8px 0 13px; }
.mirror-intro { max-width: 56ch; font-size: clamp(15px, 2vw, 18px); }
.mirror-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin: 23px 0 17px; }
.mirror-controls label { display: grid; flex: 1 1 12rem; grid-template-columns: 1fr auto; align-items: baseline; gap: 5px 10px; font-size: 13px; }
.mirror-controls :is(select, input, button) { min-height: 44px; font: inherit; accent-color: var(--merch-rust); }
.mirror-controls :is(select, input) { grid-column: 1 / -1; width: 100%; }
.mirror-controls :is(select, button) { padding: 6px 11px; border: 1px solid #a9927c; background: #fff9ef; color: var(--merch-ink); }
.mirror-controls :is(select, input, button):focus-visible { outline: 3px solid var(--merch-rust); outline-offset: 2px; }
.mirror-controls button { cursor: pointer; }
.mirror-controls output { font-variant-numeric: tabular-nums; }
.mirror-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 24px); margin: 18px 0; }
.mirror-stage figure { margin: 0; min-width: 0; }
.mirror-panel { display: grid; place-items: center; padding: 6%; aspect-ratio: 4 / 3; background: radial-gradient(ellipse at 32% 28%, #f2debc, #be9e81 70%, #947365); }
.mirror-panel img { display: block; width: 100%; height: auto; border: 1px solid #bea68a; box-shadow: 8px 12px 20px #4732294d; }
.mirror-cylinder { width: 66%; padding: 10% 9%; border-radius: 13% / 7%; background: linear-gradient(90deg, #514642, #b6ad9f 12%, #ded5c0 18%, #8c8177 42%, #f0e1c3 75%, #70615b); box-shadow: 10px 13px 20px #4732295c; }
.mirror-cylinder canvas { display: block; width: 100%; height: auto; border: 1px solid #917760; background: #efe4d2; }
.mirror-stage figcaption { padding-top: 8px; font-size: 13px; }
.mirror-stage figcaption strong { margin-right: 6px; color: var(--merch-rust); font-variant-numeric: tabular-nums; }
#mirror-status { color: #795341; font-size: 13px; }
.mirror-foot { max-width: 72ch; border-top: 1px solid var(--merch-line); padding-top: 13px; margin-top: 18px; font-size: 13px; }
@media (max-width: 580px) { .mirror-stage { grid-template-columns: 1fr; } }