/* =========================================================================
   The Mac page's stage (25 Oct 2026). A MacBook screen, drawn: a wallpaper in
   the site's own dawn tones, the menu bar, the notch, and Ishra's cards and
   prayer break, live, drawn to match the app's screenshots. Everything is
   laid out in a 1600x900 frame (a 2x screen) and scaled to fit by
   mac-stage.js (--k), so every size below is a screen pixel.
   ========================================================================= */
.ms { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #050807; box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 40px 120px rgba(0,0,0,0.6);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  --accent: #3E8C7F; --mint: #6CC3A6; --spring: cubic-bezier(0.25, 1.25, 0.45, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1); }
.ms-frame { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform: scale(var(--k, 0.65)); transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; color: #fff; line-height: 1.2; text-align: left; }
.ms-frame h3 { line-height: 1.1; }
.ms-frame button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---- the wallpaper: black, Ishra's green, a dawn of amber low on the screen ---- */
.ms-wall { position: absolute; inset: 0;
  background:
    radial-gradient(1800px 640px at 50% 116%, rgba(250,190,132,0.95), rgba(232,150,96,0.45) 36%, rgba(200,110,70,0.12) 60%, transparent 76%),
    radial-gradient(900px 620px at 6% 78%, rgba(65,169,124,0.50), transparent 66%),
    radial-gradient(900px 640px at 96% 66%, rgba(62,140,127,0.46), transparent 66%),
    radial-gradient(1000px 500px at 50% 0%, rgba(40,110,96,0.32), transparent 70%),
    linear-gradient(180deg, #030807 0%, #061814 46%, #0e2f27 72%, #1d3a2c 100%); }
.ms-wall::after { content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- the menu bar ---- */
.ms-menubar { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 0 34px; font-size: 26px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.mb-l, .mb-r { display: flex; align-items: center; gap: 32px; }
.mb-l b { font-weight: 700; }
.mb-apple { width: 30px; height: 34px; margin-right: 4px; }
.mb-r { gap: 30px; }
.mb-r svg { width: 34px; height: 34px; }
.mb-r .mb-ishra { width: 30px; height: 30px; }
.mb-r b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- the notch, always there ---- */
.ms-notch-shape { position: absolute; left: 621px; top: 0; width: 358px; height: 62px; background: #000; border-radius: 0 0 22px 22px; }

/* ---- a card: a black shape grows out of the notch, then what is on it fades in ---- */
.ms-card { position: absolute; left: 322px; top: 0; width: 957px; height: 350px; pointer-events: none; }
.ms-shape { position: absolute; inset: 0; box-sizing: border-box; border-radius: 0 0 40px 40px; border: 2px solid rgba(255,255,255,0.22); border-top: 0;
  background: #000; box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  /* closed, it is exactly the notch; it grows on the GPU, so nothing is laid out while it moves */
  transform-origin: 50% 0; transform: scale(0.3741, 0.1772); opacity: 0;
  transition: transform 0.28s var(--ease), opacity 0s 0.28s; will-change: transform; }
.ms-card.on .ms-shape { transform: none; opacity: 1; transition: transform 0.42s var(--spring), opacity 0s; }
.ms-body { position: absolute; inset: 0; opacity: 0; visibility: hidden; border-radius: 0 0 40px 40px; overflow: hidden;
  transition: opacity 0.1s, visibility 0s 0.1s; }
.ms-card.on { pointer-events: auto; }
.ms-card.on .ms-body { opacity: 1; visibility: visible; transition: opacity 0.22s 0.12s, visibility 0s; }
.ms-shape::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.2s;
  background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(10,40,33,0.85) 78%, rgba(22,70,58,0.9) 100%); }
.ms-card.on .ms-shape::after { opacity: 1; transition: opacity 0.3s 0.08s; }
.ms-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ms-head { position: absolute; z-index: 2; left: 34px; right: 34px; top: 12px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.ms-brand { display: flex; align-items: center; gap: 10px; color: var(--mint); font-size: 22px; font-weight: 600; opacity: 0.9; }
.ms-brand .ms-logo { width: 26px; height: 26px; }
.ms-more { display: flex; gap: 5px; padding: 8px 4px; }
.ms-more i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.ms-tabs { display: flex; gap: 6px; }
.ms-tab { font: inherit; font-size: 21px; font-weight: 600; color: rgba(255,255,255,0.55); background: none; border: none; padding: 6px 20px; border-radius: 999px; cursor: pointer; }
.ms-tab.on { background: #fff; color: #000; }
.ms-tab:not(.on):hover { color: #fff; }
.ms-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.ms-pane { position: absolute; inset: 0; transition: opacity 0.22s; }
.ms-pane[hidden] { display: block; opacity: 0; visibility: hidden; }
.ms-now-name { position: absolute; left: 36px; top: 74px; display: flex; align-items: center; gap: 14px; font-size: 60px; font-weight: 700; letter-spacing: -0.02em; }
.ms-now-name svg { width: 30px; height: 30px; color: var(--mint); }
.ms-now-next { position: absolute; left: 36px; top: 168px; display: flex; align-items: center; gap: 12px; font-size: 25px; color: rgba(255,255,255,0.6); }
.ms-now-next svg { width: 24px; height: 24px; color: rgba(255,255,255,0.6); }
.ms-orb { position: absolute; right: 42px; top: 50px; width: 180px; height: 180px; }
.ms-foot { position: absolute; left: 36px; right: 36px; bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 20px; line-height: 1.4; color: rgba(255,255,255,0.42); }

.ms-row { position: absolute; left: 36px; right: 36px; top: 84px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ms-cell { font: inherit; color: inherit; border: none; padding: 0; height: 150px; border-radius: 24px; background: rgba(255,255,255,0.09);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.ms-cell svg { width: 30px; height: 30px; color: rgba(255,255,255,0.85); pointer-events: none; }
.ms-cell b { font-size: 21px; font-weight: 600; color: rgba(255,255,255,0.8); pointer-events: none; }
.ms-cell span { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ms-cell:hover { background: rgba(255,255,255,0.16); }
.ms-cell:active { transform: scale(0.96); }
.ms-cell.dim { opacity: 0.45; cursor: default; }
.ms-cell.dim:hover { background: rgba(255,255,255,0.09); }
.ms-cell.cur { background: var(--mint); color: #062018; }
.ms-cell.cur:hover { background: #80d2b6; }
.ms-cell.cur svg, .ms-cell.cur b { color: #0b3a2c; }
.ms-cell:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

.ms-big { position: absolute; font-size: 60px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.ms-sub { position: absolute; font-size: 26px; color: rgba(255,255,255,0.62); white-space: nowrap; }
.ms-sub em { font-style: normal; color: var(--mint); }
.ms-glyph { position: absolute; color: var(--mint); }
.ms-glyph > svg { width: 100%; height: 100%; }
.ms-pill { position: absolute; font: inherit; border: none; cursor: pointer; border-radius: 999px; font-weight: 600; }
.ms-pill.got { right: 36px; top: 140px; height: 48px; padding: 0 26px; font-size: 22px; background: var(--mint); color: #062018; }
.ms-pill.chip { top: 204px; height: 42px; padding: 0 20px; font-size: 19px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.ms-pill:hover { filter: brightness(1.1); }
.ms-pill:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.ms-bar { position: absolute; left: 44px; right: 44px; bottom: 30px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
.ms-bar i { position: absolute; inset: 0; background: var(--mint); transform-origin: 0 0; }
.ms-card.on .ms-bar i { animation: msDrain 6s linear 0.3s forwards; }
@keyframes msDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ms-eye .lid { transform-box: fill-box; transform-origin: 50% 50%; animation: msBlink 3.2s ease-in-out infinite; }
@keyframes msBlink { 0%, 40%, 52%, 100% { transform: scaleY(1); } 46% { transform: scaleY(0.08); } }
.ms-spine { animation: msRise 2.6s ease-in-out infinite; }
@keyframes msRise { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } }

/* ---- the prayer break: the whole screen ---- */
.ms-break { position: absolute; inset: 0; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s 0.7s; overflow: hidden; z-index: 4; }
.ms-break.on { opacity: 1; visibility: visible; transition: opacity 0.7s ease, visibility 0s; }
.ms-break-bg { position: absolute; inset: 0;
  background:
    radial-gradient(520px 260px at 24% 46%, rgba(214,140,60,0.20), transparent 70%),
    radial-gradient(600px 300px at 80% 40%, rgba(214,140,60,0.14), transparent 70%),
    radial-gradient(1000px 640px at 50% 28%, #12342d 0%, #091915 55%, #040908 100%); }
.ms-break-tint { display: none; }
.ms-break-orb { position: absolute; left: 670px; top: 57px; width: 260px; height: 260px; }
.ms-break h3 { position: absolute; left: 0; right: 0; top: 276px; font-size: 64px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.ms-break .when { position: absolute; left: 0; right: 0; top: 352px; font-size: 24px; color: rgba(255,255,255,0.6); }
.ms-glass { position: absolute; left: 605px; top: 413px; width: 390px; height: 165px; box-sizing: border-box; border-radius: 28px;
  background: rgba(255,255,255,0.10); border: 1.5px solid rgba(255,255,255,0.26); }
.ms-glass small { position: absolute; left: 0; right: 0; top: 27px; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); }
.ms-glass b { position: absolute; left: 0; right: 0; top: 54px; font-size: 74px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.ms-glass i { position: absolute; left: 51px; bottom: 28px; width: 288px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
.ms-glass i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #6CC3A6, #A8E8C8); transform-origin: 0 0; transform: scaleX(var(--left, 1)); transition: transform 1s linear; }
.ms-prayed { position: absolute; left: 736px; top: 621px; width: 128px; height: 38px; font: inherit; font-size: 18px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: var(--accent); color: #E8FFF6; cursor: pointer; }
.ms-chips { position: absolute; left: 0; right: 0; top: 677px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.ms-chips button { font: inherit; font-size: 17px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; padding: 4px 13px; cursor: pointer; }
.ms-chips button.skip { background: none; border: none; color: rgba(255,255,255,0.5); font-weight: 500; }
.ms-break .hint { position: absolute; left: 0; right: 0; top: 724px; font-size: 15px; color: rgba(255,255,255,0.38); }
.ms-prayed:hover, .ms-chips button:hover { filter: brightness(1.15); }
.ms-prayed:focus-visible, .ms-chips button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the notch is where you hover ---- */
.ms-notch { position: absolute; left: 621px; top: 0; width: 358px; height: 62px; border: none; background: transparent; cursor: pointer; padding: 0; z-index: 3; border-radius: 0 0 22px 22px; }
.ms-notch:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.ms.open .ms-notch { pointer-events: none; }

.scene-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; margin: 30px auto 0; max-width: 1040px; }
.scene-tab { font: inherit; font-size: 15px; font-weight: 500; color: var(--faint); background: none; border: none; cursor: pointer;
  padding: 8px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.scene-tab:hover { color: var(--muted); }
.scene-tab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--gold); }
.scene-caption { text-align: center; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 600px; margin: 14px auto 0; min-height: 52px; }
@media (max-width: 640px) { .ms { border-radius: 12px; } .scene-tabs { gap: 2px 18px; } .scene-tab { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .ms-shape, .ms-card.on .ms-shape { transform: none; transition: opacity 0.2s; }
  .ms-body, .ms-card.on .ms-body { transition: opacity 0.2s, visibility 0s; }
  .ms-eye .lid, .ms-spine { animation: none; }
}