.mira-entrance,
.mira-room {
  position: relative;
  width: min(100%, 1000px);
  margin: 0 auto 44px;
  overflow: hidden;
  border: 1px solid rgba(225, 190, 126, .3);
  border-radius: 34px;
  background: #120b12;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 235, 190, .035) inset;
}

.mira-entrance {
  min-height: min(720px, calc(100vh - 80px));
  isolation: isolate;
}

.mira-entrance > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(.92) contrast(1.03);
}

.mira-entrance-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 68% 52%, transparent 0 20%, rgba(10, 7, 11, .12) 42%, rgba(9, 6, 10, .42) 85%),
    linear-gradient(90deg, rgba(8, 6, 10, .94) 0%, rgba(11, 7, 12, .77) 33%, rgba(11, 7, 12, .18) 67%, rgba(8, 5, 9, .28) 100%),
    linear-gradient(0deg, rgba(8, 5, 9, .82), transparent 38%);
}

.mira-entrance-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: inherit;
  width: min(560px, 67%);
  padding: clamp(42px, 7vw, 86px);
}

.mira-entrance-copy h2 {
  margin: .2rem 0 1.25rem;
  font: 500 clamp(3rem, 6vw, 5.8rem)/.95 Georgia, serif;
  letter-spacing: -.05em;
  text-wrap: balance;
  text-shadow: 0 12px 38px #000;
}

.mira-entrance-copy > p:not(.kicker) {
  max-width: 500px;
  margin: 0 0 1.65rem;
  color: #ddcbb8;
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}

.mira-entrance-copy small {
  max-width: 440px;
  margin-top: 15px;
  color: #b8a591;
  line-height: 1.55;
}

.mira-room { overflow: visible; }

.mira-room-scene {
  position: relative;
  min-height: 535px;
  overflow: hidden;
  border-radius: 33px 33px 0 0;
  isolation: isolate;
}

.mira-room-scene > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  filter: saturate(.92) contrast(1.04);
}

.mira-room-scene-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 72% 43%, transparent 0 24%, rgba(13, 8, 13, .1) 51%, rgba(8, 5, 9, .48) 100%),
    linear-gradient(90deg, rgba(9, 6, 10, .91), rgba(10, 7, 11, .62) 35%, transparent 64%),
    linear-gradient(0deg, #160d17 0%, transparent 40%);
}

.mira-room-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 54px);
}

.mira-room-heading h2 {
  max-width: 520px;
  margin: .2rem 0 0;
  font: 500 clamp(2.8rem, 6vw, 5.5rem)/.95 Georgia, serif;
  letter-spacing: -.045em;
  text-shadow: 0 12px 38px #000;
}

.mira-room-close {
  min-height: 42px;
  padding: .65rem .95rem;
  border: 1px solid rgba(238, 212, 164, .34);
  border-radius: 999px;
  color: #e5d3bc;
  background: rgba(16, 10, 16, .66);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.mira-room-intro {
  position: absolute;
  left: clamp(30px, 5vw, 54px);
  bottom: 44px;
  width: min(480px, 49%);
  margin: 0;
  color: #ddc9b5;
  font: 1.08rem/1.65 Georgia, serif;
  text-shadow: 0 4px 20px #000;
}

.mira-room-console {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 22px;
  margin-top: -18px;
  padding: clamp(24px, 5vw, 52px);
  border-radius: 28px 28px 33px 33px;
  background:
    radial-gradient(circle at 86% 8%, rgba(151, 83, 73, .13), transparent 31%),
    linear-gradient(160deg, #241522, #160d17 55%, #100a11);
  box-shadow: 0 -24px 58px rgba(7, 4, 7, .48);
}

.mira-timebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(218, 180, 110, .2);
  border-radius: 16px;
  background: rgba(7, 5, 8, .32);
  transition: border-color .25s ease, background .25s ease;
}
.mira-timebar > div { display: grid; gap: 2px; min-width: 128px; }
.mira-timebar span { color: #a99383; font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.mira-timebar strong { color: #ead09b; font: 500 1.22rem/1.2 Georgia, serif; font-variant-numeric: tabular-nums; }
.mira-timebar p { margin: 0; color: #9f8c80; font-size: .76rem; line-height: 1.5; text-align: right; }
.mira-timebar.ending { border-color: rgba(224, 153, 99, .55); background: rgba(115, 48, 40, .18); }
.mira-timebar.ending strong { color: #efb589; }
.mira-timebar.expired { border-color: rgba(185, 116, 105, .4); background: rgba(91, 43, 48, .18); }
.mira-timebar.expired strong { color: #d9afa1; }

.mira-session-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0 0 22px;
  list-style: none;
  border-bottom: 1px solid rgba(222, 185, 119, .16);
}

.mira-session-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8f7c73;
  font-size: .78rem;
  letter-spacing: .02em;
}

.mira-session-progress span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(224, 187, 118, .2);
  border-radius: 50%;
  font-size: .68rem;
}

.mira-session-progress li.active,
.mira-session-progress li.complete { color: #e8c98e; }
.mira-session-progress li.active span { border-color: #dab46e; background: rgba(218, 180, 110, .14); box-shadow: 0 0 24px rgba(218, 180, 110, .13); }
.mira-session-progress li.complete span { color: #24130f; background: #d8b36d; }

.mira-transcript {
  display: grid;
  gap: 12px;
  max-height: 410px;
  overflow: auto;
  padding: 4px 5px 4px 0;
  scroll-behavior: smooth;
  scrollbar-color: rgba(218, 180, 110, .38) transparent;
}

.mira-bubble {
  max-width: 78%;
  padding: 17px 19px;
  border: 1px solid rgba(225, 190, 126, .14);
  border-radius: 6px 20px 20px;
  color: #e9d8c6;
  background: rgba(255, 255, 255, .042);
  line-height: 1.68;
  white-space: pre-wrap;
}

.mira-bubble::before {
  content: 'Mira';
  display: block;
  margin-bottom: 5px;
  color: #d9b773;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mira-bubble.user {
  justify-self: end;
  border-radius: 20px 6px 20px 20px;
  color: #f4e6d6;
  background: rgba(111, 49, 74, .32);
}
.mira-bubble.user::before { content: 'Du'; color: #c9aa8e; }

.mira-room-status {
  margin: -7px 0 0;
  color: #b6a193;
  font-size: .84rem;
}

.mira-voice-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(218, 180, 110, .22);
  border-radius: 14px;
  background: rgba(7, 5, 8, .34);
}
.mira-voice-controls > span { color: #cdb8a4; font-size: .82rem; }
.mira-voice-controls > div { display: flex; gap: 8px; }
.mira-voice-controls .paper-button { color: #f1dfc9; border-color: rgba(222, 185, 119, .25); background: rgba(255,255,255,.04); }

.mira-answer,
.mira-followup {
  display: grid;
  gap: 13px;
  padding: clamp(19px, 3vw, 27px);
  border: 1px solid rgba(222, 185, 119, .2);
  border-radius: 22px;
  background: rgba(8, 5, 9, .32);
}

.mira-answer-tools {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mira-answer-tools > span { color: #aa9688; font-size: .78rem; line-height: 1.45; }
.mira-mic {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: .65rem .9rem;
  border: 1px solid rgba(222, 185, 119, .3);
  border-radius: 999px;
  color: #ead9c6;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
}
.mira-mic > span { color: #c85d5d; font-size: .7rem; }
.mira-mic.recording { border-color: #d88975; background: rgba(160, 55, 49, .22); animation: miraMicPulse 1.5s ease-in-out infinite; }
.mira-mic.recording > span { color: #ff9b8c; }
.mira-mic:disabled { opacity: .45; cursor: not-allowed; }

.mira-answer label { color: #d7c4b1; }
.mira-answer label small { margin-left: 8px; color: #9d897e; font-weight: 400; }
.mira-answer textarea,
.mira-followup textarea {
  width: 100%;
  resize: vertical;
  padding: 15px 16px;
  border: 1px solid rgba(222, 185, 119, .23);
  border-radius: 14px;
  outline: none;
  color: #f7eadb;
  background: #0e090f;
  line-height: 1.55;
}
.mira-answer textarea:focus,
.mira-followup textarea:focus { border-color: #d7b26c; box-shadow: 0 0 0 3px rgba(215, 178, 108, .1); }
.mira-answer .gold-button,
.mira-followup .gold-button { justify-self: start; }
.mira-lay-cards { justify-self: center; }

.mira-shuffle-ritual {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 300px;
  padding: 34px;
  align-content: center;
  text-align: center;
  border: 1px solid rgba(222, 185, 119, .18);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 38%, rgba(132, 67, 90, .22), transparent 52%), rgba(8, 5, 9, .36);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.mira-shuffle-ritual[hidden] { display: none; }
.mira-shuffle-ritual strong { color: #ead9c6; font: 500 clamp(1.35rem, 3vw, 2rem)/1.25 Georgia, serif; }
.mira-shuffle-ritual > span { max-width: 520px; color: #aa9688; line-height: 1.55; }
.mira-shuffle-ritual.is-speaking { border-color: rgba(222, 185, 119, .44); box-shadow: 0 0 36px rgba(148, 83, 94, .14); }

.mira-card-stage,
.mira-reading-stage,
.mira-clarifier {
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(222, 185, 119, .2);
  border-radius: 25px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(127, 57, 80, .22), transparent 50%),
    rgba(8, 5, 9, .42);
}
.mira-card-stage h3,
.mira-clarifier h3,
.mira-followup h3,
.mira-story h3 { margin: .2rem 0 .65rem; font: 500 clamp(1.9rem, 4vw, 3.1rem)/1.05 Georgia, serif; }
.mira-card-stage > p:not(.kicker),
.mira-clarifier > p:not(.kicker) { color: #bca797; }

.mira-deck-fan,
.mira-clarifier-deck {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 285px;
  margin: 15px auto 8px;
  padding: 52px 30px 18px;
}
.mira-deck-fan .deck-card { width: clamp(90px, 12vw, 124px); margin: 0 clamp(-30px, -2.5vw, -17px); }
.mira-clarifier-deck .deck-card { width: clamp(98px, 13vw, 122px); margin: 0 -16px; }

.mira-reading-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 300px;
  align-content: center;
}
.mira-reading-loading span { max-width: 560px; color: #a99486; }
.mira-story { text-align: left; }
.mira-story > header { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: end; }
.mira-story > header .kicker { grid-column: 1; }
.mira-story > header h3 { grid-column: 1; }
.mira-story > header > span { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 8px 11px; border: 1px solid rgba(222,185,119,.22); border-radius: 999px; color: #d9b773; font-size: .76rem; }
.mira-narration-beat { margin: 24px 0 10px; padding: 12px 15px; border: 1px solid rgba(222,185,119,.16); border-radius: 13px; color: #d8c2ad; background: rgba(255,255,255,.025); font-size: .88rem; line-height: 1.5; }
.mira-revealed-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 30px 0; }
.mira-revealed-cards .revealed-card-wrap { width: min(175px, 29%); }
.mira-revealed-cards .revealed-card-wrap { position: relative; transition: opacity .38s ease, transform .38s ease, filter .38s ease; }
.mira-revealed-cards .revealed-card-wrap.is-waiting { min-height: 278px; opacity: .76; }
.mira-revealed-cards .revealed-card-wrap.is-waiting > * { opacity: 0; transform: rotateY(78deg) scale(.94); }
.mira-revealed-cards .revealed-card-wrap.is-waiting::after {
  content: '☾';
  position: absolute;
  inset: 0 0 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(222, 185, 119, .42);
  border-radius: 12px;
  color: #d6b36f;
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 177, 106, .16), transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 3px, transparent 3px 8px),
    #24101d;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 6px rgba(8,5,9,.28);
  font-size: 2rem;
}
.mira-revealed-cards .revealed-card-wrap.is-revealed { animation: mira-card-turn-in .62s cubic-bezier(.2,.8,.2,1) both; }
.mira-revealed-cards .revealed-card-wrap.is-speaking .revealed-card { box-shadow: 0 0 0 2px rgba(222,185,119,.55), 0 16px 34px rgba(0,0,0,.42); }
.mira-story-opening { margin: 32px 0; padding: 23px 25px; border-left: 2px solid #d2aa64; color: #ead8c4; background: rgba(255,255,255,.035); font: 1.13rem/1.75 Georgia, serif; }
.mira-story-chapters { display: grid; gap: 0; }
.mira-story-chapter { display: grid; grid-template-columns: 37px 1fr; gap: 13px; padding: 20px 0; border-top: 1px solid rgba(222,185,119,.14); transition: padding .3s ease, background .3s ease, border-color .3s ease; }
.mira-story-chapter.is-speaking { padding-inline: 14px; border-color: rgba(222,185,119,.38); border-radius: 12px; background: rgba(210,170,100,.07); }
.mira-story-chapter > span { padding-top: 4px; color: #af8e59; font-size: .68rem; }
.mira-story-chapter h4 { margin: 0 0 6px; color: #ead9c6; font: 500 1.18rem/1.3 Georgia, serif; }
.mira-story-chapter p { margin: 0; color: #cdb9a7; line-height: 1.72; }
.mira-story-chapter.conclusion { margin-top: 12px; padding: 22px; border: 1px solid rgba(222,185,119,.22); border-radius: 17px; background: rgba(123,63,64,.12); }

@keyframes mira-card-turn-in {
  from { opacity: .32; transform: translateY(12px) rotateY(68deg) scale(.94); }
  to { opacity: 1; transform: none; }
}

.mira-after-reading { display: grid; gap: 16px; }
.mira-followup { grid-template-columns: 1fr auto; align-items: end; }
.mira-followup > div { grid-column: 1 / -1; }
.mira-followup h3 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.mira-followup p { margin: 0; color: #ad998b; }
.mira-followup textarea { min-height: 86px; }
.mira-followup .gold-button { align-self: stretch; }
.mira-clarifier-button { justify-self: start; }
.mira-clarifier-result { display: grid; grid-template-columns: minmax(130px, 180px) 1fr; gap: 25px; align-items: center; margin-top: 24px; text-align: left; }
.mira-clarifier-result .revealed-card-wrap { width: 100%; }
.mira-clarifier-result p { color: #d2beab; line-height: 1.7; }
.mira-clarifier-result strong { color: #e9cd98; }

.mira-room-finish { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }
.mira-room-finish .text-button { padding: .8rem 1rem; color: #cbb6a4; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.mira-session-ended {
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid rgba(218, 180, 110, .24);
  border-radius: 24px 8px 24px 8px;
  background: linear-gradient(145deg, rgba(90, 43, 55, .24), rgba(8, 5, 9, .35));
}
.mira-session-ended h3 { margin: .25rem 0 .75rem; color: #ead9c6; font: 500 clamp(1.9rem, 4vw, 3rem)/1.05 Georgia, serif; }
.mira-session-ended > p:not(.kicker) { max-width: 680px; margin: 0 0 18px; color: #c9b3a2; line-height: 1.7; }
.mira-session-ended small { display: block; margin-top: 11px; color: #99857a; }
.mira-room-privacy { margin: 10px auto 0; max-width: 760px; color: #806f68; font-size: .73rem; line-height: 1.55; text-align: center; }

@keyframes miraMicPulse { 50% { box-shadow: 0 0 0 8px rgba(216, 137, 117, .08); } }

@media (max-width: 760px) {
  .mira-entrance,
  .mira-room { width: 100%; border-radius: 24px; }
  .mira-entrance { min-height: 700px; }
  .mira-entrance > img { object-position: 67% center; }
  .mira-entrance-shade { background: linear-gradient(0deg, rgba(8,5,9,.98) 0%, rgba(8,5,9,.83) 43%, rgba(8,5,9,.08) 78%), linear-gradient(90deg, rgba(8,5,9,.38), transparent); }
  .mira-entrance-copy { align-content: end; width: 100%; min-height: inherit; padding: 34px 24px 38px; }
  .mira-entrance-copy h2 { font-size: clamp(2.75rem, 13vw, 4.4rem); }
  .mira-entrance-copy > p:not(.kicker) { font-size: 1.04rem; }
  .mira-room-scene { min-height: 520px; border-radius: 23px 23px 0 0; }
  .mira-room-scene > img { object-position: 67% center; }
  .mira-room-scene-shade { background: linear-gradient(0deg, #160d17 0%, rgba(11,7,12,.75) 35%, rgba(11,7,12,.02) 69%), linear-gradient(90deg, rgba(10,6,10,.55), transparent 66%); }
  .mira-room-heading { padding: 23px; }
  .mira-room-heading h2 { margin-top: 285px; font-size: clamp(2.65rem, 12vw, 4.2rem); }
  .mira-room-heading .kicker { position: absolute; top: 24px; left: 23px; }
  .mira-room-close { position: absolute; top: 18px; right: 18px; font-size: .76rem; }
  .mira-room-intro { left: 23px; right: 23px; bottom: 26px; width: auto; font-size: .98rem; }
  .mira-room-console { margin-top: -10px; padding: 24px 17px 30px; border-radius: 18px 18px 23px 23px; }
  .mira-timebar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .mira-timebar p { text-align: left; }
  .mira-session-progress { overflow-x: auto; grid-template-columns: repeat(4, minmax(92px, 1fr)); padding-bottom: 16px; }
  .mira-session-progress li { font-size: .68rem; }
  .mira-bubble { max-width: 92%; padding: 15px; }
  .mira-voice-controls { align-items: stretch; flex-direction: column; }
  .mira-voice-controls > div { display: grid; grid-template-columns: 1fr 1fr; }
  .mira-answer-tools { align-items: flex-start; flex-direction: column; }
  .mira-answer .gold-button,
  .mira-followup .gold-button { width: 100%; justify-self: stretch; }
  .mira-deck-fan { justify-content: flex-start; min-height: 260px; margin-inline: -20px; padding-inline: max(52px, calc((100vw - 280px) / 2)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
  .mira-deck-fan .deck-card { flex: 0 0 92px; width: 92px; margin: 0 -25px; scroll-snap-align: center; }
  .mira-clarifier-deck { justify-content: flex-start; min-height: 255px; margin-inline: -20px; padding-inline: 44px; overflow-x: auto; }
  .mira-clarifier-deck .deck-card { flex: 0 0 96px; width: 96px; margin: 0 -12px; }
  .mira-story > header { grid-template-columns: 1fr; }
  .mira-story > header > span { grid-column: 1; grid-row: auto; justify-self: start; }
  .mira-revealed-cards { gap: 9px; }
  .mira-revealed-cards .revealed-card-wrap { min-width: 0; width: calc(33.333% - 6px); }
  .mira-revealed-cards .revealed-card-wrap.is-waiting { min-height: 178px; }
  .mira-story-opening { padding: 18px; font-size: 1.02rem; }
  .mira-story-chapter { grid-template-columns: 28px 1fr; }
  .mira-story-chapter.conclusion { grid-template-columns: 1fr; }
  .mira-story-chapter.conclusion > span { display: none; }
  .mira-followup { grid-template-columns: 1fr; }
  .mira-clarifier-result { grid-template-columns: 1fr; justify-items: center; }
  .mira-clarifier-result .revealed-card-wrap { width: 150px; }
}

@media (max-width: 410px) {
  .mira-entrance-copy,
  .mira-room-heading { padding-inline: 19px; }
  .mira-card-stage,
  .mira-reading-stage,
  .mira-clarifier { padding-inline: 16px; }
  .mira-room-finish { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .mira-mic.recording { animation: none; }
  .mira-transcript { scroll-behavior: auto; }
  .mira-revealed-cards .revealed-card-wrap.is-revealed { animation: none; }
  .mira-story-chapter,
  .mira-revealed-cards .revealed-card-wrap { transition: none; }
}

@media print {
  .mira-entrance,
  .mira-room { display: none !important; }
}