/* ============================================================
   The Mirror — 60-second reflective letter
   ============================================================ */

body.mirror-page { background: #0B0B0E; }

.mirror { max-width: 720px; margin: 0 auto; padding: 160px 24px 100px; }
.mirror-h { font-size: clamp(2.4rem, 5.6vw, 3.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 22px 0 22px; color: var(--ink-1); }
.mirror-lede { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 56px; }

.mirror-pick { display: flex; flex-direction: column; gap: 14px; }
.mirror-opt { display: flex; gap: 18px; align-items: baseline; padding: 28px 28px; border: 1px solid var(--line-1); border-radius: 16px; background: transparent; color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; transition: border-color 240ms ease, background 240ms ease, transform 240ms ease; }
.mirror-opt:hover { border-color: var(--line-3); background: rgba(255,255,255,0.02); transform: translateY(-1px); }
.mirror-opt-num { font-size: 13px; color: var(--ink-4); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.06em; min-width: 28px; }
.mirror-opt-text { font-size: 1.125rem; line-height: 1.4; font-weight: 400; color: var(--ink-1); }

.mirror-reading { padding: 60px 0 0; }
.mirror-reading-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 1.875rem); line-height: 1.55; color: #EDE8DC; min-height: 50vh; text-wrap: pretty; }
.mirror-controls { display: inline-flex; gap: 12px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line-1); }
.mirror-pause, .mirror-restart { padding: 10px 18px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-1); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.mirror-pause:hover, .mirror-restart:hover { color: var(--ink-1); border-color: var(--line-3); }

.mirror-finish { padding: 80px 0 0; text-align: center; border-top: 1px solid var(--line-1); margin-top: 60px; }
.mirror-finish-h { font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; line-height: 1.15; color: var(--ink-1); margin: 18px 0 24px; }
.mirror-finish-sub { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; margin: 0 0 36px; }
.mirror-app { color: #4DA3FF; font-size: 15px; font-weight: 500; }