/* classroom.css */
/* Jalees Classroom: the live room, from studyhall/public/style.css (light theme).
   Sizes are the app's own pixel values times --u, so the whole room scales as one
   screenshot would. Timeline: see vignettes/classroom.mjs (10 s; rests at 8.5 s). */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* The loop's clock, in seconds. Its resting value is the frame shown without motion. */
@property --crt { syntax: '<number>'; inherits: true; initial-value: 8.5; }

.v.v-classroom {
  --bg: #f6f2ea; --panel: #fffdf9; --panel-2: #f3ede2; --panel-3: #ece5d8;
  --text: #1d1915; --muted: #6a6153; --border: #e0d7c8;
  --accent: #b94a2a; --accent-2: #8f4114; --accent-3: #c8862f; --accent-soft: #f6e4da;
  --grad: linear-gradient(135deg, #d0623a 0%, #c4502e 50%, #9a4318 100%);
  --tutor: #3f8f7a; --ok: #4a7a3d; --ok-soft: #e7efdf; --bad: #a83b26; --bad-soft: #f6e1db;
  --mid: #a87a2c; --mid-soft: #f5ecd9; --live: #c0392b;
  --shadow-sm: 0 1px 2px rgb(45 30 15 / 0.06);
  --shadow: 0 1px 2px rgb(45 30 15 / 0.05), 0 8px 24px -8px rgb(45 30 15 / 0.12);
  --u: .8px;
  --crt: 8.5;
  container-type: inline-size;
  display: flex; flex-direction: column; padding: 0; min-height: 360px; height: 100%;
  color: var(--text); background: var(--bg);
  font: 400 calc(15 * var(--u))/1.6 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; text-align: start;
  animation: cr-clock 10s linear infinite;
}
@keyframes cr-clock { from { --crt: 0; } to { --crt: 10; } }
.v-classroom *, .v-classroom *::before, .v-classroom *::after { box-sizing: border-box; }
.v-classroom :is(h1, h2, h3, p) { margin: 0; color: inherit; font-family: inherit; }
.v-classroom .muted { color: var(--muted); }
.v-classroom .small { font-size: calc(13.44 * var(--u)); }
.v-classroom bdi { unicode-bidi: isolate; }

.v-classroom .cr-app {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; font-size: calc(15 * var(--u));
  background: radial-gradient(70% 45% at 100% -10%, #f3e2d3 0%, transparent 60%), radial-gradient(60% 40% at -10% 110%, #efe6d4 0%, transparent 55%), var(--bg);
}
.v-classroom[dir="rtl"] .cr-app { font-size: calc(16 * var(--u)); line-height: 1.8; }

/* ---------- stage head */
.v-classroom .cr-stage-head { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); background: color-mix(in srgb, var(--panel) 70%, transparent); flex: none; }
.v-classroom .cr-stage-title { display: flex; align-items: center; gap: calc(14.4 * var(--u)); min-width: 0; }
.v-classroom .cr-title-text { min-width: 0; }
.v-classroom .cr-stage-head h2 { margin-top: .1em; font-size: calc(19.2 * var(--u)); font-weight: 750; line-height: 1.25; letter-spacing: -.015em; white-space: nowrap; }
.v-classroom[dir="rtl"] :is(.cr-stage-head h2, h3) { letter-spacing: 0; }
.v-classroom .cr-presence { position: relative; flex: none; border-radius: 50%; padding: calc(3 * var(--u)); background: var(--panel-3); }
.v-classroom .cr-presence::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); opacity: 0; animation: cr-spin 2.4s linear infinite, cr-speaking 10s linear infinite; }
.v-classroom .cr-presence .cr-avatar { position: relative; border: 2px solid var(--panel); }
.v-classroom .cr-eyebrow { display: flex; align-items: center; gap: .45em; font-size: calc(11.52 * var(--u)); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--live); line-height: 1.6; white-space: nowrap; }
.v-classroom[dir="rtl"] .cr-eyebrow { letter-spacing: 0; text-transform: none; }
.v-classroom .cr-eyebrow bdi { text-transform: none; }
.v-classroom .cr-speaking-note { color: var(--accent); text-transform: none; letter-spacing: 0; font-weight: 600; opacity: 0; animation: cr-speaking 10s linear infinite; }
.v-classroom .cr-live-dot { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--live); animation: cr-beacon 1.8s infinite; }
@keyframes cr-beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 70% { box-shadow: 0 0 0 calc(7 * var(--u)) transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.v-classroom[dir="rtl"] .cr-presence::before { animation-direction: reverse, normal; }
@keyframes cr-speaking { 0%, 38% { opacity: 0; } 40%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }

.v-classroom .cr-actions { display: flex; align-items: center; gap: calc(9.6 * var(--u)); flex: none; }
.v-classroom .cr-swap { display: grid; }
.v-classroom .cr-swap > * { grid-area: 1 / 1; justify-self: end; }
.v-classroom .cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; font-weight: 600; font-size: calc(14.72 * var(--u)); line-height: 1.6; color: var(--text); background: var(--panel); border: 1px solid var(--border); padding: .55em 1.05em; border-radius: calc(11 * var(--u)); box-shadow: var(--shadow-sm); white-space: nowrap; }
.v-classroom .cr-btn.primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.v-classroom .cr-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.v-classroom .cr-reveal { opacity: 0; visibility: hidden; animation: cr-reveal-btn 10s linear infinite; }
.v-classroom .cr-continue { animation: cr-continue-btn 10s linear infinite; }
@keyframes cr-reveal-btn { 0%, 37.5% { opacity: 1; visibility: visible; } 38%, 100% { opacity: 0; visibility: hidden; } }
@keyframes cr-continue-btn { 0%, 64% { opacity: 0; visibility: hidden; } 66%, 100% { opacity: 1; visibility: visible; } }

/* ---------- progress + stepper */
.v-classroom .cr-progress { height: 3px; background: var(--panel-3); flex: none; }
.v-classroom .cr-progress i { display: block; width: 50%; height: 100%; background: var(--grad); }
.v-classroom .cr-stepper { display: flex; gap: calc(5.6 * var(--u)); list-style: none; margin: 0; padding: calc(9.6 * var(--u)) calc(16 * var(--u)) calc(11.2 * var(--u)); overflow: hidden; border-bottom: 1px solid var(--border); flex: none; }
.v-classroom .cr-stepper li { display: flex; align-items: center; gap: .4em; font-size: calc(12.16 * var(--u)); line-height: 1.6; color: var(--muted); padding: .28em .75em; padding-inline-start: .32em; border-radius: 99px; background: var(--panel-2); white-space: nowrap; flex: none; }
.v-classroom .cr-stepper li span { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--panel-3); font-weight: 700; flex: none; }
.v-classroom .cr-stepper li em { font-style: normal; }
.v-classroom .cr-stepper li.done span { background: var(--ok); color: #fff; }
.v-classroom .cr-stepper li.now { background: var(--accent-soft); color: var(--accent); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.v-classroom .cr-stepper li.now span { background: var(--grad); color: #fff; }

/* ---------- stage: follows the stream, so the newest part sits at the bottom */
.v-classroom .cr-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.v-classroom .cr-scroll { position: absolute; inset-inline: 0; bottom: 0; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); animation: cr-loop 10s linear infinite; }
@keyframes cr-loop { 0% { opacity: 0; } 2.5%, 95% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
.v-classroom .cr-segment > h3 { display: flex; align-items: center; gap: .65em; margin-bottom: .5em; font-size: calc(19.2 * var(--u)); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.v-classroom .cr-seg-num { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: calc(10 * var(--u)); background: var(--grad); color: #fff; font-size: calc(13.12 * var(--u)); flex: none; }
.v-classroom .cr-md p { margin: 0; }
.v-classroom .cr-md strong { font-weight: 700; }
.v-classroom .cr-md.small { font-size: calc(14.4 * var(--u)); }
.v-classroom .cr-icon { width: 1.15em; height: 1.15em; flex: none; }

.v-classroom .cr-check-note { display: inline-flex; align-items: center; gap: .4em; margin-top: calc(9.6 * var(--u)); font-size: calc(12.48 * var(--u)); color: var(--muted); padding: .2em .65em; border-radius: 99px; background: var(--panel-2); }
.v-classroom .cr-check-note.ok { color: var(--ok); background: var(--ok-soft); }
.v-classroom .cr-visualize { margin-top: calc(14.4 * var(--u)); border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 6%, var(--panel)); }

/* ---------- check question */
.v-classroom .cr-question { position: relative; overflow: hidden; margin-top: calc(20.8 * var(--u)); padding: calc(18.4 * var(--u)) calc(20.8 * var(--u)); border: 1px solid var(--border); background: var(--panel); border-radius: calc(18 * var(--u)); box-shadow: var(--shadow); }
.v-classroom .cr-question::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(4 * var(--u)); background: var(--grad); }
.v-classroom .cr-q-label { margin-bottom: calc(7.2 * var(--u)); font-size: calc(11.52 * var(--u)); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.v-classroom[dir="rtl"] .cr-q-label { letter-spacing: 0; text-transform: none; font-size: calc(12.5 * var(--u)); }
.v-classroom .cr-options { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin: calc(11.2 * var(--u)) 0 0; }
.v-classroom .cr-option { display: flex; align-items: center; gap: .45em; width: 100%; padding: .7em .85em; border: 1px solid var(--border); border-radius: calc(13 * var(--u)); background: var(--panel); font-size: calc(14.25 * var(--u)); font-weight: 450; line-height: 1.6; }
.v-classroom .cr-opt-letter { display: inline-grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: calc(9 * var(--u)); background: var(--panel-2); font-weight: 750; font-size: calc(13.44 * var(--u)); flex: none; }
.v-classroom .cr-opt-text { flex: 1; min-width: 0; }
.v-classroom .cr-pickers { display: inline-flex; gap: 2px; animation: cr-pickers 10s linear infinite; }
@keyframes cr-pickers { 0%, 38% { opacity: 0; transform: scale(.5); } 41%, 100% { opacity: 1; transform: none; } }
/* B is Salma's pick (picked, before the reveal) and the right answer (after it). */
.v-classroom .cr-option.is-b { border-color: var(--ok); background: var(--ok-soft); animation: cr-opt-b 10s linear infinite; }
.v-classroom .cr-option.is-b .cr-opt-letter { background: var(--ok); color: #fff; animation: cr-opt-b-letter 10s linear infinite; }
@keyframes cr-opt-b {
  0%, 5.5% { border-color: var(--border); background: var(--panel); box-shadow: none; transform: none; }
  6.5%, 38% { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transform: none; }
  39.5% { border-color: var(--ok); background: var(--ok-soft); box-shadow: none; transform: scale(1.015); }
  41%, 100% { border-color: var(--ok); background: var(--ok-soft); box-shadow: none; transform: none; }
}
@keyframes cr-opt-b-letter {
  0%, 5.5% { background: var(--panel-2); color: var(--text); }
  6.5%, 38% { background: #c4502e; color: #fff; }
  39.5%, 100% { background: var(--ok); color: #fff; }
}

/* folds open and close the way the room grows (grid rows 0fr ↔ 1fr) */
.v-classroom .cr-fold { display: grid; grid-template-rows: 1fr; }
.v-classroom .cr-fold-in { min-height: 0; overflow: hidden; }
.v-classroom .cr-answered-fold { grid-template-rows: 0fr; opacity: 0; animation: cr-fold-answered 10s linear infinite; }
.v-classroom .cr-responses-fold { animation: cr-fold-responses 10s linear infinite; }
.v-classroom .cr-feedback-fold { animation: cr-fold-feedback 10s linear infinite; }
.v-classroom .cr-checking-fold { grid-template-rows: 0fr; opacity: 0; animation: cr-fold-checking 10s linear infinite; }
.v-classroom .cr-corrections-fold { animation: cr-fold-corrections 10s linear infinite; }
.v-classroom .cr-status-fold { grid-template-rows: 0fr; opacity: 0; animation: cr-fold-status 10s linear infinite; }
@keyframes cr-fold-answered { 0%, 37% { grid-template-rows: 1fr; opacity: 1; } 40.5%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes cr-fold-responses { 0%, 38% { grid-template-rows: 0fr; opacity: 0; } 42%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes cr-fold-status { 0%, 39% { grid-template-rows: 0fr; opacity: 0; } 42%, 62% { grid-template-rows: 1fr; opacity: 1; } 65%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes cr-fold-feedback { 0%, 45% { grid-template-rows: 0fr; opacity: 0; } 48.5%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes cr-fold-checking { 0%, 64% { grid-template-rows: 0fr; opacity: 0; } 66.5%, 72% { grid-template-rows: 1fr; opacity: 1; } 73%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes cr-fold-corrections { 0%, 72.5% { grid-template-rows: 0fr; opacity: 0; } 76.5%, 100% { grid-template-rows: 1fr; opacity: 1; } }

/* "Answered:" avatars and the shrinking "Waiting for …", read off the clock */
.v-classroom .cr-answered { display: flex; align-items: center; gap: calc(6.4 * var(--u)); flex-wrap: wrap; margin-top: calc(9.6 * var(--u)); font-size: calc(13.6 * var(--u)); }
.v-classroom .cr-answered-label { opacity: clamp(0, (var(--crt) - .6) * 8, 1); }
.v-classroom .cr-avatar.cr-in { --on: clamp(0, (var(--crt) - var(--at)) * 7, 1); min-width: 0; overflow: hidden; width: calc(var(--on) * 24 * var(--u)); margin-inline-end: calc((var(--on) - 1) * 6.4 * var(--u)); transform: scale(var(--on)); opacity: var(--on); }
.v-classroom .cr-waiting { display: grid; }
.v-classroom .cr-waiting > span { grid-area: 1 / 1; opacity: calc(clamp(0, (var(--crt) - var(--at)) * 30, 1) - clamp(0, (var(--crt) - var(--to)) * 30, 1)); }

/* responses after the reveal */
.v-classroom .cr-responses { display: flex; flex-direction: column; gap: calc(8.8 * var(--u)); margin-top: calc(14.4 * var(--u)); padding-top: calc(14.4 * var(--u)); border-top: 1px dashed var(--border); }
.v-classroom .cr-response { display: flex; gap: calc(8.8 * var(--u)); align-items: flex-start; font-size: calc(14.4 * var(--u)); line-height: 1.6; }
.v-classroom .cr-badge { display: inline-flex; align-items: center; font-size: calc(11.52 * var(--u)); font-weight: 700; padding: .2em .62em; border-radius: 99px; line-height: 1.5; vertical-align: 1px; }
.v-classroom .cr-badge.ok { background: var(--ok-soft); color: var(--ok); }
.v-classroom .cr-badge.bad { background: var(--bad-soft); color: var(--bad); }

/* people */
.v-classroom .cr-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); border-radius: 50%; color: #fff; font-size: calc(var(--s) * .45 * var(--u)); font-weight: 700; line-height: 1; font-style: normal; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); }
.v-classroom .cr-pname { font-weight: 650; }
.v-classroom .cr-tag { font-size: calc(9.92 * var(--u)); font-weight: 750; padding: .08em .42em; border-radius: calc(5 * var(--u)); margin-inline-start: .35em; vertical-align: middle; letter-spacing: .03em; }
.v-classroom .cr-tag.ai { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }
.v-classroom .cr-tag.tutor { background: color-mix(in srgb, var(--tutor) 16%, transparent); color: var(--tutor); }

/* tutor feedback, streamed */
.v-classroom .cr-feedback { margin-top: calc(16 * var(--u)); padding: calc(13.6 * var(--u)) calc(16.8 * var(--u)); background: color-mix(in srgb, var(--tutor) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tutor) 20%, transparent); border-radius: calc(14 * var(--u)); }
.v-classroom .cr-feedback-head { display: flex; align-items: center; gap: .45em; margin-bottom: calc(5.6 * var(--u)); }
.v-classroom .cr-w { font-size: calc(clamp(0, (var(--crt) - var(--at)) * 1000, 1) * 1em); }
.v-classroom .cr-cursor { display: inline-block; width: .5em; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; border-radius: 2px; background: var(--grad); opacity: calc(clamp(0, (var(--crt) - 4.75) * 40, 1) - clamp(0, (var(--crt) - 6.4) * 40, 1)); }

/* the fact-checker */
.v-classroom .cr-checking-fold .cr-check-note { margin-top: calc(9.6 * var(--u)); }
.v-classroom .cr-corrections { margin-top: calc(14.4 * var(--u)); padding: calc(12 * var(--u)) calc(15.2 * var(--u)); border: 1px solid color-mix(in srgb, var(--mid) 40%, var(--border)); background: var(--mid-soft); border-radius: calc(14 * var(--u)); }
.v-classroom .cr-corrections-head { display: flex; align-items: center; gap: .45em; margin-bottom: calc(6.4 * var(--u)); font-size: calc(12.48 * var(--u)); font-weight: 750; color: var(--mid); text-transform: uppercase; letter-spacing: .05em; }
.v-classroom[dir="rtl"] .cr-corrections-head { letter-spacing: 0; text-transform: none; font-size: calc(13.5 * var(--u)); }
.v-classroom .cr-corrections q { font-style: italic; }
.v-classroom .cr-status-line { display: flex; align-items: center; gap: .6em; padding: calc(8 * var(--u)) 0 0; color: var(--muted); font-size: calc(14.4 * var(--u)); }
.v-classroom .cr-spinner { display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: cr-spin .75s linear infinite; flex: none; }

/* ---------- narrow plates (phones) */
@container (max-width: 440px) {
  .v-classroom .cr-app { --u: .74px; }
  .v-classroom .cr-end { display: none; }
  .v-classroom .cr-stage-head h2 { font-size: calc(17 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .v.v-classroom, .v-classroom *, .v-classroom *::before { animation: none !important; }
}

/* dawam.css */
/* Dawam — the Now screen, after rhythm-pwa/src/styles.css (light theme).
   Fonts: the app asks Google for Inter, Cormorant and Amiri. Amiri is already
   self-hosted here; it is re-declared under its own name with the Arabic
   range only, because the app's stacks put Amiri after the Latin face and the
   site's Amiri family also carries Latin glyphs. Inter and Cormorant are not
   available locally: Inter falls back to the system sans (as the app itself
   does offline), Cormorant to Newsreader. */
@font-face {
  font-family: 'Dawam Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Amiri-normal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Dawam Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Amiri-normal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---- root: the app's .dawam (light) ---- */
.v.v-dawam {
  --ink: #1E332C; --muted: #6B8577; --faint: #A8C2B2; --line: #A9CBB4;
  --panel: #F4FAF6; --soft: rgba(107,133,119,.10); --verdigris: #3E8A6C;
  --sans: 'Inter', 'Dawam Amiri', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: 'Cormorant', 'Dawam Amiri', 'Newsreader', Georgia, serif;
  --dir: 1;
  display: block; position: relative; overflow: hidden;
  padding: 14px 16px 24px; min-height: 360px;
  font: 400 16px/1.5 var(--sans); color: var(--ink);
  background: #EAF1EC; text-align: start;
  -webkit-font-smoothing: antialiased;
}
.v.v-dawam[dir="rtl"] { --dir: -1; font-size: 16.64px; line-height: 1.65; }
.v-dawam *, .v-dawam *::before, .v-dawam *::after { box-sizing: border-box; }
.v-dawam p { margin: 0; }
.v-dawam .rv-i { display: block; flex-shrink: 0; }

/* page-bg: the sky's top colour washing into the page */
.v-dawam .rv-page { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,205,148,.42), #EAF1EC 256px); }

/* swapped text: two states stacked in one cell, .a at rest */
.v-dawam .rv-sw { display: inline-grid; }
.v-dawam .rv-sw > span { grid-area: 1 / 1; white-space: nowrap; }
.v-dawam .rv-sw > .b { opacity: 0; }

/* ---- hero card + living sky (SkyScene / Landscape) ---- */
.v-dawam .rv-hero { position: relative; max-width: 600px; margin: 0 auto; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 10px 26px rgba(23,48,39,.10); }
.v-dawam .rv-scene { position: relative; z-index: 0; height: 200px; overflow: hidden; border-radius: 16px 16px 0 0; }
.v-dawam .rv-scape { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, rgb(246,205,148), rgb(235,149,86)); }
.v-dawam .rv-glow { position: absolute; left: 50%; top: 20.3%; width: 178px; height: 178px; margin: -89px 0 0 -89px; border-radius: 50%; background: radial-gradient(circle, rgba(253,226,171,.5), transparent 70%); }
.v-dawam .rv-disc { position: absolute; left: 50%; top: 20.3%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: rgb(253,236,190); box-shadow: 0 0 0 13.2px rgba(253,236,190,.22), 0 0 0 27.7px rgba(253,236,190,.1); }
.v-dawam .rv-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.v-dawam .rv-stext { position: absolute; left: 22px; top: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: #2E2416; }
.v-dawam[dir="rtl"] .rv-stext { left: auto; right: 22px; }
.v-dawam .rv-slabel { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(46,36,22,.72); line-height: 1.5; }
.v-dawam .rv-stime { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1.05; margin-top: 1px; font-variant-numeric: tabular-nums; direction: ltr; }
.v-dawam .rv-sblock { font-size: 14px; font-weight: 600; margin-top: 4px; color: rgba(46,36,22,.85); line-height: 1.5; }
.v-dawam .rv-sar { font-family: 'Dawam Amiri', serif; font-weight: 400; margin-left: 6px; color: rgba(46,36,22,.62); }
.v-dawam .rv-srange { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; color: rgba(46,36,22,.62); line-height: 1.5; }
.v-dawam[dir="rtl"] .rv-slabel { letter-spacing: 0; font-size: 12px; }

/* ---- hero sheet: Now, one thing at a time ---- */
.v-dawam .rv-sheet { position: relative; z-index: 2; margin-top: -22px; background: var(--panel); border-radius: 22px 22px 16px 16px; padding: 24px 16px 4px; min-width: 0; }
.v-dawam .rv-one { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; }
.v-dawam .rv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-dawam .rv-label { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); line-height: 1.5; min-width: 0; }
.v-dawam .rv-label > span { white-space: normal; }
.v-dawam .rv-blk { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; flex-shrink: 0; line-height: 1.5; }
.v-dawam .rv-blk > .a { color: rgb(107,103,92); }  /* Dhuhr accentDeep */
.v-dawam .rv-blk > .b { color: rgb(105,92,59); }   /* Asr accentDeep */
.v-dawam[dir="rtl"] :is(.rv-label, .rv-blk) { letter-spacing: 0; font-size: 12px; }

.v-dawam .rv-stage { display: grid; }
.v-dawam .rv-card { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--soft); border-radius: 12px; padding: 14px 13px; background: var(--panel); }
.v-dawam .rv-card-b { opacity: 0; transform: translateX(calc(var(--dir) * 26px)); align-self: start; }
.v-dawam .rv-check { position: relative; color: var(--verdigris); margin-top: 1px; flex-shrink: 0; width: 22px; height: 22px; }
.v-dawam .rv-check .rv-i { position: absolute; inset: 0; }
.v-dawam .rv-check .x { opacity: 0; }
.v-dawam .rv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v-dawam .rv-title { font-size: 16px; font-weight: 600; color: var(--verdigris); line-height: 1.3; }
.v-dawam .rv-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.v-dawam .rv-prj { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; border-radius: 99px; border: 1px solid rgba(124,92,191,.55); color: #7C5CBF; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.55; white-space: nowrap; }
.v-dawam .rv-fchip > span { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; line-height: 1.5; }
.v-dawam .rv-fchip > .b { color: var(--verdigris); border-color: var(--verdigris); background: rgba(62,138,108,.08); }
.v-dawam[dir="rtl"] :is(.rv-prj, .rv-fchip > span) { letter-spacing: 0; font-size: 11px; }

/* habits waiting on their prayer */
.v-dawam .rv-waiting { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding: 10px 0 14px; border-top: 1px solid var(--soft); }
.v-dawam .rv-wrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--faint); line-height: 1.5; }
.v-dawam .rv-wfor { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); background: var(--soft); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.v-dawam[dir="rtl"] .rv-wrow { font-size: 13px; }
.v-dawam[dir="rtl"] .rv-wfor { letter-spacing: 0; font-size: 11px; }

/* ---- bottom nav (PWA: no Bubbles tab) ---- */
.v-dawam .rv-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center; gap: 8px; padding: 10px 16px; background: rgba(244,250,246,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(23,48,39,.08); }
.v-dawam .rv-nb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 66px; height: 48px; border-radius: 12px; color: var(--faint); min-width: 0; }
.v-dawam .rv-nb.on { color: var(--verdigris); background: rgba(62,138,108,.12); }
.v-dawam .rv-nl { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; line-height: 1.2; white-space: nowrap; }
.v-dawam[dir="rtl"] .rv-nl { letter-spacing: 0; font-size: 11px; }

/* ---- the focus lock: a round on the task, the app locked meanwhile ---- */
.v-dawam .rv-gate { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(23,48,39,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; }
.v-dawam .rv-gcard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 34px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.3); max-width: 100%; }
.v-dawam .rv-geye { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--verdigris); line-height: 1.5; }
.v-dawam .rv-gname { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.2; }
.v-dawam .rv-count { display: block; height: 44px; overflow: hidden; margin: 4px 0; font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--verdigris); font-variant-numeric: tabular-nums; direction: ltr; }
.v-dawam .rv-strip { display: flex; flex-direction: column; }
.v-dawam .rv-strip > span { display: block; height: 1em; }
.v-dawam .rv-gnote { font-size: 13px; color: var(--muted); margin: 10px 0 14px; line-height: 1.5; }
.v-dawam .rv-primary { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px; background: var(--ink); color: #F6FBF8; font-size: 12px; font-weight: 600; line-height: 1.4; }
.v-dawam .rv-ghost { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.v-dawam[dir="rtl"] .rv-geye { letter-spacing: 0; font-size: 12px; }
.v-dawam[dir="rtl"] :is(.rv-gnote, .rv-primary, .rv-ghost) { font-size: 13.5px; }
.v-dawam[dir="rtl"] .rv-gname { font-weight: 700; }

/* ---- narrow plates (phones) ---- */
@media (max-width: 560px) {
  .v.v-dawam { padding-left: 12px; padding-right: 12px; }
  .v-dawam .rv-sheet { padding-left: 14px; padding-right: 14px; }
  .v-dawam .rv-nav { gap: 2px; padding-left: 6px; padding-right: 6px; }
  .v-dawam .rv-gate { padding: 14px; }
  .v-dawam .rv-gcard { padding: 22px 20px 20px; }
  .v-dawam .rv-gname { font-size: 28px; }
}

/* ---- the loop: 10 s ----
   0–3 s    Now at 2:16 PM, Dhuhr: the task, its 25-minute focus target.
   3–3.5 s  the round starts and the app locks (the gate fades in).
   4–6 s    the round counts down; "Finished — tick it off" is pressed.
   6.6–7 s  the gate lifts on 2:41 PM, the chip shows the target met, the
            card is ticked and leaves; Asr has come in, and its prayer is the
            one thing now.
   9.4–10 s Asr fades out, the start fades back in.
   Every keyframe set starts and ends on the resting state, which is also the
   un-animated state, so a paused or reduced-motion plate is the Now screen. */
.v-dawam .rv-gate     { animation: rv-gate 10s linear infinite; }
.v-dawam .rv-gcard    { animation: rv-gcard 10s ease-out infinite; }
.v-dawam .rv-strip    { animation: rv-count 10s linear infinite; }
.v-dawam .rv-primary  { animation: rv-press 10s ease infinite; }
.v-dawam .rv-card-a   { animation: rv-out 10s ease infinite; }
.v-dawam .rv-card-b   { animation: rv-in 10s cubic-bezier(.22,.61,.36,1) infinite; }
.v-dawam .rv-check .o { animation: rv-off 10s linear infinite; }
.v-dawam .rv-check .x { animation: rv-on 10s linear infinite; }
.v-dawam .rv-fchip > .a { animation: rv-chip-a 10s linear infinite; }
.v-dawam .rv-fchip > .b { animation: rv-chip-b 10s linear infinite; }
.v-dawam .rv-sw:not(.rv-fchip) > .a { animation: rv-swap-a 10s ease infinite; }
.v-dawam .rv-sw:not(.rv-fchip) > .b { animation: rv-swap-b 10s ease infinite; }
.v-dawam :is(.rv-stime, .rv-srange, .rv-sblock .rv-sw) > .a { animation-name: rv-early-a; }
.v-dawam :is(.rv-stime, .rv-srange, .rv-sblock .rv-sw) > .b { animation-name: rv-early-b; }
.v-dawam :is(.rv-disc, .rv-glow) { animation: rv-sun 10s ease-in-out infinite; }

@keyframes rv-gate { 0%, 30% { opacity: 0; } 35%, 66% { opacity: 1; } 70.5%, 100% { opacity: 0; } }
@keyframes rv-gcard { 0%, 30% { transform: translateY(10px); } 35%, 100% { transform: none; } }
@keyframes rv-count {
  0%, 41.9% { transform: none; }
  42%, 51.9% { transform: translateY(-1em); }
  52%, 61.9% { transform: translateY(-2em); }
  62%, 99.9% { transform: translateY(-3em); }
  100% { transform: none; }
}
@keyframes rv-press { 0%, 63% { background: #1E332C; transform: none; } 64.5% { background: #2A473D; transform: scale(.96); } 66.5%, 100% { background: #1E332C; transform: none; } }
@keyframes rv-off { 0%, 71.4% { opacity: 1; } 71.5%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes rv-on { 0%, 71.4% { opacity: 0; } 71.5%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes rv-chip-a { 0%, 69.9% { opacity: 1; } 70%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes rv-chip-b { 0%, 69.9% { opacity: 0; } 70%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes rv-out {
  0%, 73% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  75.2% { opacity: 0; transform: translateX(calc(var(--dir) * -26px)); }
  96.5% { opacity: 0; transform: none; }
  99.5%, 100% { opacity: 1; transform: none; }
}
@keyframes rv-in {
  0%, 75.2% { opacity: 0; transform: translateX(calc(var(--dir) * 26px)); }
  77.8%, 94% { opacity: 1; transform: none; }
  96.5%, 100% { opacity: 0; transform: none; }
}
@keyframes rv-swap-a { 0%, 73% { opacity: 1; } 74.5%, 96.5% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes rv-swap-b { 0%, 73% { opacity: 0; } 74.5%, 94% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
/* the clock and the block move on while the round runs, under the gate */
@keyframes rv-early-a { 0%, 63% { opacity: 1; } 65%, 96.5% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes rv-early-b { 0%, 63% { opacity: 0; } 65%, 94% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
/* skyAt(): the disc sits a little lower at 2:41 PM than at 2:16 */
@keyframes rv-sun { 0%, 58% { top: 20.3%; } 66%, 94% { top: 21.7%; } 100% { top: 20.3%; } }

@media (prefers-reduced-motion: reduce) {
  .v-dawam *, .v-dawam *::before, .v-dawam *::after { animation: none !important; }
}

/* mizan.css */
/* Mizan — the top of the app in its dark "Tide" theme, after Mizan/src:
   components/FontLoader.jsx (tokens), theme.js (class colours), NetWorth.jsx and the toast in
   App.jsx. One ground, no cards: the hero sits straight on the deep-teal
   gradient field.
   Font: the app loads Manrope from Google Fonts (200 for figures, 300 for
   prose, 600 for the small caps labels). No copy of Manrope exists on this
   machine, so the stack falls back as the app's own does — to the system
   sans — and uses Manrope only where a visitor has it installed. */

.v.v-mizan {
  --bg-solid: #0C1F33;
  --card: rgba(255,255,255,0.07);
  --line: rgba(234,244,244,0.13);
  --ink: #EAF4F4;
  --muted: #B9CFD1;
  --faint: #9BB4B7;
  --sub2: rgba(255,255,255,0.12);
  --btn-bg: #EAF4F4;
  --btn-fg: #0C1F33;
  --flow-in: #7FE0C4;
  --mz-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --loop: 9s;

  position: relative;
  display: block;
  padding: 0;
  min-height: 360px;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(168deg, #0C1F33 0%, #123B4A 56%, #17565A 100%);
  color: var(--ink);
  font-family: var(--mz-font);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.002em;
  text-align: left;
}
.v-mizan * { box-sizing: border-box; }
.v-mizan p, .v-mizan h4 { margin: 0; }
.v-mizan .mz-field { padding: 2px 16px 18px; }
.v-mizan .mz-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* small caps label: the one place weight goes up */
.v-mizan .mz-lab {
  font-size: 10px; line-height: 15px; text-transform: uppercase; color: var(--faint);
  font-weight: 600; letter-spacing: 0.2em; white-space: nowrap;
}

/* ---- hero ---- */
.v-mizan .mz-hero { padding: 12px 4px 0; }
.v-mizan .mz-hero > .mz-row { margin-bottom: 8px; }
.v-mizan .mz-ghost {
  font-size: 10px; line-height: 15px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.14em;
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap;
}
.v-mizan .mz-swap { display: grid; }
.v-mizan .mz-swap > span { grid-area: 1 / 1; }
.v-mizan .mz-fig {
  font-size: 46.4px; line-height: 1; font-weight: 200; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.v-mizan .mz-sub { margin-top: 10px; font-size: 13px; line-height: 19.5px; font-weight: 300; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* trend */
.v-mizan .mz-trend { margin-top: 12px; }
.v-mizan .mz-trend > .mz-row:first-child { margin-bottom: 4px; }
.v-mizan .mz-ranges { display: flex; gap: 4px; }
.v-mizan .mz-ranges span {
  font-size: 10px; line-height: 15px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 999px; color: var(--faint);
}
.v-mizan .mz-ranges .on { background: var(--btn-bg); color: var(--btn-fg); }
.v-mizan .mz-chg { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--flow-in); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-mizan .mz-spark { position: relative; height: 64px; }
.v-mizan .mz-spark svg { display: block; width: 100%; height: 64px; overflow: visible; }
.v-mizan .mz-dot { position: absolute; right: -3.5px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--flow-in); }
.v-mizan .mz-foot { margin-top: 6px; font-size: 11px; line-height: 16px; font-weight: 300; color: var(--faint); font-variant-numeric: tabular-nums; }
.v-mizan .mz-end { color: var(--ink); text-align: right; }
.v-mizan .mz-end > span { justify-self: end; }

/* liquid / illiquid / liabilities */
.v-mizan .mz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.v-mizan .mz-stats .mz-lab { display: block; letter-spacing: 0.18em; }
.v-mizan .mz-stats b { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-mizan .mz-liab { color: #E08A72; }

/* liquid allocation ribbon */
.v-mizan .mz-alloc { margin-top: 20px; }
.v-mizan .mz-alloc > .mz-row { margin-bottom: 8px; }
.v-mizan .mz-note { font-size: 11px; line-height: 16px; font-weight: 300; color: var(--faint); white-space: nowrap; }
.v-mizan .mz-ribbon { position: relative; display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--sub2); }
.v-mizan .mz-ribbon i { display: block; height: 100%; transform-origin: left; animation: mz-grow 0.7s cubic-bezier(.22,1,.36,1) var(--d, 0s) both; }
.v-mizan .mz-ribbon b { position: absolute; top: 0; width: 2px; height: 6px; background: var(--bg-solid); opacity: 0.85; }
.v-mizan .mz-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.v-mizan .mz-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; font-weight: 300; color: var(--muted); white-space: nowrap; }
.v-mizan .mz-legend i { width: 6px; height: 6px; border-radius: 50%; }

/* the app's toast: a pill of ink rising over the field */
.v-mizan .mz-toast {
  position: absolute; left: 50%; bottom: 6px; z-index: 2;
  padding: 10px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 300 12px/16px var(--mz-font); white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(5,17,28,.7);
  opacity: 0; transform: translate(-50%, 10px);
  animation: mz-toast var(--loop) linear infinite;
}

/* ---- the loop (9 s) ----
   2.7 s: an expense is logged with one tap. The toast rises; the conversions
   line and the trend's last value change at once; the figure runs down the
   way the app's CountUp does (600 ms, ease-out cubic), drawn here as five
   120 ms frames. 8.3–8.7 s: the changed figures dip out and the opening state returns, and round again. */
.v-mizan .mz-was { animation: mz-was var(--loop) linear infinite; }
.v-mizan .mz-now { opacity: 0; animation: mz-now var(--loop) linear infinite; }
.v-mizan .mz-landed { animation-name: mz-landed; }
.v-mizan .mz-tick { opacity: 0; animation: mz-tick var(--loop) linear var(--t) infinite; }

@keyframes mz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mz-toast {
  0%, 29.5% { opacity: 0; transform: translate(-50%, 10px); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  32.6%, 70% { opacity: 1; transform: translate(-50%, 0); }
  73.5%, 100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes mz-was {
  0%, 30% { opacity: 1; }
  30.01%, 94% { opacity: 0; }
  96.5%, 100% { opacity: 1; }
}
@keyframes mz-now {
  0%, 30% { opacity: 0; }
  30.01%, 92% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes mz-landed {
  0%, 35.33% { opacity: 0; }
  35.34%, 92% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes mz-tick {
  0%, 1.33% { opacity: 1; }
  1.34%, 100% { opacity: 0; }
}

/* narrow plates (phones): keep the app's rows on one line */
@container (max-width: 400px) {
  .v-mizan .mz-since { display: none; }
  .v-mizan .mz-field { padding: 2px 12px 18px; }
  .v-mizan .mz-ranges span { padding: 4px 8px; }
  .v-mizan .mz-legend { gap: 4px 12px; }
}
@container (max-width: 320px) {
  .v-mizan .mz-fig { font-size: 40px; }
  .v-mizan .mz-sub { font-size: 12px; }
  .v-mizan .mz-stats { gap: 8px; }
  .v-mizan .mz-stats b { font-size: 13px; }
  .v-mizan .mz-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v-mizan .mz-toast, .v-mizan .mz-now, .v-mizan .mz-was, .v-mizan .mz-tick, .v-mizan .mz-ribbon i { animation: none; }
}

/* mutarjim.css */
/* Mutarjim — the app's own editor, «الورشة», in its light theme («مِحبرة»).
   Tokens, sizes and labels from mutarjim/app/globals.css,
   app/documents/[id]/WorkshopGrid.tsx, FocusPanel.tsx, ViewSwitch.tsx,
   app/components/Nav.tsx and ui.tsx. Loop 9 s; best still at 7200 ms.
   Unanimated (reduced motion) it shows that same still. */

/* The app's faces (SIL Open Font License), from @fontsource. */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexSansArabic-normal-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/NotoKufiArabic-normal-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/NotoKufiArabic-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens (globals.css, light theme) ---------- */
div.v.v-mutarjim {
  --paper: #faf8f4;
  --card: #fffefb;
  --ink: #211d17;
  --muted: #6d6558;
  --rule: #e7e2d8;
  --accent: #1f5347;
  --accent-soft: #e4eee8;
  --warn: #7a5a15;
  --info: #2f5570;
  --tint-machine: #e8dfcc;
  --tint-draft: #f3dc98;
  --tint-final: #c4e2cd;
  --grid-accent: #0f766e;
  --grid-active: color-mix(in srgb, #0f766e 7%, #fffefb);
  --f-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --f-doc: "Amiri", Georgia, "Times New Roman", serif;
  --f-machine: "Noto Kufi Arabic", "IBM Plex Mono", monospace;
  --u: 12.5px; /* the app's rem, scaled to the plate */
  --T: 9s;
  container-type: inline-size;
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--u)/1.5 var(--f-sans);
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.v-mutarjim * { box-sizing: border-box; }
.v-mutarjim p, .v-mutarjim h5 { margin: 0; }
.v-mutarjim .num { font-variant-numeric: tabular-nums; }
.v-mutarjim mark { color: inherit; background: none; }
.v-mutarjim bdi { unicode-bidi: isolate; }

/* ---------- the rail (Nav.tsx, collapsed w-14) ---------- */
.v-mutarjim .mj-rail { flex: none; width: calc(var(--u) * 3.1); display: flex; flex-direction: column; background: var(--card); border-inline-end: 1px solid var(--rule); }
.v-mutarjim .mj-logo { display: grid; place-items: center; height: calc(var(--u) * 3.6); border-bottom: 1px solid var(--rule); }
.v-mutarjim .mj-logo b { display: grid; place-items: center; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: var(--accent); color: #fff; font: 400 calc(var(--u) * 1.15)/1 var(--f-doc); padding-bottom: 2px; }
.v-mutarjim .mj-items { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .25); padding: calc(var(--u) * .5) 0; }
.v-mutarjim .mj-items i { display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.1); border-radius: 6px; color: var(--muted); }
.v-mutarjim .mj-items svg { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }

/* ---------- the page ---------- */
.v-mutarjim .mj-main { flex: 1; min-width: 0; max-height: calc(var(--u) * 33.6); overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * .5); padding: 0 calc(var(--u) * .9); }
.v-mutarjim .mj-main > * { flex-shrink: 0; }

/* Editor header (Editor.tsx): back link, file, kind, view switch, save state, progress. */
.v-mutarjim .mj-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(var(--u) * .65); row-gap: calc(var(--u) * .4); padding: calc(var(--u) * .65) 0 calc(var(--u) * .55); border-bottom: 1px solid var(--rule); }
.v-mutarjim .mj-back { font-size: calc(var(--u) * .875); color: var(--muted); white-space: nowrap; }
.v-mutarjim .mj-file { font-size: calc(var(--u) * 1.1); font-weight: 600; white-space: nowrap; }
.v-mutarjim .mj-badge, .v-mutarjim .mj-bdg { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: 0 calc(var(--u) * .5); background: var(--paper); color: var(--muted); font-size: calc(var(--u) * .75); font-weight: 500; line-height: 1.6; }
.v-mutarjim .mj-views { display: inline-flex; overflow: hidden; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); }
.v-mutarjim .mj-views span { padding: calc(var(--u) * .2) calc(var(--u) * .62); font-size: calc(var(--u) * .75); color: var(--muted); white-space: nowrap; }
.v-mutarjim .mj-views .on { background: var(--accent); color: #fff; font-weight: 500; }
.v-mutarjim .mj-save { margin-inline-start: auto; display: inline-grid; font-size: calc(var(--u) * .75); color: var(--muted); white-space: nowrap; }
.v-mutarjim .mj-save > span { grid-area: 1 / 1; }
.v-mutarjim .mj-progline { display: flex; align-items: center; gap: calc(var(--u) * .75); flex: 1 0 100%; }
.v-mutarjim .mj-prog { flex: 1; height: calc(var(--u) * .375); border-radius: 999px; background: var(--rule); overflow: hidden; }
.v-mutarjim .mj-prog i { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--accent); }
.v-mutarjim .mj-words { font-size: calc(var(--u) * .75); color: var(--muted); white-space: nowrap; }

/* Status chips (.wk-chip). */
.v-mutarjim .mj-chips { display: flex; gap: calc(var(--u) * .375); overflow: hidden; white-space: nowrap; }
.v-mutarjim .mj-chips span { flex: none; border: 1px solid var(--rule); border-radius: 999px; padding: calc(var(--u) * .1) calc(var(--u) * .65); font-size: calc(var(--u) * .75); color: var(--muted); background: var(--card); }
.v-mutarjim .mj-chips b { font-weight: 400; }
.v-mutarjim .mj-chips .on { border-color: var(--grid-accent); background: var(--grid-accent); color: var(--paper); }

/* ---------- the grid (.wk-row etc.) ---------- */
.v-mutarjim .mj-frame { flex: none; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; }
.v-mutarjim .mj-row { display: grid; grid-template-columns: calc(var(--u) * 1.7) minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 6.4) calc(var(--u) * 3.1); gap: calc(var(--u) * .55); align-items: start; padding: calc(var(--u) * .4) calc(var(--u) * .6); }
.v-mutarjim .mj-hd { border-bottom: 1px solid var(--rule); font-size: calc(var(--u) * .78); font-weight: 600; color: var(--muted); padding-block: calc(var(--u) * .35); }
.v-mutarjim .mj-scroll { position: relative; height: calc(var(--u) * 11.6); overflow: hidden; }
.v-mutarjim .mj-rows { transform: translateY(calc(var(--u) * -1.9)); } /* scrolled a little, as the grid would be */
.v-mutarjim .mj-body { border-bottom: 1px solid var(--rule); border-inline-start: 3px solid transparent; }
.v-mutarjim .mj-r14 { background: var(--grid-active); border-inline-start-color: var(--grid-accent); }
.v-mutarjim .mj-num { padding-top: calc(var(--u) * .3); font-size: calc(var(--u) * .78); color: var(--muted); }
.v-mutarjim .mj-text { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-doc); font-size: calc(var(--u) * 1.08); line-height: 1.75; text-align: start; }
.v-mutarjim .mj-en { font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--u) * .92); line-height: 1.6; padding-top: calc(var(--u) * .1); }
.v-mutarjim .mj-machine { font-family: var(--f-machine); font-size: calc(var(--u) * .96); line-height: 1.9; }
.v-mutarjim .mj-empty { color: var(--muted); }
.v-mutarjim .mj-term { border-radius: 3px; padding: 0; }
.v-mutarjim .mj-term14 { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.v-mutarjim .mj-cell { min-width: 0; }
.v-mutarjim .mj-stack { display: grid; }
.v-mutarjim .mj-stack > * { grid-area: 1 / 1; }
.v-mutarjim .mj-state { display: flex; align-items: flex-start; gap: calc(var(--u) * .35); }
.v-mutarjim .mj-pill { display: inline-block; margin-top: calc(var(--u) * .25); padding: 0 calc(var(--u) * .45); border: 1px solid transparent; border-radius: 999px; font-size: calc(var(--u) * .78); font-weight: 600; line-height: 1.6; white-space: nowrap; justify-self: start; }
.v-mutarjim .mj-mt { color: var(--muted); background: var(--tint-machine); }
.v-mutarjim .mj-draft { color: var(--warn); background: var(--tint-draft); }
.v-mutarjim .mj-final { color: var(--accent); background: var(--tint-final); }
.v-mutarjim .mj-new { color: var(--muted); border-color: var(--rule); }
.v-mutarjim .mj-ok { flex: none; display: grid; place-items: center; margin-top: calc(var(--u) * .15); width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border: 1px solid var(--grid-accent); border-radius: 4px; font-size: calc(var(--u) * .8); line-height: 1; color: var(--grid-accent); background: var(--card); }
.v-mutarjim .mj-ok.on, .v-mutarjim .mj-ok13 { background: var(--grid-accent); color: var(--paper); }
.v-mutarjim .mj-match { padding-top: calc(var(--u) * .3); font-size: calc(var(--u) * .82); font-weight: 600; text-align: center; color: var(--muted); }
.v-mutarjim .mj-m100 { color: var(--grid-accent); }
.v-mutarjim .mj-m85, .v-mutarjim .mj-mt-c { color: var(--info); }

/* The row being typed in: RichEditor's box, focused. */
.v-mutarjim .mj-editor { min-width: 0; padding: calc(var(--u) * .1) calc(var(--u) * .4); border: 1px solid var(--accent); border-radius: 4px; box-shadow: 0 0 0 2px rgb(31 83 71 / .35); font-family: var(--f-doc); font-size: calc(var(--u) * 1.08); line-height: 1.75; color: var(--ink); }
.v-mutarjim .mj-w { display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; max-width: 8em; margin-inline-end: .26em; }
.v-mutarjim .mj-w7 { margin-inline-end: 0; }
.v-mutarjim .mj-caret { display: inline-block; vertical-align: top; width: 1.5px; height: 1.3em; margin-top: .25em; background: var(--ink); }

/* ---------- the dock (FocusPanel dock) ---------- */
.v-mutarjim .mj-dock { flex: none; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.v-mutarjim .mj-dk { padding: calc(var(--u) * .75); background: var(--card); border-radius: 8px; }
.v-mutarjim .mj-dk-top { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * .5); margin-bottom: calc(var(--u) * .7); }
.v-mutarjim .mj-dk-top > .num { font-size: calc(var(--u) * .75); font-weight: 600; color: var(--muted); }
.v-mutarjim .mj-sb { border: 1px solid var(--c); color: var(--c); border-radius: 4px; padding: calc(var(--u) * .2) calc(var(--u) * .62); font-size: calc(var(--u) * .75); font-weight: 500; white-space: nowrap; }
.v-mutarjim .mj-sb-draft { --c: var(--warn); }
.v-mutarjim .mj-sb-rev { --c: var(--info); }
.v-mutarjim .mj-sb-fin { --c: var(--accent); }
.v-mutarjim .mj-dr14, .v-mutarjim .mj-fin13 { background: var(--c); color: var(--paper); }
.v-mutarjim .mj-ghost { padding: calc(var(--u) * .2) calc(var(--u) * .5); font-size: calc(var(--u) * .875); font-weight: 500; color: var(--muted); white-space: nowrap; }
.v-mutarjim .mj-cols { display: grid; grid-template-columns: 2.1fr 1fr .8fr; gap: calc(var(--u) * 1); }
.v-mutarjim .mj-cols section { min-width: 0; }
.v-mutarjim .mj-cols h5 { margin-bottom: calc(var(--u) * .375); font-size: calc(var(--u) * .7); font-weight: 600; letter-spacing: .025em; color: var(--muted); }
.v-mutarjim .mj-none { font-size: calc(var(--u) * .75); color: var(--muted); }
.v-mutarjim .mj-gl { display: inline-block; border: 1px solid var(--rule); border-radius: 999px; padding: calc(var(--u) * .1) calc(var(--u) * .5); font-size: calc(var(--u) * .75); background: var(--card); white-space: nowrap; }
.v-mutarjim .mj-tm { border: 1px solid var(--rule); border-radius: 6px; background: var(--card); padding: calc(var(--u) * .6); }
.v-mutarjim .mj-tm-tags { display: flex; gap: calc(var(--u) * .375); }
.v-mutarjim .mj-bdg-acc { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.v-mutarjim .mj-tm-src { margin-top: calc(var(--u) * .35); font-size: calc(var(--u) * .75); line-height: 1.45; color: var(--muted); text-align: left; }
.v-mutarjim .mj-tm-tgt { margin-top: calc(var(--u) * .15); font-family: var(--f-doc); font-size: calc(var(--u) * 1.08); line-height: 1.8; }
.v-mutarjim .mj-btn { display: inline-block; margin-top: calc(var(--u) * .4); border: 1px solid var(--rule); border-radius: 4px; padding: calc(var(--u) * .25) calc(var(--u) * .75); font-size: calc(var(--u) * .875); font-weight: 500; background: var(--card); }

/* Crossfaded pairs start hidden on the "before" side: the still is the "after". */
.v-mutarjim .mj-x1a, .v-mutarjim .mj-x2a, .v-mutarjim .mj-x3a, .v-mutarjim .mj-sv-b { opacity: 0; }

/* ---------- narrower plates ---------- */
@container (max-width: 700px) {
  .v-mutarjim .mj-qa { display: none; }
  .v-mutarjim .mj-cols { grid-template-columns: 1.6fr 1fr; }
}
@container (max-width: 520px) {
  .v-mutarjim .mj-main { --u: 12px; padding-inline: calc(var(--u) * .7); max-height: calc(var(--u) * 39.5); }
  .v-mutarjim .mj-back, .v-mutarjim .mj-chips, .v-mutarjim .mj-c-state, .v-mutarjim .mj-pill, .v-mutarjim .mj-ghost { display: none; }
  .v-mutarjim .mj-row { grid-template-columns: calc(var(--u) * 1.5) minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 1.4) calc(var(--u) * 2.6); gap: calc(var(--u) * .45); padding-inline: calc(var(--u) * .4); }
  .v-mutarjim .mj-hd span:last-child { font-size: 0; }
  .v-mutarjim .mj-hd span:last-child::after { content: "%"; font-size: calc(var(--u) * .78); }
  .v-mutarjim .mj-scroll { height: calc(var(--u) * 15.4); }
  .v-mutarjim .mj-r12 { display: none; }
  .v-mutarjim .mj-rows { transform: none; }
  .v-mutarjim .mj-text, .v-mutarjim .mj-editor { font-size: calc(var(--u) * 1.02); }
  .v-mutarjim .mj-machine { font-size: calc(var(--u) * .9); }
  .v-mutarjim .mj-cols { grid-template-columns: 1fr; gap: calc(var(--u) * .6); }
  .v-mutarjim .mj-qa { display: none; }
}
@container (min-width: 780px) {
  .v-mutarjim .mj-main, .v-mutarjim .mj-rail { --u: 15px; }
  .v-mutarjim .mj-rows { transform: translateY(calc(var(--u) * -1.3)); }
  .v-mutarjim .mj-scroll { height: calc(var(--u) * 10.4); }
}
@container (max-width: 400px) {
  .v-mutarjim .mj-rail { display: none; }
}

/* ---------- the loop (9 s) ----------
   0–16%  #13 open, machine text
   16–19% ✓ pressed: #13 نهائية
   24–28% the grid moves to #14; the dock follows; its memory match fades in
   36–39% #14 becomes مسودة · 89% as typing starts
   38–69% the translation is typed, word by word
   69–92% held (still: 80% = 7200 ms)
   92–97% back to the start */
@keyframes mj-1a { 0%, 16% { opacity: 1; } 19%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes mj-1b { 0%, 16% { opacity: 0; } 19%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mj-2a { 0%, 24% { opacity: 1; } 27%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes mj-2b { 0%, 24% { opacity: 0; } 27%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mj-3a { 0%, 36% { opacity: 1; } 39%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes mj-3b { 0%, 36% { opacity: 0; } 39%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.v-mutarjim .mj-x1a { animation: mj-1a var(--T) ease infinite; }
.v-mutarjim .mj-x1b { animation: mj-1b var(--T) ease infinite; }
.v-mutarjim .mj-x2a { animation: mj-2a var(--T) ease infinite; }
.v-mutarjim .mj-x2b { animation: mj-2b var(--T) ease infinite; }
.v-mutarjim .mj-x3a { animation: mj-3a var(--T) ease infinite; }
.v-mutarjim .mj-x3b { animation: mj-3b var(--T) ease infinite; }

/* The ✓ on #13 fills when pressed. */
@keyframes mj-ok { 0%, 15% { background: var(--card); color: var(--grid-accent); transform: none; } 17% { background: var(--card); color: var(--grid-accent); transform: scale(.86); } 19%, 92% { background: var(--grid-accent); color: var(--paper); transform: none; } 96%, 100% { background: var(--card); color: var(--grid-accent); } }
.v-mutarjim .mj-ok13 { animation: mj-ok var(--T) ease infinite; }
@keyframes mj-fin13 { 0%, 16% { background: transparent; color: var(--c); } 19%, 92% { background: var(--c); color: var(--paper); } 96%, 100% { background: transparent; color: var(--c); } }
.v-mutarjim .mj-fin13 { animation: mj-fin13 var(--T) ease infinite; }

/* The open row moves from #13 to #14. */
@keyframes mj-row13 { 0%, 24% { background: var(--grid-active); border-inline-start-color: var(--grid-accent); } 27%, 92% { background: transparent; border-inline-start-color: transparent; } 96%, 100% { background: var(--grid-active); border-inline-start-color: var(--grid-accent); } }
@keyframes mj-row14 { 0%, 24% { background: transparent; border-inline-start-color: transparent; } 27%, 92% { background: var(--grid-active); border-inline-start-color: var(--grid-accent); } 96%, 100% { background: transparent; border-inline-start-color: transparent; } }
.v-mutarjim .mj-r13 { animation: mj-row13 var(--T) ease infinite; }
.v-mutarjim .mj-r14 { animation: mj-row14 var(--T) ease infinite; }
/* Glossary hits are marked on the open row only. */
@keyframes mj-term13 { 0%, 24% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } 27%, 92% { background: transparent; box-shadow: 0 0 0 2px transparent; } 96%, 100% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } }
@keyframes mj-term14 { 0%, 24% { background: transparent; box-shadow: 0 0 0 2px transparent; } 27%, 92% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } 96%, 100% { background: transparent; box-shadow: 0 0 0 2px transparent; } }
.v-mutarjim .mj-term13 { animation: mj-term13 var(--T) ease infinite; }
.v-mutarjim .mj-term14 { animation: mj-term14 var(--T) ease infinite; }

/* The memory match arrives a beat after the dock. */
@keyframes mj-tm { 0%, 28% { opacity: 0; transform: translateY(5px); } 33%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.v-mutarjim .mj-tm { animation: mj-tm var(--T) ease infinite; }
@keyframes mj-dr14 { 0%, 36% { background: transparent; color: var(--c); } 39%, 92% { background: var(--c); color: var(--paper); } 96%, 100% { background: transparent; color: var(--c); } }
.v-mutarjim .mj-dr14 { animation: mj-dr14 var(--T) ease infinite; }

/* Saving while typing. */
@keyframes mj-sva { 0%, 40% { opacity: 1; } 42%, 72% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes mj-svb { 0%, 40% { opacity: 0; } 42%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
.v-mutarjim .mj-sv-a { animation: mj-sva var(--T) ease infinite; }
.v-mutarjim .mj-sv-b { animation: mj-svb var(--T) ease infinite; }

/* Typing: each word opens from its first letter. */
@keyframes mj-w1 { 0%, 38% { max-width: 0; margin-inline-end: 0; } 41.5%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w2 { 0%, 42.5% { max-width: 0; margin-inline-end: 0; } 46%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w3 { 0%, 47% { max-width: 0; margin-inline-end: 0; } 50.5%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w4 { 0%, 51.5% { max-width: 0; margin-inline-end: 0; } 55%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w5 { 0%, 56% { max-width: 0; margin-inline-end: 0; } 59.5%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w6 { 0%, 60.5% { max-width: 0; margin-inline-end: 0; } 64%, 92% { max-width: 8em; margin-inline-end: .26em; opacity: 1; } 95% { max-width: 8em; margin-inline-end: .26em; opacity: 0; } 96%, 100% { max-width: 0; margin-inline-end: 0; opacity: 0; } }
@keyframes mj-w7 { 0%, 65% { max-width: 0; } 68.5%, 92% { max-width: 8em; opacity: 1; } 95% { max-width: 8em; opacity: 0; } 96%, 100% { max-width: 0; opacity: 0; } }
.v-mutarjim .mj-w1 { animation: mj-w1 var(--T) linear infinite; }
.v-mutarjim .mj-w2 { animation: mj-w2 var(--T) linear infinite; }
.v-mutarjim .mj-w3 { animation: mj-w3 var(--T) linear infinite; }
.v-mutarjim .mj-w4 { animation: mj-w4 var(--T) linear infinite; }
.v-mutarjim .mj-w5 { animation: mj-w5 var(--T) linear infinite; }
.v-mutarjim .mj-w6 { animation: mj-w6 var(--T) linear infinite; }
.v-mutarjim .mj-w7 { animation: mj-w7 var(--T) linear infinite; }
@keyframes mj-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.v-mutarjim .mj-caret { animation: mj-caret 1s steps(1, end) infinite; }

/* raazi.css */
/* Raazi — a Pedia entry with its citation open, in the app's own paper-and-ink
   look. Tokens, sizes and radii follow corpus/app/globals.css and the Tailwind
   classes in the app's components; every length is the app's rem value times
   --r, so the whole window can be shown a little smaller than life. */

/* The app's Arabic face: Amiri, Arabic ranges only, enlarged 112% to sit with
   Georgia — the same rules as corpus/app/globals.css, under its own family
   name so it never takes the site's Latin Amiri. */
@font-face { font-family: "Raazi Amiri"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url('/assets/fonts/Amiri-normal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+10E60-10E7E, U+1EE00-1EEFF; }
@font-face { font-family: "Raazi Amiri"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 112%;
  src: url('/assets/fonts/Amiri-normal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+10E60-10E7E, U+1EE00-1EEFF; }
@font-face { font-family: "Raazi Amiri"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url('/assets/fonts/Amiri-italic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+10E60-10E7E, U+1EE00-1EEFF; }

.v.v-raazi {
  --r: 13px;
  --paper: #fbfaf7; --ink: #1c1a17; --muted: #6b665e; --rule: #e2ddd3;
  --accent: #7a4b2a; --accent-soft: #f0e7dd;
  --serif: "Raazi Amiri", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Raazi Amiri", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --loop: 8s;
  position: relative; container-type: inline-size; overflow: hidden;
  height: 372px; min-height: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font: 400 var(--r)/1.5 var(--sans); letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: auto;
}
.v-raazi * { box-sizing: border-box; }
.v-raazi :is(p, h1, blockquote) { margin: 0; }

/* ---- the rail: Nav.tsx, icons-only width (w-14), as below lg ---- */
.v-raazi .vc-rail {
  position: absolute; inset-block: 0; left: 0; z-index: 3; width: calc(3.5 * var(--r));
  display: flex; flex-direction: column; border-right: 1px solid var(--rule); background: rgba(255,255,255,.8);
}
.v-raazi .vc-logo { display: flex; height: calc(3.5 * var(--r)); flex-shrink: 0; align-items: center; justify-content: center;
  font: 600 calc(1.125 * var(--r))/1 var(--serif); letter-spacing: -.025em; }
.v-raazi .vc-items { display: flex; flex-direction: column; gap: calc(.125 * var(--r)); padding: 0 calc(.375 * var(--r)); }
.v-raazi .vc-item { display: flex; justify-content: center; border-radius: calc(.375 * var(--r)); padding: calc(.625 * var(--r)) calc(.5 * var(--r)); color: var(--muted); }
.v-raazi .vc-item.on { background: var(--accent-soft); color: var(--ink); }
.v-raazi .vc-item svg { width: calc(1.1875 * var(--r)); height: calc(1.1875 * var(--r)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v-raazi .vc-item.on svg { stroke-width: 2; }

/* ---- main: ms-14 px-4 py-6 sm:px-6 sm:py-8, scrolled so the entry's header
   sits at the top of the crop (the Entries/Network strip just above it) ---- */
.v-raazi .vc-main { --pad: calc(1.5 * var(--r)); --scroll: calc(4.5 * var(--r) + 4px);
  margin: calc(-1 * var(--scroll)) 0 0 calc(3.5 * var(--r)); padding: calc(2 * var(--r)) var(--pad) 0; }
.v-raazi .vc-strip { display: flex; gap: calc(.25 * var(--r)); margin: calc(-.25 * var(--r)) 0 calc(1.25 * var(--r)); border-bottom: 1px solid var(--rule); padding-bottom: 1px; overflow: hidden; }
.v-raazi .vc-strip span,
.v-raazi .vc-tabs span { flex-shrink: 0; white-space: nowrap; margin-bottom: -1px; border-bottom: 2px solid transparent; padding: calc(.5 * var(--r)) calc(.75 * var(--r)); font-size: calc(.875 * var(--r)); line-height: calc(1.25 * var(--r)); color: var(--muted); }
.v-raazi .vc-strip .on { border-color: var(--accent); font-weight: 500; color: var(--ink); }

/* ---- EntityView header ---- */
.v-raazi .vc-page > * + * { margin-top: calc(1.5 * var(--r)); }
.v-raazi .vc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--r); }
.v-raazi .vc-who { display: flex; min-width: 0; gap: var(--r); }
.v-raazi .vc-portrait { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(5 * var(--r)); height: calc(5 * var(--r));
  border: 1px solid var(--rule); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 400 calc(1.5 * var(--r))/1 var(--serif); }
.v-raazi .vc-id { min-width: 0; }
.v-raazi .vc-title { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.5 * var(--r)); }
.v-raazi h1 { font: 600 calc(1.5 * var(--r))/calc(2 * var(--r)) var(--serif); color: var(--ink); letter-spacing: normal; }
.v-raazi .vc-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: calc(.125 * var(--r)) calc(.5 * var(--r));
  background: var(--accent-soft); color: var(--accent); font-size: calc(.75 * var(--r)); line-height: var(--r); font-weight: 500; }
.v-raazi .vc-dis { margin-top: calc(.25 * var(--r)); font-size: calc(.875 * var(--r)); line-height: calc(1.25 * var(--r)); color: var(--muted); }
.v-raazi .vc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.375 * var(--r)); margin-top: calc(.5 * var(--r)); }
.v-raazi .vc-tag, .v-raazi .vc-edit { display: inline-flex; align-items: center; border: 1px solid var(--t); border-radius: 999px; padding: calc(.125 * var(--r)) calc(.625 * var(--r)); font-size: calc(.75 * var(--r)); line-height: var(--r); color: var(--t); }
.v-raazi .vc-edit { border-style: dashed; border-color: var(--rule); color: var(--muted); }
.v-raazi .vc-btns { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--r)); }
.v-raazi .vc-btn { border: 1px solid var(--rule); border-radius: calc(.25 * var(--r)); background: #fff; padding: calc(.375 * var(--r)) calc(.75 * var(--r));
  font-size: calc(.875 * var(--r)); line-height: calc(1.25 * var(--r)); font-weight: 500; white-space: nowrap; }
.v-raazi .vc-primary { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ---- the entry's own tabs ---- */
.v-raazi .vc-tabs { display: flex; flex-wrap: wrap; gap: calc(.25 * var(--r)); border-bottom: 1px solid var(--rule); }
.v-raazi .vc-tabs span { font-weight: 500; }
.v-raazi .vc-tabs .on { border-color: var(--accent); color: var(--accent); }

/* ---- the entry: two cards, the book treatment ---- */
.v-raazi .vc-panel > * + * { margin-top: var(--r); }
.v-raazi .vc-card { position: relative; border: 1px solid var(--rule); border-radius: calc(.5 * var(--r)); background: #fff; padding: var(--r); }
.v-raazi .vc-summary { font: 400 calc(1.125 * var(--r))/calc(1.75 * var(--r)) var(--serif); }
.v-raazi .vc-prose { font: 400 calc(1.0625 * var(--r))/1.75 var(--serif); text-align: start; }
.v-raazi .vc-name { border-bottom: 1px dotted var(--accent); }
.v-raazi .vc-anchor { position: relative; }
/* EntryBody marker: mx-0.5 rounded px-1 align-super text-[0.65em] font-sans font-semibold */
.v-raazi .vc-m { display: inline-block; margin: 0 calc(.125 * var(--r)); border-radius: calc(.25 * var(--r)); padding: 0 calc(.25 * var(--r));
  vertical-align: super; font: 600 .65em/1.5 var(--sans); background: var(--accent-soft); color: var(--accent); }
/* At rest the citation is open — the state the page settles on when motion is off. */
.v-raazi .vc-m1 { background: var(--accent); color: #fff; animation: vc-mark var(--loop) linear infinite; }

/* ---- CitationPopover: fixed, 380 wide, opened above a marker low on the screen ---- */
.v-raazi .vc-pop {
  position: absolute; z-index: 4; width: min(calc(23.75 * var(--r)), calc(100cqw - 1.5 * var(--r)));
  left: calc(9.25 * var(--r)); bottom: calc(100% - var(--r) + 6px);
  border: 1px solid var(--accent); border-radius: calc(.5 * var(--r)); background: #fff; padding: calc(.75 * var(--r));
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  font-family: var(--sans); text-align: left;
  animation: vc-pop var(--loop) linear infinite;
}
.v-raazi .vc-pop-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(.75 * var(--r)); }
.v-raazi .vc-pop-top p { font-size: calc(.875 * var(--r)); line-height: 1.375; font-weight: 500; }
.v-raazi .vc-n { margin-right: calc(.375 * var(--r)); color: var(--accent); }
.v-raazi .vc-x { margin-top: calc(-.25 * var(--r)); flex-shrink: 0; font-size: calc(1.125 * var(--r)); line-height: 1; color: var(--muted); }
.v-raazi .vc-pop blockquote { margin-top: calc(.5 * var(--r)); border-left: 2px solid var(--accent); padding-left: calc(.75 * var(--r));
  font-size: calc(.875 * var(--r)); line-height: calc(1.25 * var(--r)); font-style: italic; }
.v-raazi .vc-pop-btns { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--r)); margin-top: calc(.75 * var(--r)); font-size: calc(.75 * var(--r)); line-height: var(--r); font-weight: 500; }
.v-raazi .vc-show { border-radius: calc(.25 * var(--r)); background: var(--accent); color: #fff; padding: calc(.25 * var(--r)) calc(.625 * var(--r)); }
.v-raazi .vc-read { border: 1px solid var(--rule); border-radius: calc(.25 * var(--r)); padding: calc(.25 * var(--r)) calc(.625 * var(--r)); }

/* ---- the pointer that clicks the marker (hidden at rest) ---- */
.v-raazi .vc-cursor { position: absolute; z-index: 5; left: 55%; top: 40%; width: 12px; height: 16.5px; pointer-events: none; opacity: 0;
  fill: #fff; stroke: #1c1a17; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25));
  animation: vc-cursor var(--loop) cubic-bezier(.45, 0, .25, 1) infinite; }

/* 8 s: rest · pointer arrives · click (1.6 s) · read · click again (6.2 s) · rest */
@keyframes vc-cursor {
  0%   { opacity: 0; transform: translate(70px, 46px); }
  6%   { opacity: 0; transform: translate(70px, 46px); }
  10%  { opacity: 1; }
  18%  { opacity: 1; transform: translate(0, 0) scale(1); }
  20%  { transform: translate(0, 0) scale(.86); }
  22%  { transform: translate(0, 0) scale(1); }
  32%  { transform: translate(-18px, 22px); }
  72%  { transform: translate(-18px, 22px); }
  76%  { transform: translate(0, 0) scale(1); }
  77.5% { transform: translate(0, 0) scale(.86); }
  79%  { transform: translate(0, 0) scale(1); opacity: 1; }
  90%  { opacity: 0; transform: translate(60px, 40px); }
  100% { opacity: 0; transform: translate(70px, 46px); }
}
@keyframes vc-mark {
  0%, 16.9%  { background: var(--accent-soft); color: var(--accent); }
  17%, 81.9% { background: var(--accent); color: #fff; }
  82%, 100%  { background: var(--accent-soft); color: var(--accent); }
}
/* The app's own fade-in (0.2 s, 2 px rise); it closes at once, as the app does. */
@keyframes vc-pop {
  0%, 20%    { opacity: 0; visibility: hidden; transform: translateY(2px); }
  20.01%     { opacity: 0; visibility: visible; transform: translateY(2px); }
  22.5%      { opacity: 1; transform: none; }
  77.6%      { opacity: 1; visibility: visible; transform: none; }
  77.7%, 100% { opacity: 0; visibility: hidden; }
}

/* An Arabic entry: the marker sits near the right-hand end of the first line,
   so the popover, centred on it, keeps to the right. */
.v-raazi .vc-rtl .vc-pop { left: auto; right: calc(3.3 * var(--r)); }

/* Phone: the app's narrow padding (px-4); the popover runs the width of the
   screen less its 12 px margins, as it does on a phone. */
@container (max-width: 460px) {
  .v-raazi .vc-main { --pad: var(--r); }
  .v-raazi .vc-bodycard .vc-pop { left: calc(50cqw - 50% - 4.5 * var(--r)); right: auto; }
}
@media (max-width: 560px) { .v.v-raazi { --r: 12px; height: 410px; } }

/* shasha.css */
/* Shasha — the TV shell's home screen and the phone remote, after shasha/public:
   tv.css + shell.css (the television) and phone.css + modes.css (the phone).

   The television is laid out the way shell.css lays it out, on a 1920 x 1080
   grid: every size is N units of --u, as the shell's own calc(N * var(--u)),
   so the picture keeps the real proportions at any width. Small type gets a
   floor in px so it can still be read at this size. The phone is the same on
   a 390 px-wide screen (--p).

   Fonts: the shell asks for "Segoe UI", system-ui; the phone for system-ui,
   -apple-system, "Segoe UI", Roboto. Both are system fonts, so nothing is
   self-hosted: Windows shows the real Segoe UI, other systems their own sans.

   The loop is 10 s: Right on the phone moves the TV's focus from Sintel to Big
   Buck Bunny; a game library takes the remote and the phone dims what it has no
   key for; Subs, pressed anyway, is refused out loud; Home comes back. */

@property --sh-f { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------ root and stage */
.v.v-shasha {
  /* placeholder pictures: soft gradients standing in for each film's backdrop */
  --sh-a1:
    radial-gradient(14% 20% at 62% 50%, rgba(255, 184, 110, .95), rgba(255, 140, 70, 0) 70%),
    radial-gradient(30% 26% at 46% 22%, rgba(214, 230, 248, .55), rgba(214, 230, 248, 0) 70%),
    radial-gradient(60% 40% at 58% 92%, #e9eef3 0%, rgba(233, 238, 243, 0) 70%),
    radial-gradient(70% 55% at 85% 30%, #9fb2c6 0%, rgba(159, 178, 198, 0) 70%),
    linear-gradient(172deg, #142339 0%, #2d5482 34%, #79a2cd 54%, #dde7f1 70%, #8399b2 86%, #263142 100%);
  --sh-a2:
    radial-gradient(14% 20% at 80% 18%, rgba(255, 246, 200, .95), rgba(255, 236, 160, 0) 70%),
    radial-gradient(26% 30% at 62% 62%, rgba(236, 232, 226, .9), rgba(220, 214, 206, 0) 72%),
    radial-gradient(90% 40% at 50% 100%, #3f7d2c 0%, rgba(63, 125, 44, 0) 75%),
    linear-gradient(180deg, #6fb4f0 0%, #b9e0fb 42%, #9fd27a 64%, #5e9e3c 82%, #2f5e22 100%);
  --sh-a3:
    radial-gradient(22% 30% at 72% 46%, rgba(255, 138, 64, .85), rgba(255, 120, 50, 0) 70%),
    radial-gradient(70% 60% at 30% 20%, #2b6a76 0%, rgba(43, 106, 118, 0) 70%),
    linear-gradient(160deg, #0c1d24 0%, #164451 50%, #0b151b 100%);
  --sh-a4:
    radial-gradient(30% 40% at 60% 45%, rgba(214, 160, 92, .75), rgba(214, 160, 92, 0) 70%),
    linear-gradient(150deg, #2a2016 0%, #6b4a2b 45%, #1c140d 100%);
  display: block; position: relative; padding: 0; min-height: 0;
  container: sh / inline-size;
  background: transparent; color: #eef2f6; text-align: left;
}
.v-shasha *, .v-shasha *::before, .v-shasha *::after { box-sizing: border-box; }
.v-shasha svg { display: block; }
.v-shasha .sh-stage { --sh-h: clamp(360px, 60cqw, 440px); position: relative; height: var(--sh-h); overflow: hidden; }

/* ------------------------------------------------------------- the television */
.v-shasha .sh-tv { position: absolute; inset: 0; overflow: hidden; background: #05070a; container-type: size; }
.v-shasha .sh-scr {
  --u: max(calc(100cqw / 1920), calc(100cqh / 1080));
  position: absolute; left: 0; top: 0; width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); overflow: hidden;
  background: #000; color: #eef2f6;
  font: 400 calc(22 * var(--u))/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the picture: whatever has focus, as big as the screen, under the shell's three shades */
.v-shasha .sh-shelf { position: absolute; inset: 0; overflow: hidden; background: #05070a; }
.v-shasha .sh-bg { position: absolute; inset: 0; background: #05070a center 22% / cover no-repeat; }
.v-shasha .sh-bg1 { background-image: var(--sh-a1); }
.v-shasha .sh-bg2 { background-image: var(--sh-a2); opacity: 0; }
/* a tile with no picture: its colour (shell.js tintOf), and its glyph large */
.v-shasha .sh-bg3 { background-image: radial-gradient(90% 110% at 78% 20%, color-mix(in srgb, #38a169 78%, #fff 22%) 0%, color-mix(in srgb, #38a169 55%, #05070a) 38%, #05070a 78%); opacity: 0; }
.v-shasha .sh-glyph {
  position: absolute; right: calc(153.6 * var(--u)); top: calc(108 * var(--u)); width: calc(432 * var(--u)); height: calc(432 * var(--u));
  fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.v-shasha .sh-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.06) 64%, rgba(0,0,0,0) 100%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.12) 64%, rgba(0,0,0,0) 76%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%);
}
.v-shasha .sh-clock {
  position: absolute; z-index: 20; top: calc(40 * var(--u)); right: calc(88 * var(--u));
  font-size: max(calc(32 * var(--u)), 9px); font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

.v-shasha .sh-home { position: absolute; inset: 0; z-index: 1; }

/* the sidebar, closed: a strip of glass with an icon for each place */
.v-shasha .sh-side {
  position: absolute; z-index: 30; left: calc(36 * var(--u)); top: calc(36 * var(--u)); bottom: calc(36 * var(--u));
  width: calc(112 * var(--u)); border-radius: calc(46 * var(--u));
  display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(26 * var(--u)) calc(18 * var(--u)); overflow: hidden;
  background: rgba(20,22,28,.42);
  -webkit-backdrop-filter: blur(calc(50 * var(--u))) saturate(1.5); backdrop-filter: blur(calc(50 * var(--u))) saturate(1.5);
  box-shadow: inset 0 0 0 max(calc(1 * var(--u)), .5px) rgba(255,255,255,.09), 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0,0,0,.35);
}
.v-shasha .sh-who { display: flex; align-items: center; padding: 0 calc(10 * var(--u)) calc(14 * var(--u)); }
.v-shasha .sh-avatar {
  flex: 0 0 auto; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #ff8a4c, #ff6b2c); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255,255,255,.2);
}
.v-shasha .sh-si {
  display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(11 * var(--u)) calc(20 * var(--u));
  border-radius: calc(24 * var(--u)); color: rgba(255,255,255,.78); white-space: nowrap;
}
.v-shasha .sh-si svg { flex: 0 0 auto; width: calc(36 * var(--u)); height: calc(36 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-shasha .sh-si span { opacity: 0; }
.v-shasha .sh-si.sel { background: rgba(255,255,255,.14); color: #fff; }
.v-shasha .sh-si.quiet { color: rgba(255,255,255,.58); }
.v-shasha .sh-gap { flex: 1; }

/* the hero: the focused title's words, pinned above the rows */
.v-shasha .sh-hero { position: absolute; left: 0; top: 0; width: calc(1180 * var(--u)); height: 52%; }
.v-shasha .sh-h {
  position: absolute; left: calc(212 * var(--u)); right: calc(88 * var(--u)); bottom: calc(26 * var(--u));
  display: flex; flex-direction: column;
}
.v-shasha .sh-h2 { opacity: 0; }
.v-shasha .sh-kicker { font-size: max(calc(18 * var(--u)), 6.5px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.v-shasha .sh-title {
  margin-top: calc(10 * var(--u)); font-size: calc(77 * var(--u)); font-weight: 700; line-height: 1.02; letter-spacing: -.025em;
  text-shadow: 0 4px 30px rgba(0,0,0,.5); white-space: nowrap;
}
.v-shasha .sh-meta { margin-top: calc(14 * var(--u)); font-size: max(calc(22 * var(--u)), 7.5px); font-weight: 600; color: rgba(255,255,255,.84); display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); }
.v-shasha .sh-dot { opacity: .45; }
.v-shasha .sh-text {
  margin-top: calc(12 * var(--u)); font-size: max(calc(22 * var(--u)), 7.5px); line-height: 1.5; color: rgba(255,255,255,.76); max-width: calc(860 * var(--u));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.v-shasha .sh-text:empty { display: none; }

/* the rows, under the hero */
.v-shasha .sh-rows { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; padding-top: calc(6 * var(--u)); }
.v-shasha .sh-acts { display: flex; align-items: center; gap: calc(20 * var(--u)); padding: calc(10 * var(--u)) calc(88 * var(--u)) calc(30 * var(--u)) calc(212 * var(--u)); }
.v-shasha .sh-hbtn {
  display: inline-flex; align-items: center; gap: calc(14 * var(--u));
  height: calc(76 * var(--u)); padding: 0 calc(40 * var(--u)); border-radius: calc(38 * var(--u));
  font-size: max(calc(25 * var(--u)), 7.5px); font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(calc(24 * var(--u))) saturate(1.5); backdrop-filter: blur(calc(24 * var(--u))) saturate(1.5);
}
.v-shasha .sh-hbtn svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: currentColor; }
.v-shasha .sh-dots { margin-left: auto; display: flex; gap: calc(12 * var(--u)); }
.v-shasha .sh-dots i { display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(255,255,255,.35); }
.v-shasha .sh-dots .sh-d1 { width: calc(34 * var(--u)); background: #fff; }

.v-shasha .sh-rw { margin-bottom: calc(22 * var(--u)); }
.v-shasha .sh-rh { padding: 0 calc(88 * var(--u)) 0 calc(212 * var(--u)); margin-bottom: calc(4 * var(--u)); font-size: max(calc(28 * var(--u)), 8px); font-weight: 700; line-height: 1.5; color: rgba(255,255,255,.9); }
.v-shasha .sh-songs .sh-rh { color: rgba(255,255,255,.6); }
.v-shasha .sh-rail { display: flex; gap: calc(34 * var(--u)); padding: calc(30 * var(--u)) calc(88 * var(--u)) calc(30 * var(--u)) calc(212 * var(--u)); margin: calc(-22 * var(--u)) 0; overflow: hidden; }

/* Continue: wide cards, the name over the picture; focus is white, the rest step back */
.v-shasha .sh-cc { --sh-f: 0; flex: 0 0 auto; position: relative; width: calc(353 * var(--u)); transform: scale(calc(1 + .09 * var(--sh-f))); z-index: 1; }
.v-shasha .sh-cc1 { --sh-f: 1; z-index: 2; }
.v-shasha .sh-cc-art {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(18 * var(--u)); overflow: hidden;
  background: #10151d center / cover no-repeat;
  box-shadow: 0 0 0 calc(4 * var(--u) * var(--sh-f)) rgba(255,255,255,var(--sh-f)), 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.45);
  filter: brightness(calc(.55 + .45 * var(--sh-f)));
}
.v-shasha .sh-cc-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%); }
.v-shasha .sh-cc-name {
  position: absolute; left: 7%; right: 7%; bottom: 16%; font-size: max(calc(24 * var(--u)), 7.5px); font-weight: 700; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-shasha .sh-cc-title {
  margin-top: calc(14 * var(--u)); font-size: max(calc(21 * var(--u)), 7px); font-weight: 600; line-height: 1.4;
  color: rgba(255,255,255,calc(.62 + .38 * var(--sh-f))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-shasha .sh-cc-sub { font-size: max(calc(18 * var(--u)), 6.5px); line-height: 1.4; color: rgba(255,255,255,.42); white-space: nowrap; }

/* Music you love: square covers, at the bottom edge of the screen */
.v-shasha .sh-song { flex: 0 0 auto; width: calc(200 * var(--u)); }
.v-shasha .sh-song-art { aspect-ratio: 1; border-radius: calc(16 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.45); }
.v-shasha .sh-s1 { background: linear-gradient(140deg, #d9a35a, #7a3b1d); }
.v-shasha .sh-s2 { background: linear-gradient(140deg, #3d5a80, #142033); }
.v-shasha .sh-s3 { background: linear-gradient(140deg, #b56576, #4a2433); }
.v-shasha .sh-s4 { background: linear-gradient(140deg, #6d9f71, #21402a); }
.v-shasha .sh-s5 { background: linear-gradient(140deg, #e5c07b, #8a5a2b); }
.v-shasha .sh-s6 { background: linear-gradient(140deg, #7b6fb5, #2b2450); }

/* the handoff card: a launched app has the remote now */
.v-shasha .sh-hand {
  /* the phone stands in front of the right of the screen on a wide plate, so the two long lines wrap
     shorter than the shell's 700 units there (the card stays centred where the shell centres it) */
  --sh-hw: calc(440 * var(--u));
  position: absolute; inset: 0; z-index: 2; opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 calc(60 * var(--u));
}
.v-shasha .sh-hand-glyph {
  width: calc(180 * var(--u)); height: calc(112 * var(--u)); border-radius: calc(26 * var(--u)); display: grid; place-items: center; margin-bottom: calc(34 * var(--u));
  background:
    radial-gradient(130% 120% at 12% 0%, color-mix(in srgb, #38a169 62%, #fff 38%) 0%, transparent 55%),
    linear-gradient(155deg, #38a169 0%, color-mix(in srgb, #38a169 45%, #05070a) 100%);
  box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.6);
}
.v-shasha .sh-hand-glyph svg { width: 42%; height: auto; aspect-ratio: 1; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-shasha .sh-hand-label { font-size: calc(64 * var(--u)); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: calc(14 * var(--u)); }
.v-shasha .sh-hand-note { height: calc(16 * var(--u)); }
.v-shasha .sh-hand-keys { font-size: max(calc(18 * var(--u)), 7px); color: rgba(255,255,255,.55); margin: 0 auto calc(26 * var(--u)); max-width: var(--sh-hw, calc(700 * var(--u))); line-height: 1.7; }
.v-shasha .sh-hand-keys b { color: rgba(255,255,255,.85); font-weight: 600; }
.v-shasha .sh-hand-hint { font-size: max(calc(23 * var(--u)), 7.5px); color: rgba(255,255,255,.6); line-height: 1.65; max-width: var(--sh-hw, none); }
.v-shasha .sh-hand-hint b { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------ the phone */
.v-shasha .sh-phone {
  position: absolute; z-index: 5; right: 14px; top: 50%;
  width: calc((var(--sh-h) - 38px) * .4833 + 10px);
  transform: translateY(-50%);
  padding: 5px; border-radius: 24px;
  background: linear-gradient(160deg, #2a2d33, #0c0d10 40%, #050506);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 50px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6);
}
.v-shasha .sh-pscr { position: relative; width: 100%; aspect-ratio: 390 / 807; border-radius: 19px; overflow: hidden; container-type: size; background: #0a0c10; }
.v-shasha .sh-app {
  --p: calc(100cqw / 390);
  --bg: #0a0c10; --bg-lift: #10141a; --panel: #161b22; --panel-hi: #1d232c; --line: #262e39; --line-soft: #1b212a;
  --ink: #e9eef5; --dim: #8794a5; --dimmer: #5b6674; --accent: #ff6b2c; --ok: #35d07f; --warn: #ffb02e;
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 500 max(calc(14 * var(--p)), 7px)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.v-shasha .sh-sp { flex: 1; }

/* status: connected, and what the presses are reaching */
.v-shasha .sh-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(8 * var(--p)); height: calc(44 * var(--p)); padding: 0 calc(14 * var(--p));
  border-bottom: 1px solid var(--line-soft); background: var(--bg-lift);
}
.v-shasha .sh-led { flex: 0 0 auto; width: max(calc(9 * var(--p)), 4px); height: max(calc(9 * var(--p)), 4px); border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(53,208,127,.5); }
.v-shasha .sh-tag { font-size: max(calc(12 * var(--p)), 6.5px); color: var(--dim); white-space: nowrap; line-height: 1; }
.v-shasha .sh-dimmer { color: var(--dimmer); }
.v-shasha .sh-target {
  display: inline-grid; padding: calc(3 * var(--p)) calc(9 * var(--p)); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: max(calc(11 * var(--p)), 6.5px); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.v-shasha .sh-target b { grid-area: 1 / 1; font-weight: 600; }
.v-shasha .sh-target b + b { opacity: 0; }

/* the toast: the PC refusing a press, and saying why */
.v-shasha .sh-toast {
  position: absolute; z-index: 4; top: calc(52 * var(--p)); left: 50%; transform: translate(-50%, calc(-12 * var(--p)));
  width: max-content; max-width: 92%; padding: max(calc(11 * var(--p)), 5px) max(calc(16 * var(--p)), 7px); border-radius: calc(14 * var(--p));
  background: var(--panel-hi); border: 1px solid rgba(255,176,46,.45); color: var(--warn);
  font-size: max(calc(13 * var(--p)), 8.5px); line-height: 1.3; text-align: center; opacity: 0;
  box-shadow: 0 16px 40px -16px #000;
}

.v-shasha .sh-tools { flex: 0 0 auto; display: flex; align-items: center; gap: calc(8 * var(--p)); padding: calc(8 * var(--p)) calc(14 * var(--p)); }
.v-shasha .sh-mini {
  display: grid; place-items: center; min-width: calc(44 * var(--p)); height: calc(36 * var(--p)); padding: 0 calc(12 * var(--p));
  border: 1px solid var(--line); border-radius: calc(10 * var(--p)); background: var(--panel); color: var(--dim);
  font: 600 max(calc(14 * var(--p)), 6.5px)/1 system-ui, sans-serif;
}

/* the Remote face */
.v-shasha .sh-mode { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 calc(10 * var(--p)) calc(8 * var(--p)); }
.v-shasha .sh-mb {
  position: relative; flex: 1 1 0; min-width: 0; min-height: calc(56 * var(--p));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--p));
  border: 1px solid var(--line); border-radius: calc(14 * var(--p)); background: var(--panel); color: var(--ink);
  font: 600 max(calc(15 * var(--p)), 7px)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap;
}
.v-shasha .sh-mb b { font-size: max(calc(17 * var(--p)), 7px); font-weight: 700; }
.v-shasha .sh-mb em { font-style: normal; font-size: max(calc(10 * var(--p)), 5.5px); color: var(--dim); letter-spacing: .04em; }
.v-shasha .sh-mb.accent { border-color: rgba(255,107,44,.45); color: var(--accent); }
.v-shasha .sh-dpad { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: calc(8 * var(--p)); aspect-ratio: 1.35; margin-bottom: calc(10 * var(--p)); }
.v-shasha .sh-dpad .sh-mb { min-height: 0; font-size: max(calc(20 * var(--p)), 8px); }
.v-shasha .dp.up { grid-area: 1 / 2; } .v-shasha .dp.left { grid-area: 2 / 1; } .v-shasha .dp.right { grid-area: 2 / 3; } .v-shasha .dp.down { grid-area: 3 / 2; }
.v-shasha .sh-dpad .dp.ok { grid-area: 2 / 2; background: var(--panel-hi); font-size: max(calc(15 * var(--p)), 7px); font-weight: 800; letter-spacing: 1px; }
.v-shasha .sh-row { flex: 0 0 auto; display: flex; gap: calc(8 * var(--p)); margin-bottom: calc(8 * var(--p)); }
.v-shasha .sh-nav .sh-mb { min-height: calc(52 * var(--p)); font-size: max(calc(13 * var(--p)), 6.5px); }
.v-shasha .sh-trans .sh-mb { min-height: calc(50 * var(--p)); font-size: max(calc(17 * var(--p)), 7px); }
.v-shasha .sh-vol .sh-mb { min-height: calc(48 * var(--p)); font-size: max(calc(17 * var(--p)), 7px); }
.v-shasha .sh-extra .sh-mb { min-height: calc(42 * var(--p)); font-size: max(calc(12 * var(--p)), 6.5px); color: var(--dim); }
.v-shasha .sh-extra .magic { flex: 1.5; }
.v-shasha .sh-track {
  flex: 1 1 auto; min-height: 0; margin-top: calc(2 * var(--p)); display: grid; place-items: center; padding: calc(12 * var(--p));
  border: 1px dashed var(--line); border-radius: calc(14 * var(--p)); background: var(--bg-lift);
  color: var(--dimmer); font-size: max(calc(11 * var(--p)), 5.5px); line-height: 1.6; text-align: center; overflow: hidden;
}

/* the face bar: every face, labelled, where the thumb already is */
.v-shasha .sh-faces { flex: 0 0 auto; display: flex; gap: calc(4 * var(--p)); padding: calc(6 * var(--p)) calc(8 * var(--p)); background: var(--bg-lift); border-top: 1px solid var(--line-soft); }
.v-shasha .sh-face {
  flex: 1 1 0; min-width: 0; height: calc(54 * var(--p)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--p));
  border-radius: calc(10 * var(--p)); color: var(--dimmer); font: 600 max(calc(10 * var(--p)), 5px)/1 system-ui, sans-serif;
}
.v-shasha .sh-face b { font-size: max(calc(19 * var(--p)), 7.5px); font-weight: 400; line-height: 1; filter: grayscale(1) opacity(.65); }
.v-shasha .sh-face span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.v-shasha .sh-face.on { background: var(--panel); color: var(--accent); }
.v-shasha .sh-face.on b { filter: none; }

/* a thumb, where a press lands (not part of the app: it shows the hand) */
.v-shasha .sh-tap {
  position: absolute; left: 50%; top: 50%; width: max(calc(44 * var(--p)), 18px); height: max(calc(44 * var(--p)), 18px); margin: max(calc(-22 * var(--p)), -9px) 0 0 max(calc(-22 * var(--p)), -9px);
  border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.35); opacity: 0; transform: scale(.6); pointer-events: none;
}

/* ------------------------------------------------------------------ the loop
   0–15%   home, Sintel in focus          12%  Right pressed on the phone
   16–44%  Big Buck Bunny in focus        45%  Arcadia has the remote (handoff)
   46%     the phone dims what Arcadia has no key for
   57%     Subs pressed anyway → refused, the toast says why (60–83%)
   85%     Home pressed → back home at 88%, Sintel in focus again          */
.v-shasha .sh-home     { animation: sh-home 10s infinite; }
.v-shasha .sh-hand     { animation: sh-hand 10s infinite; }
.v-shasha .sh-hand-glyph { animation: sh-handin 10s infinite; }
.v-shasha .sh-bg1      { animation: sh-bg1 10s infinite; }
.v-shasha .sh-bg2      { animation: sh-bg2 10s infinite; }
.v-shasha .sh-bg3      { animation: sh-bg3 10s infinite; }
.v-shasha .sh-glyph    { animation: sh-glyph 10s infinite; }
.v-shasha .sh-h1       { animation: sh-h1 10s infinite; }
.v-shasha .sh-h2       { animation: sh-h2 10s infinite; }
.v-shasha .sh-cc1      { animation: sh-f1 10s infinite; }
.v-shasha .sh-cc2      { animation: sh-f2 10s infinite; }
.v-shasha .sh-dots .sh-d1 { animation: sh-d1 10s infinite; }
.v-shasha .sh-dots .sh-d2 { animation: sh-d2 10s infinite; }
.v-shasha .sh-target   { animation: sh-tg 10s infinite; }
.v-shasha .sh-target b:first-child { animation: sh-tg-a 10s infinite; }
.v-shasha .sh-target b + b { animation: sh-tg-b 10s infinite; }
.v-shasha .sh-toast    { animation: sh-toast 10s infinite; }
.v-shasha .sh-mb.off   { animation: sh-off 10s infinite; }
.v-shasha .sh-mb.accent.off { animation: sh-off-acc 10s infinite; }
.v-shasha .sh-mb.sh-subs { animation: sh-subs 10s infinite; }
.v-shasha .sh-p1       { animation: sh-p1 10s infinite; }
.v-shasha .sh-p2       { animation: sh-p2 10s infinite; }
.v-shasha .sh-p1 .sh-tap { animation: sh-t1 10s infinite; }
.v-shasha .sh-p2 .sh-tap { animation: sh-t2 10s infinite; }
.v-shasha .sh-subs .sh-tap { animation: sh-t3 10s infinite; }

@keyframes sh-home { 0%, 44% { opacity: 1; } 46.5%, 87% { opacity: 0; } 89.5%, 100% { opacity: 1; } }
@keyframes sh-hand { 0%, 45% { opacity: 0; } 47.5%, 87% { opacity: 1; } 88.5%, 100% { opacity: 0; } }
@keyframes sh-handin { 0%, 45% { transform: scale(.9); } 50%, 100% { transform: none; } }
@keyframes sh-bg1 {
  0% { opacity: 1; transform: none; }
  15.5% { opacity: 1; transform: none; }
  24.5% { opacity: 0; transform: none; }
  87.5% { opacity: 0; transform: scale(1.04); }
  96.5%, 100% { opacity: 1; transform: none; }
}
@keyframes sh-bg2 {
  0%, 15.5% { opacity: 0; transform: scale(1.04); }
  24.5% { opacity: 1; transform: scale(1.02); }
  44% { opacity: 1; transform: none; }
  53%, 100% { opacity: 0; transform: none; }
}
@keyframes sh-bg3 { 0%, 44.5% { opacity: 0; } 53.5%, 87.5% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
@keyframes sh-glyph {
  0%, 45% { opacity: 0; transform: translateY(calc(12 * var(--u))); }
  51%, 87.5% { opacity: .16; transform: none; }
  93.5%, 100% { opacity: 0; transform: translateY(calc(12 * var(--u))); }
}
@keyframes sh-h1 {
  0%, 15.5% { opacity: 1; transform: none; }
  16.5%, 87.5% { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  92%, 100% { opacity: 1; transform: none; }
}
@keyframes sh-h2 {
  0%, 15.5% { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  20%, 44% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: none; }
}
@keyframes sh-f1 { 0%, 15.5% { --sh-f: 1; z-index: 2; } 17.5%, 88% { --sh-f: 0; z-index: 1; } 90%, 100% { --sh-f: 1; z-index: 2; } }
@keyframes sh-f2 { 0%, 15.5% { --sh-f: 0; z-index: 1; } 17.5%, 44% { --sh-f: 1; z-index: 2; } 46%, 100% { --sh-f: 0; z-index: 1; } }
@keyframes sh-d1 {
  0%, 15.5% { width: calc(34 * var(--u)); background: #fff; }
  18.5%, 87.5% { width: calc(12 * var(--u)); background: rgba(255,255,255,.35); }
  90.5%, 100% { width: calc(34 * var(--u)); background: #fff; }
}
@keyframes sh-d2 {
  0%, 15.5% { width: calc(12 * var(--u)); background: rgba(255,255,255,.35); }
  18.5%, 44% { width: calc(34 * var(--u)); background: #fff; }
  46%, 100% { width: calc(12 * var(--u)); background: rgba(255,255,255,.35); }
}

/* the phone follows: the pill names what is in front; the shell's own name in white, a handed-off app in amber */
@keyframes sh-tg {
  0%, 45.5% { color: var(--ink); border-color: var(--line); }
  46.5%, 87.5% { color: var(--warn); border-color: rgba(255,176,46,.35); }
  88.5%, 100% { color: var(--ink); border-color: var(--line); }
}
@keyframes sh-tg-a { 0%, 45.5% { opacity: 1; } 46.5%, 87.5% { opacity: 0; } 88.5%, 100% { opacity: 1; } }
@keyframes sh-tg-b { 0%, 45.5% { opacity: 0; } 46.5%, 87.5% { opacity: 1; } 88.5%, 100% { opacity: 0; } }
@keyframes sh-toast {
  0%, 59.5% { opacity: 0; transform: translate(-50%, calc(-12 * var(--p))); }
  61%, 83% { opacity: 1; transform: translate(-50%, 0); }
  84.5%, 100% { opacity: 0; transform: translate(-50%, calc(-12 * var(--p))); }
}
/* dimmed, deliberately not disabled: opacity .32 and a dashed edge (modes.css .mbtn.unavailable) */
@keyframes sh-off {
  0%, 46% { opacity: 1; border-style: solid; }
  46.1%, 87.5% { opacity: .32; border-style: dashed; }
  87.6%, 100% { opacity: 1; border-style: solid; }
}
@keyframes sh-off-acc {
  0%, 46% { opacity: 1; border-style: solid; border-color: rgba(255,107,44,.45); color: var(--accent); }
  46.1%, 87.5% { opacity: .32; border-style: dashed; border-color: var(--line); color: var(--dim); }
  87.6%, 100% { opacity: 1; border-style: solid; border-color: rgba(255,107,44,.45); color: var(--accent); }
}
/* Subs: dimmed, pressed anyway (.unavailable:active), then the refused flash (modes.css @keyframes refused) */
@keyframes sh-subs {
  0%, 46% { opacity: 1; border-style: solid; border-color: var(--line); background: var(--panel); transform: none; }
  46.1%, 56.5% { opacity: .32; border-style: dashed; border-color: var(--line); background: var(--panel); transform: none; }
  57% { opacity: .5; border-style: dashed; border-color: var(--line); background: var(--panel-hi); transform: translateY(1px); }
  59.5% { opacity: .5; border-style: dashed; border-color: var(--warn); background: rgba(255,176,46,.16); transform: none; }
  60.5% { opacity: .32; border-style: dashed; border-color: var(--warn); background: rgba(255,176,46,.16); transform: none; }
  67%, 87.5% { opacity: .32; border-style: dashed; border-color: var(--line); background: var(--panel); transform: none; }
  87.6%, 100% { opacity: 1; border-style: solid; border-color: var(--line); background: var(--panel); transform: none; }
}
/* a press: .mbtn.pressed */
@keyframes sh-p1 {
  0%, 11.5% { background: var(--panel); border-color: var(--line); transform: none; }
  12%, 15% { background: var(--panel-hi); border-color: var(--accent); transform: translateY(1px); }
  16%, 100% { background: var(--panel); border-color: var(--line); transform: none; }
}
@keyframes sh-p2 {
  0%, 84.5% { background: var(--panel); border-color: var(--line); transform: none; }
  85%, 87.5% { background: var(--panel-hi); border-color: var(--accent); transform: translateY(1px); }
  88.5%, 100% { background: var(--panel); border-color: var(--line); transform: none; }
}
@keyframes sh-t1 { 0%, 10.5% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 15% { opacity: .9; transform: scale(1); } 17.5%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sh-t2 { 0%, 83.5% { opacity: 0; transform: scale(.6); } 85% { opacity: 1; transform: scale(1); } 87.5% { opacity: .9; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sh-t3 { 0%, 55.5% { opacity: 0; transform: scale(.6); } 57% { opacity: 1; transform: scale(1); } 59.5% { opacity: .9; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(1.25); } }

/* ------------------------------------------------------------- narrow plates
   Under 480 px the TV goes on top, a little taller than 16:9 so the rows show,
   and the phone stands under it. */
@container sh (max-width: 479px) {
  .v-shasha .sh-stage { --sh-pw: min(48cqw, 172px); height: calc(64cqw + 12px + (var(--sh-pw) - 10px) * 2.0692 + 10px + 4px); }
  .v-shasha .sh-tv { inset: 0 0 auto 0; height: 64cqw; }
  .v-shasha .sh-hand { --sh-hw: calc(700 * var(--u)); }
  .v-shasha .sh-phone { top: calc(64cqw + 12px); right: auto; left: 50%; width: var(--sh-pw); transform: translateX(-50%); }
}

/* studio.css */
/*
  Jalees Studio — the reader, in the app's own paper theme.
  Tokens, sizes and component rules are taken from jalees/app/globals.css
  (.reading, .para, .seg, .who, .mark, .jchip, .jbtn, .score) and the Tailwind
  classes in TopBar.tsx and PlayerBar.tsx. Loop: 9 s.

  Amiri as the app loads it: Arabic ranges only, size-adjust 112%, so Latin
  falls through to Georgia (reading) and the system UI face (chrome), as in
  the app. The files are the site's own Arabic Amiri subsets.
*/
@font-face {
  font-family: "Jalees Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 112%;
  src: url('/assets/fonts/Amiri-normal-400-arabic.woff2') format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Jalees Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 112%;
  src: url('/assets/fonts/Amiri-normal-700-arabic.woff2') format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

.v.v-studio {
  /* the app's light ("Paper") theme */
  --js-bg: #f6f2ea;
  --js-surface: #fffdf9;
  --js-well: #ece5d8;
  --js-line: #e0d7c8;
  --js-line-2: #cdc2ae;
  --js-text: #1d1915;
  --js-muted: #6a6153;
  --js-faint: #958b78;
  --js-accent: #b0541e;
  --js-accent-ink: #fffaf3;
  --js-good: #4a7a3d;
  --js-bad: #a83b26;
  --js-calm: #6f9fb5;
  --js-tension: #b58b3a;
  --js-danger: #c0553c;
  --js-grief: #7b7fb5;
  --js-wonder: #4f9d86;
  --js-travel: #8a9a5b;
  --js-joy: #d99a45;
  --js-reading: "Jalees Amiri", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --js-ui: "Jalees Amiri", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --js-dim: color-mix(in oklab, var(--js-text) 62%, transparent);
  --js-lit: color-mix(in oklab, var(--js-accent) 12%, transparent);

  position: relative;
  padding: 0;
  min-height: 360px;
  height: 100%;
  overflow: hidden;
  background: var(--js-bg);
  color: var(--js-text);
  font: 400 14px/1.5 var(--js-ui);
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  text-align: left;
}
.v-studio * { box-sizing: border-box; }
.v-studio p { margin: 0; }
.v-studio .js { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* the site sets a face on every [lang] element; the app's faces win inside the preview */
.v.v-studio .js[lang] { font-family: var(--js-ui); }
.v.v-studio .para[lang] { font-family: var(--js-reading); }

/* ---- top bar (TopBar.tsx, reader mode: no links, theme + library) ---- */
.v-studio .js-top {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--js-line);
  background: color-mix(in oklab, var(--js-bg) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.v-studio .js-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.v-studio .js-logo { width: 28px; height: 28px; border-radius: 8px; display: block; }
.v-studio .js-word { display: flex; flex-direction: column; line-height: 1; }
.v-studio .js-word b { font: 600 22px/1 var(--js-reading); letter-spacing: -0.025em; color: var(--js-text); }
.v-studio .js-word small { margin-top: 2px; font-size: 10.5px; line-height: 1; color: var(--js-faint); }
.v-studio .js-right { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.v-studio .js-pill {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 10px; border: 1px solid var(--js-line); border-radius: 999px;
  font-size: 12px; line-height: 16px; color: var(--js-muted); white-space: nowrap;
}
.v-studio .js-pdot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--js-accent); animation: js-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.v-studio .js-said { display: grid; min-width: 0; max-width: 144px; }
.v-studio .js-said > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.v-studio .js-said .c3 { opacity: 1; animation: js-c3 9s infinite; }
.v-studio .js-said .c2 { animation: js-c2 9s infinite; }
.v-studio .js-said .c1 { animation: js-c1 9s infinite; }
.v-studio .js-nx { display: none; flex: none; color: var(--js-faint); }

/* ---- buttons (.jbtn, .jbtn.ghost, .jbtn.icon, .jbtn.primary, .jbtn.sm) ---- */
.v-studio .jbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 8px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--js-muted);
  font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.v-studio .jbtn svg { display: block; }
.v-studio .jbtn.vd { width: 32px; height: 32px; padding: 0; }
.v-studio .jbtn.primary { width: 48px; height: 48px; padding: 0; background: var(--js-accent); border-color: var(--js-accent); color: var(--js-accent-ink); }
.v-studio .jbtn.sm { padding: 5px 10px; border-radius: 10px; min-width: 48px; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.v-studio .jbtn.wide { display: none; min-width: 34px; height: 34px; }

/* ---- the reading column (.reading, .para, .seg.piece, .who, .mark) ---- */
.v-studio .js-page { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 6px 24px 0; }
.v-studio .reading { font-family: var(--js-reading); font-size: 19px; line-height: 1.8; color: var(--js-text); }
.v-studio .para { position: relative; margin: 2px -16px; padding: 5px 16px; border-radius: 10px; text-align: right; }
.v-studio .seg.piece {
  display: inline; position: relative; padding: 2px 3px; margin: 0; border-radius: 5px;
  color: var(--js-dim);
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.v-studio .seg.piece.spoken { box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--who) 45%, transparent); }
.v-studio .tag { white-space: nowrap; }
.v-studio .who {
  display: inline-block; margin-inline-end: 0.35em; padding: 0 0.35em; border-radius: 5px;
  background: color-mix(in oklab, var(--who) 16%, transparent);
  color: color-mix(in oklab, var(--who) 70%, var(--js-text));
  font: 600 0.66em/1.6 var(--js-ui); letter-spacing: 0.01em; vertical-align: 0.15em;
}
.v-studio .who.narr { --who: var(--js-faint); opacity: 0; }
.v-studio .mark { position: relative; display: inline-block; vertical-align: middle; width: 0.35em; height: 0.35em; margin-inline-end: 0.3em; }
.v-studio .mark i { position: absolute; inset: 0; border-radius: 999px; }
/* first dot: making (queued / rendering), pulsing; second: done */
.v-studio .mark i:first-child { background: var(--js-accent); animation: js-make 1.2s ease-in-out infinite; }
.v-studio .mark i:last-child { background: var(--js-good); opacity: 0; }
.v-studio .mark.done i:first-child { display: none; }
.v-studio .mark.done i:last-child { opacity: .5; }
.v-studio .mark.k3 i:first-child { animation: js-make 1.2s ease-in-out infinite, js-k3a 9s infinite; }
.v-studio .mark.k3 i:last-child { animation: js-k3b 9s infinite; }
.v-studio .mark.k4 i:first-child { animation: js-make 1.2s ease-in-out infinite, js-k4a 9s infinite; }
.v-studio .mark.k4 i:last-child { animation: js-k4b 9s infinite; }

/* where the voice is: s0 heard, s1 speaking at rest (the frame with nothing running) */
.v-studio .s0 { color: var(--js-text); }
.v-studio .s0.spoken, .v-studio .s1.spoken { box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--who) 45%, transparent); }
.v-studio .s1 { color: var(--js-text); background: var(--js-lit); box-shadow: inset 0 -2px 0 var(--who); animation: js-s1 9s infinite; }
.v-studio .s2 { animation: js-s2 9s infinite; }
.v-studio .s3 { animation: js-s3 9s infinite; }

/* ---- the player bar (PlayerBar.tsx, phone layout: line above, buttons below) ---- */
.v-studio .js-bar {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--js-line);
  background: color-mix(in oklab, var(--js-bg) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px 0;
}
.v-studio .score { display: flex; width: 100%; height: 8px; gap: 1px; border-radius: 999px; overflow: hidden; background: var(--js-line); }
.v-studio .slice { flex: 1 1 0; background: color-mix(in oklab, var(--tone) 55%, transparent); }
.v-studio .slice.past { background: var(--tone); }
.v-studio .slice.here { background: var(--js-accent); }
.v-studio .slice.h1 { animation: js-h1 9s infinite; }
.v-studio .slice.h2 { animation: js-h2 9s infinite; }
.v-studio .js-rows { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 8px; }
.v-studio .js-row1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v-studio .js-lines { display: grid; flex: 1; min-width: 0; }
.v-studio .js-line { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; min-width: 0; opacity: 0; }
.v-studio .js-line.l1 { opacity: 1; animation: js-l1 9s infinite; }
.v-studio .js-line.l2 { animation: js-l2 9s infinite; }
.v-studio .js-line.l3 { animation: js-l3 9s infinite; }
.v-studio .js-now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--js-muted); }
.v-studio .jchip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--tone) 35%, transparent);
  background: color-mix(in oklab, var(--tone) 12%, transparent);
  color: color-mix(in oklab, var(--tone) 75%, var(--js-text));
  font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.v-studio .jchip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--tone); }
.v-studio .js-verdict { display: flex; align-items: center; flex: none; }
.v-studio .js-row2 { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* wider plates: the controls a desktop window shows */
@container (min-width: 520px) {
  .v-studio .js-nx { display: inline; }
  .v-studio .js-said { max-width: 220px; }
  .v-studio .jbtn.wide { display: inline-flex; }
  .v-studio .js-row2 { gap: 6px; }
  .v-studio .js-bar { padding-inline: 24px; }
  .v-studio .js-top { padding-inline: 24px; }
  .v-studio .reading { font-size: 20.5px; }
  .v-studio .js-page { padding: 8px 28px 0; }
}
@container (max-width: 380px) {
  .v-studio .js-top { padding-inline: 14px; height: 50px; }
  .v-studio .js-page { padding: 4px 16px 0; }
  .v-studio .reading { font-size: 18px; }
  .v-studio .js-said { max-width: 112px; }
  .v-studio .js-right .jbtn { padding: 6px; }
  .v-studio .js-bar { padding-inline: 12px; }
}
@media (max-width: 560px) {
  .v.v-studio { min-height: 470px; padding: 0; }
}

/* ---- the loop: s1 speaks 0–3.4 s, s2 3.4–4.5 s, s3 4.5–8.5 s, back to s1 ---- */
@keyframes js-pulse { 50% { opacity: .5; } }
@keyframes js-make { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes js-s1 {
  0%, 37% { color: var(--js-text); background: var(--js-lit); box-shadow: inset 0 -2px 0 var(--who); }
  39%, 95% { color: var(--js-text); background: transparent; box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--who) 45%, transparent); }
  98%, 100% { color: var(--js-text); background: var(--js-lit); box-shadow: inset 0 -2px 0 var(--who); }
}
@keyframes js-s2 {
  0%, 37% { color: var(--js-dim); background: transparent; box-shadow: inset 0 0 0 var(--js-accent); }
  39%, 48% { color: var(--js-text); background: var(--js-lit); box-shadow: inset 3px 0 0 var(--js-accent); }
  50%, 95% { color: var(--js-text); background: transparent; box-shadow: inset 0 0 0 var(--js-accent); }
  98%, 100% { color: var(--js-dim); background: transparent; box-shadow: inset 0 0 0 var(--js-accent); }
}
@keyframes js-s3 {
  0%, 48% { color: var(--js-dim); background: transparent; box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--who) 45%, transparent); }
  50%, 94% { color: var(--js-text); background: var(--js-lit); box-shadow: inset 0 -2px 0 var(--who); }
  98%, 100% { color: var(--js-dim); background: transparent; box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--who) 45%, transparent); }
}
/* the next lines being made while you listen: s3's take lands at 2.6 s, s4's at 6.1 s */
@keyframes js-k3a { 0%, 28% { visibility: visible; } 29%, 97% { visibility: hidden; } 98%, 100% { visibility: visible; } }
@keyframes js-k3b { 0%, 28% { opacity: 0; transform: scale(.4); } 31%, 96% { opacity: .5; transform: none; } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes js-k4a { 0%, 67% { visibility: visible; } 68%, 97% { visibility: hidden; } 98%, 100% { visibility: visible; } }
@keyframes js-k4b { 0%, 67% { opacity: 0; transform: scale(.4); } 70%, 96% { opacity: .5; transform: none; } 98%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes js-c3 { 0%, 28% { opacity: 1; } 30%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes js-c2 { 0%, 28% { opacity: 0; } 30%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes js-c1 { 0%, 67% { opacity: 0; } 69%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes js-l1 { 0%, 37% { opacity: 1; } 38.5%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes js-l2 { 0%, 37% { opacity: 0; } 38.5%, 48% { opacity: 1; } 49.5%, 100% { opacity: 0; } }
@keyframes js-l3 { 0%, 48% { opacity: 0; } 49.5%, 95.5% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes js-h1 { 0%, 48% { background: var(--js-accent); } 50%, 96% { background: var(--tone); } 98%, 100% { background: var(--js-accent); } }
@keyframes js-h2 { 0%, 48% { background: color-mix(in oklab, var(--tone) 55%, transparent); } 50%, 96% { background: var(--js-accent); } 98%, 100% { background: color-mix(in oklab, var(--tone) 55%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  .v-studio .js-pdot, .v-studio .mark i { animation: none !important; }
}