/* GENERATED by redesign/build.mjs --set=live (2026-11-04) — do not edit here; edit redesign/src/ and rebuild.
   The homepage's styles: base and live-only (src/live/live.css), the mockup's page (page.css, v4.css),
   the self-building logo (hero-logo.css), the moving pictures (scenes.css), the submit dialog (src/live/dialog.css),
   and each picture's background by slug. */

/* =============================================================================
   THE LIVE HOMEPAGE ONLY — what labs.chabad.org needs on top of the mockup's
   styles (page.css, v4.css, scenes.css, hero-logo.css), which build.mjs
   --set=live puts before this. The zone forces `default-src 'self'`, so the
   page has no style="" anywhere: what the mockup set inline is here as classes.
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #011321; color: #f5f5f7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:root {
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Alegreya', Georgia, serif;
  --f-news: 'Newsreader', 'Alegreya', Georgia, serif;
  --f-heb: 'Frank Ruhl Libre', 'David', 'Times New Roman', serif;
  --f-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --blue: #1E73BE; --blue-deep: #025FA1; --yellow: #FEC754; --navy: #011627;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
[lang="he"] { font-family: var(--f-heb); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caret { display: inline-block; width: .08em; height: 1.05em; margin-left: .08em; vertical-align: -.16em; background: currentColor; animation: va-caret 1.1s steps(1) infinite; }
@keyframes va-caret { 50% { opacity: 0; } }
@keyframes va-drift { to { transform: translate(6cqmin, 5cqmin) scale(1.12); } }

/* without the script (or before it runs) nothing waits to be revealed */
html:not(.js) .vp .rv, html:not(.js) .vp .h-words .w { opacity: 1; transform: none; }

/* the icon set the submit dialog's icons come from: present for <use>, never painted itself */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #011627; font: 600 14px/1 var(--f-display); text-decoration: none; }
.skip-link:focus { top: 12px; }

/* the line's words come in one after another: their order, which the mockup set as style="--wi:N" */
.vp .h-words .w:nth-child(1) { --wi: 0; } .vp .h-words .w:nth-child(2) { --wi: 1; } .vp .h-words .w:nth-child(3) { --wi: 2; }
.vp .h-words .w:nth-child(4) { --wi: 3; } .vp .h-words .w:nth-child(5) { --wi: 4; } .vp .h-words .w:nth-child(6) { --wi: 5; }
.vp .h-words .w:nth-child(7) { --wi: 6; } .vp .h-words .w:nth-child(8) { --wi: 7; } .vp .h-words .w:nth-child(9) { --wi: 8; }
.vp .h-words .w:nth-child(10) { --wi: 9; } .vp .h-words .w:nth-child(11) { --wi: 10; } .vp .h-words .w:nth-child(12) { --wi: 11; }

/* a card whose app has no moving picture yet: the hero's navy, a soft blue light (each picture's own background follows, by slug) */
.vp .t { --tbg: radial-gradient(90% 85% at 50% 15%, #1c3d6e 0%, #0c1a33 75%); }

/* Notify me's honeypot: a field people never see or reach, which scripts fill in (POST /api/notify drops those) */
.vp .nt-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Notify me, as on the real site: a line under the email box, and a message when saving fails */
.vp .nt-note { margin: 10px 0 0; font: 400 13px/1.4 var(--f-body); max-width: 30em; text-wrap: balance; }
.vp .is-dark .nt-note { color: rgba(245, 245, 247, .62); }
.vp .is-light .nt-note { color: #6e6e73; }
.vp .nt-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vp .nt-note[hidden], .vp .nt-err[hidden] { display: none; }
.vp .nt-err { margin: 10px 0 0; font: 600 13px/1.4 var(--f-body); }
.vp .is-dark .nt-err { color: #ffb4a8; }
.vp .is-light .nt-err { color: #b42318; }
.vp .nt-form.busy button[type="submit"] { opacity: .6; cursor: progress; }

/* "Sign up to get early access" (src/site.js earlyHtml, 4 Nov 2026): a band after the AI Chat card and again after
   the last card, in the logo's blue with a touch of its gold. Its box is Notify me's, open from the start. page.css
   comes after this file, so these rules carry one class more than the ones they change. */
/* one centred column at every width, just the line and the box (Berel, 4 Nov 2026: the words left and the box right
   looked off; no flask badge, no privacy line) */
.vp .ea { position: relative; overflow: hidden; margin-top: 14px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 52px clamp(22px, 4vw, 56px); text-align: center; color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(45% 140% at 100% 0%, rgba(254, 199, 84, .24), rgba(254, 199, 84, 0) 70%),
    linear-gradient(120deg, #1E73BE 0%, #0b4f8f 100%); }
.vp .ea + .live, .vp .ea + .soon-grid { margin-top: 14px; }
.vp .ea-h { font: 600 clamp(28px, 3vw, 40px)/1.12 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.vp .ea .ea-box { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.vp .ea .nt-form { width: min(420px, 100%); height: 52px; animation: none; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); }
.vp .ea .nt-form:focus-within { box-shadow: 0 0 0 3px var(--yellow), 0 14px 30px -18px rgba(0, 0, 0, .5); }
.vp .ea .nt-form button[type="submit"] { padding: 0 22px; background: var(--navy); font-size: 15px; }
.vp .ea .nt-form button[type="submit"]:hover { background: #0b2a45; }
.vp .ea .nt-err { color: #ffe3dc; }
.vp .ea .nt-done { height: 52px; padding: 0 22px 0 18px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); color: #fff; font-size: 15px; }
@media (max-width: 734px) {
  .vp .ea { margin-top: 10px; border-radius: 24px; gap: 18px; padding: 38px 22px; }
  .vp .ea + .live, .vp .ea + .soon-grid { margin-top: 10px; }
}


/* =============================================================================
   THE PAGE — shared by the three versions (page.js). Version files (v1–v3.css)
   change only the frame around the tiles, the headline and the small details.
   ============================================================================= */
.vp { --pad: clamp(20px, 4vw, 56px); --max: 1240px; background: #011627; color: #f5f5f7; font-family: var(--f-body); }
.vp h1, .vp h2, .vp p { margin: 0; }
.vp a { color: inherit; text-decoration: none; }
.vp button { all: unset; box-sizing: border-box; cursor: pointer; }
.vp :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.vp ::selection { background: var(--yellow); color: var(--navy); }
.vp .ic { flex: none; }

/* ------------------------------------------------------------------- nav -- */
.vp .nav { position: sticky; top: 0; z-index: 50; height: 60px; margin-bottom: -60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(var(--pad), (100% - var(--max)) / 2); transition: background .35s, box-shadow .35s; }
.vp .nav.is-moved { background: rgba(1, 22, 39, .97); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.vp .nav-logo img { height: 24px; width: auto; }
.vp .nav-late .nav-logo { opacity: 0; pointer-events: none; transition: opacity .35s; }
.vp .nav-late.is-moved .nav-logo { opacity: 1; pointer-events: auto; }
.vp .nav-r { display: flex; align-items: center; gap: 18px; }
.vp .nav-bh { font: 500 15px/1 var(--f-heb); color: rgba(255, 255, 255, .8); }
.vp .nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 99px; white-space: nowrap;
  font: 600 14px/1 var(--f-display); color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .25s; }
.vp .nav-cta:hover { background: rgba(255, 255, 255, .14); }
.vp .nav-cta .ic { width: 16px; height: 16px; color: var(--yellow); }

/* ------------------------------------------------------------------ hero -- */
/* Design 6's navy and light, with Design 2's dotted grid and drifting glows. */
.vp .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: 128px var(--pad) 136px;
  background:
    radial-gradient(60% 55% at 50% -8%, rgba(30, 115, 190, .42), rgba(30, 115, 190, 0) 70%),
    radial-gradient(38% 40% at 86% 104%, rgba(254, 199, 84, .13), rgba(254, 199, 84, 0) 70%),
    radial-gradient(34% 40% at 8% 96%, rgba(30, 115, 190, .16), rgba(30, 115, 190, 0) 70%),
    linear-gradient(180deg, #011627 0%, #011423 55%, #010e1a 100%); }
.vp .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask: radial-gradient(60% 70% at 50% 45%, #000 10%, transparent 75%); mask: radial-gradient(60% 70% at 50% 45%, #000 10%, transparent 75%); }
.vp .hero::after { content: ''; position: absolute; left: 50%; bottom: 0; width: min(1100px, 86%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(143, 193, 238, 0), rgba(143, 193, 238, .3), rgba(143, 193, 238, 0)); }
.vp .h-glow { position: absolute; inset: 0 0 -10%; z-index: -2; pointer-events: none; }
.vp .h-glow i { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.vp .h-glow .b1 { width: clamp(380px, 50vw, 820px); left: -10%; top: -8%; background: radial-gradient(closest-side, rgba(30, 115, 190, .5), rgba(30, 115, 190, .14) 55%, transparent); animation: vp-b1 22s ease-in-out infinite alternate; }
.vp .h-glow .b2 { width: clamp(320px, 38vw, 640px); right: -8%; top: 18%; background: radial-gradient(closest-side, rgba(254, 199, 84, .26), rgba(254, 199, 84, .08) 55%, transparent); animation: vp-b2 26s ease-in-out infinite alternate; }
.vp .h-glow .b3 { width: clamp(300px, 34vw, 600px); left: 32%; bottom: 0; background: radial-gradient(closest-side, rgba(110, 175, 255, .24), rgba(110, 175, 255, .06) 55%, transparent); animation: vp-b3 30s ease-in-out infinite alternate; }
@keyframes vp-b1 { to { transform: translate(14%, 10%) scale(1.12); } }
@keyframes vp-b2 { to { transform: translate(-16%, 8%) scale(.9); } }
@keyframes vp-b3 { to { transform: translate(10%, -14%) scale(1.15); } }
.vp .h-in { max-width: var(--max); }
.vp .h1 { margin: 0 auto; font: 700 clamp(46px, 8.4vw, 134px)/.98 var(--f-display); letter-spacing: -.045em; text-wrap: balance; padding-bottom: .06em; }
/* Design 2's moving blue-to-gold fill, and Design 6's white-to-sky fill */
.vp .h-flow { background: linear-gradient(100deg, #3f93ec 0%, #8cc6ff 18%, #e9f1ff 33%, #FEC754 50%, #e9f1ff 67%, #8cc6ff 82%, #3f93ec 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: vp-flow 16s linear infinite; }
@keyframes vp-flow { to { background-position: 200% 0; } }
.vp .h-sky { background: linear-gradient(180deg, #ffffff 35%, #a9cdf0 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vp .h-about { max-width: 34em; margin: clamp(26px, 2.6vw, 38px) auto 0; font: 400 clamp(17px, 1.5vw, 22px)/1.55 var(--f-body); color: rgba(226, 236, 247, .7); text-wrap: balance; }
.vp .h-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(32px, 3.6vw, 48px); height: 52px; padding: 0 26px; border-radius: 99px;
  background: #fff; color: #011627; font: 600 16px/1 var(--f-display); box-shadow: 0 10px 40px -10px rgba(120, 180, 255, .55); transition: transform .3s var(--ease-out), box-shadow .3s; }
.vp .h-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(120, 180, 255, .7); }
.vp .h-pill .ic { width: 18px; height: 18px; }
.vp .h-round { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-top: clamp(34px, 3.8vw, 52px); border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .25s, box-shadow .25s; }
.vp .h-round:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.vp .h-round .ic { width: 22px; height: 22px; animation: vp-bob 2.4s var(--ease-out) infinite; }
.vp .h-label { display: inline-flex; align-items: center; gap: 12px; height: 56px; margin-top: clamp(40px, 4.4vw, 60px); padding: 0 24px 0 28px; border-radius: 99px;
  color: #fff; font: 600 16px/1 var(--f-display); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .25s, box-shadow .25s; }
.vp .h-label:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.vp .h-label .ic { width: 20px; height: 20px; animation: vp-bob 2.4s var(--ease-out) infinite; }
@keyframes vp-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
.vp .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.vp .rv.in { opacity: 1; transform: none; }
.vp .hero .rv { transition-delay: .25s; }
.vp .hero .rv ~ .rv { transition-delay: .45s; }

/* ----------------------------------------------------------------- tiles -- */
/* Design 1's tile: the words on top, the picture fills the rest. Words and
   picture share one background, so the tile reads as one surface. */
.vp .t { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--tbg); }
.vp .t.is-dark { color: #f5f5f7; }
.vp .t.is-light { color: #1d1d1f; }
.vp .t-full { height: 760px; }
.vp .t-half { height: 640px; }
.vp .t-third { height: 540px; }
.vp .t-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 900px; padding: 64px 24px 0; }
.vp .t h2 { font: 600 clamp(34px, 4.3vw, 56px)/1.08 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.vp .t-half h2 { font-size: clamp(30px, 3vw, 42px); }
.vp .t-third h2 { font-size: clamp(26px, 2.2vw, 32px); }
.vp .t h2 .t-lt { font-weight: 400; }
.vp .t-line { margin-top: 10px; font: 400 clamp(18px, 1.7vw, 25px)/1.3 var(--f-body); text-wrap: balance; }
.vp .t-half .t-line { font-size: clamp(17px, 1.4vw, 20px); }
.vp .t-third .t-line { font-size: 17px; }
.vp .is-dark .t-line { color: rgba(245, 245, 247, .78); }
.vp .is-light .t-line { color: #515154; }
.vp .t-cta { display: flex; justify-content: center; margin-top: 22px; }
.vp .t-art { position: relative; flex: 1; width: 100%; min-height: 220px; margin-top: 8px; }
.vp .t-full .t-art { margin-top: 18px; }

/* the three kinds of action */
/* the buttons: flat, one solid colour, a plain arrow after the words that nudges on hover */
.vp .t-btn, .vp .nt-btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px 0 26px; border-radius: 99px; font: 600 16px/1 var(--f-display); letter-spacing: .005em; white-space: nowrap;
  transition: background .2s, transform .2s; }
.vp .t-btn { background: var(--blue); color: #fff; }
.vp .t-btn:hover { background: var(--blue-deep); }
.vp .b-arr { display: inline-grid; place-items: center; transition: transform .3s var(--ease-out); }
.vp .b-arr .ic { width: 18px; height: 18px; stroke-width: 2.3; }
.vp .t-btn:hover .b-arr, .vp .nt-btn:hover .b-arr { transform: translateX(3px); }
.vp .t-btn:active, .vp .nt-btn:active { transform: scale(.97); }
/* Notify me: the same shape, white on the dark cards and navy on the light ones, so it does not read as "open the app" */
.vp .is-dark .nt-btn { background: #fff; color: #0b2438; }
.vp .is-dark .nt-btn:hover { background: #e4ebf4; }
.vp .is-light .nt-btn { background: #0f2541; color: #fff; }
.vp .is-light .nt-btn:hover { background: #1d3a5f; }
/* "Coming soon" as a small plain label above the name */
.vp .soon-lbl { margin: 0 0 12px; font: 700 12.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.vp .is-dark .soon-lbl { color: rgba(245, 245, 247, .62); }
.vp .is-light .soon-lbl { color: #6e6e73; }
.vp .t-link { display: inline-flex; align-items: center; gap: 2px; font: 500 18px/1 var(--f-display); }
.vp .is-dark .t-link { color: #5cb2ff; }
.vp .is-light .t-link { color: #0b63c2; }
.vp .t-link .ic { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .2s; }
.vp .t-link:hover .ic { transform: translateX(3px); }
.vp .t-ghost { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 99px; font: 600 15px/1 var(--f-display); transition: background .25s, color .25s, box-shadow .25s; }
.vp .is-dark .t-ghost { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.vp .is-light .t-ghost { box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, .35); }
.vp .t-ghost .ic { width: 17px; height: 17px; transition: transform .25s; }
.vp a.t:hover .t-ghost { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.vp a.t:hover .t-ghost .ic { transform: translateX(3px); }

/* "Coming soon", three ways */
.vp .soon-pill, .vp .soon-tag, .vp .soon-eye { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font: 600 14px/1 var(--f-display); }
.vp .soon-pill i, .vp .soon-tag i, .vp .soon-eye i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; }
.vp .soon-pill i::after, .vp .soon-tag i::after, .vp .soon-eye i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--yellow); animation: vp-ping 2.4s ease-out infinite; }
@keyframes vp-ping { 0% { opacity: .9; transform: scale(.4); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
.vp .soon-pill { height: 42px; padding: 0 20px 0 17px; border-radius: 99px; }
.vp .is-dark .soon-pill { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; }
.vp .is-light .soon-pill { background: rgba(29, 29, 31, .045); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, .14); color: #1d1d1f; }
.vp .is-light .soon-pill i, .vp .is-light .soon-tag i, .vp .is-light .soon-eye i { background: #e0a92e; }
.vp .is-light .soon-pill i::after, .vp .is-light .soon-tag i::after, .vp .is-light .soon-eye i::after { border-color: #e0a92e; }
.vp .soon-eye { margin-bottom: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.vp .is-dark .soon-eye { color: var(--yellow); }
.vp .is-light .soon-eye { color: #8a5d00; }
.vp .soon-tag { position: absolute; z-index: 3; top: 18px; left: 18px; height: 32px; padding: 0 14px 0 12px; border-radius: 99px; font-size: 13px; }
.vp .is-dark .soon-tag { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; }
.vp .is-light .soon-tag { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, .1); color: #1d1d1f; }

/* coming soon grid + heading */
.vp .soon-grid { display: grid; grid-template-columns: 1fr 1fr; }
.vp .soon-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.vp .soon-head { text-align: center; padding: clamp(80px, 9vw, 128px) var(--pad) clamp(40px, 4vw, 56px); }
.vp .soon-head h2 { font: 700 clamp(38px, 5vw, 68px)/1.02 var(--f-display); letter-spacing: -.035em; }
.vp .soon-head p { margin-top: 14px; font: 400 clamp(17px, 1.5vw, 21px)/1.4 var(--f-body); color: rgba(226, 236, 247, .66); }

/* ---------------------------------------------------- submit + footer -- */
.vp .submit { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(96px, 10vw, 150px) var(--pad);
  background: radial-gradient(50% 70% at 50% 0%, rgba(30, 115, 190, .3), transparent 70%), radial-gradient(40% 60% at 50% 110%, rgba(254, 199, 84, .14), transparent 70%), #011627; }
.vp .submit h2 { max-width: 15em; margin: 0 auto; font: 700 clamp(32px, 4.2vw, 56px)/1.06 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.vp .submit-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; height: 54px; padding: 0 28px; border-radius: 99px;
  background: var(--yellow); color: var(--navy); font: 600 16px/1 var(--f-display); box-shadow: 0 14px 40px -16px rgba(254, 199, 84, .7); transition: transform .3s var(--ease-out), background .2s; }
.vp .submit-btn:hover { background: #ffd57a; transform: translateY(-2px); }
.vp .submit-btn .ic { width: 18px; height: 18px; }
.vp .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 36px max(var(--pad), (100% - var(--max)) / 2) 112px;
  background: #011627; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(226, 236, 247, .6); font-size: 14px; }
.vp .foot-logo { height: 22px; width: auto; }
.vp .foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vp .foot nav a:hover { color: #fff; }
.vp .foot p { margin-left: auto; }

/* --------------------------------------------------------------- smaller -- */
@media (max-width: 1068px) {
  .vp .t-full { height: 680px; }
  .vp .t-half { height: 580px; }
  .vp .soon-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 734px) {
  .vp .nav .wide { display: none; }
  .vp .nav-logo img { height: 21px; }
  .vp .hero { padding: 108px var(--pad) 110px; }
  .vp .t-full { height: 620px; }
  .vp .t-half, .vp .t-third { height: 560px; }
  .vp .t-copy { padding-top: 50px; }
  .vp .t h2, .vp .t-half h2 { font-size: 34px; }
  .vp .t-third h2 { font-size: 30px; }
  .vp .t-line, .vp .t-half .t-line { font-size: 18px; }
  .vp .soon-grid, .vp .soon-grid.cols-3 { grid-template-columns: 1fr; }
  .vp .soon-grid .t { order: var(--mo, 0); }
  .vp .foot p { margin-left: 0; }
}

/* ------------------------------------------- the original homepage's badges -- */
.vp .h-badges { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vp .h-badge { position: absolute; left: 0; top: 0; will-change: transform; }
.vp .h-badge img { width: 100%; height: 100%; display: block; }
.vp .hero.can-grab { cursor: grab; }
.vp .hero.grabbing { cursor: grabbing; user-select: none; }

/* ----------------------------------------------- the idea section as a card -- */
.vp .submit-card { margin-top: 14px; border-radius: 30px; background: var(--yellow); color: var(--navy); text-align: center; padding: clamp(64px, 8vw, 112px) var(--pad); }
.vp .submit-card h2 { max-width: 15em; margin: 0 auto; font: 700 clamp(30px, 4vw, 52px)/1.06 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.vp .submit-card p { margin-top: 14px; font: 400 clamp(17px, 1.5vw, 21px)/1.4 var(--f-body); color: rgba(1, 22, 39, .74); }
.vp .submit-card .submit-btn { margin-top: 30px; background: var(--navy); color: #fff; box-shadow: none; }
.vp .submit-card .submit-btn:hover { background: #0b2a45; }
@media (max-width: 734px) { .vp .submit-card { margin-top: 10px; } }

/* ----------------------------------------------------- Notify me (coming soon) -- */
.vp .nt { flex-direction: column; align-items: center; }
.vp .nt-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.vp .nt-row[hidden], .vp .nt-form[hidden], .vp .nt-done[hidden] { display: none; }
.vp .nt-done .ic { width: 17px; height: 17px; }
.vp .nt-form { display: flex; align-items: center; gap: 6px; width: min(380px, 86vw); height: 46px; padding: 4px; border-radius: 99px; background: #fff;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, .12), 0 14px 30px -18px rgba(0, 0, 0, .45); animation: nt-in .35s var(--ease-out) both; }
.vp .nt-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 6px 0 14px; font: 400 15px/1 var(--f-body); color: #0b2438; }
.vp .nt-form input::placeholder { color: #7d8a99; }
.vp .nt-form button[type="submit"] { flex: none; height: 100%; padding: 0 16px; border-radius: 99px; background: var(--blue); color: #fff; font: 600 14px/1 var(--f-display); cursor: pointer; transition: background .2s; }
.vp .nt-form button[type="submit"]:hover { background: var(--blue-deep); }
.vp .nt-x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #7d8a99; cursor: pointer; }
.vp .nt-x .ic { width: 16px; height: 16px; transform: rotate(45deg); }
.vp .nt-x:hover { background: rgba(29, 29, 31, .06); color: #0b2438; }
.vp .nt-form:focus-within { box-shadow: 0 0 0 2px var(--blue), 0 14px 30px -18px rgba(0, 0, 0, .45); }
.vp .nt.bad .nt-form { animation: nt-shake .35s ease; box-shadow: 0 0 0 2px #d9534f, 0 14px 30px -18px rgba(0, 0, 0, .45); }
.vp .nt-done { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 18px 0 14px; border-radius: 99px; font: 600 14px/1 var(--f-display); animation: nt-in .35s var(--ease-out) both; }
.vp .is-dark .nt-done { background: rgba(111, 211, 155, .14); box-shadow: inset 0 0 0 1px rgba(111, 211, 155, .4); color: #c9f1da; }
.vp .is-light .nt-done { background: #e8f6ee; box-shadow: inset 0 0 0 1px #b9e2c9; color: #1f6b4a; }
@keyframes nt-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nt-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ------------------------------------------------- the line, word by word -- */
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
.vp .h1-logo .h-words { display: block; position: relative; background: none !important; animation: none; }   /* the words carry the gradient, not the line */
/* the fill paints only inside each word's box, and at this tight line height the box stopped above the tail of the g
   (34 of 120 px below the line, the box 25): room underneath for the tails, given back by the margin, so the lines don't move */
.vp .h-words .w { display: inline-block; padding-bottom: .22em; margin-bottom: -.16em;
  background-image: linear-gradient(100deg, #a9cff7 0%, #d3e7ff 18%, #f6f9ff 33%, #ffe6ae 50%, #f6f9ff 67%, #d3e7ff 82%, #a9cff7 100%);
  background-size: var(--lw, 200%) 100%; background-repeat: repeat-x; background-position: calc(var(--bx, 0px) + var(--fl)) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vp-fl 34s linear infinite;
  opacity: 0; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--w0, 2.05s) + var(--wi, 0) * 110ms); }   /* comes in where it stands, as the logo finishes building */
@media (prefers-reduced-motion: no-preference) { .vp .h-words .w { transform: translateY(.2em); filter: blur(6px); } }   /* rises out of a soft blur */
@keyframes vp-fl { to { --fl: calc(var(--lw, 0px) * -1); } }
.vp .hero.is-in .h-words .w { opacity: 1; transform: none; filter: none; }
.vp .h1-logo .logo-svg { display: block; width: 100%; height: auto; aspect-ratio: 1300 / 200; overflow: visible; cursor: pointer; }


/* Version 4 — the pick. */
/* one background for the whole page, the hero's: navy, soft blue and gold light, a faint dot grid. It is fixed,
   so the hero and the gaps between the cards read as one surface you scroll over. (Trying it out: to go back,
   delete this block and the hero rule with the gradients returns.) */
.d4 .vp { background: transparent; isolation: isolate; }
/* as tall as the screen with the browser's address bar hidden (100lvh), and the page itself navy underneath: on Chrome
   for Android the bar slides away mid-scroll before fixed layers resize, which showed the white page below for a moment */
html:has(.d4), body:has(.d4) { background: #011321; }
.d4 .vp::before { content: ''; position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(60% 55% at 50% -6%, rgba(30, 115, 190, .26), rgba(30, 115, 190, 0) 70%),
    radial-gradient(40% 45% at 88% 100%, rgba(254, 199, 84, .07), rgba(254, 199, 84, 0) 70%),
    radial-gradient(36% 45% at 6% 92%, rgba(30, 115, 190, .12), rgba(30, 115, 190, 0) 70%),
    linear-gradient(180deg, #011627 0%, #011321 100%); }
.d4 .hero { background: transparent; }
.d4 .hero::before, .d4 .hero::after { display: none; }
.d4 .h-glow { opacity: .6; }
.d4 .foot { background: transparent; }
.d4 .h1-logo .h-logo { display: block; width: clamp(250px, 34vw, 500px); margin: 0 auto clamp(20px, 2.6vw, 38px); }
.d4 .h1-logo .h-logo img { width: 100%; height: auto; }
.d4 .h1-logo .h-logo { width: clamp(280px, 44vw, 640px); position: relative; left: -1.6%; }   /* the live homepage nudges its logo left a touch */
/* the button comes in once the last word has (as the live homepage's arrow does) */
.d4 .hero .h-label.rv { transform: none; transition: opacity .9s cubic-bezier(.22, 1, .36, 1) 3s; }   /* fades in, in place, after the words */
/* the moving fill from Version 2's "Chabad.org Labs", paler and slower */
.d4 .h-soft { background-image: linear-gradient(100deg, #a9cff7 0%, #d3e7ff 18%, #f6f9ff 33%, #ffe6ae 50%, #f6f9ff 67%, #d3e7ff 82%, #a9cff7 100%); animation-duration: 34s; }

/* apps: Version 2's rounded cards on navy */
.d4 .apps { padding: 14px 14px 14px; }
.d4 .live { display: flex; flex-direction: column; gap: 14px; }
.d4 .soon-grid { gap: 14px; margin-top: 14px; }
.d4 .soon-grid + .live { margin-top: 14px; }
.d4 .soon-grid > .t:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd card out at the end takes the whole row, rather than leaving a hole beside it */
.d4 .t { border-radius: 30px; }
.d4 .t.is-dark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.d4 .t-full { height: 780px; }
/* each card starts a little smaller and grows to its full size as it comes into view: page.js (grow) */
@media (max-width: 734px) {
  .d4 .apps { padding: 10px; }
  .d4 .live, .d4 .soon-grid { gap: 10px; }
  .d4 .soon-grid { margin-top: 10px; }
  .d4 .t-full, .d4 .t-half { height: 560px; }   /* on a phone every card is the coming-soon cards' height */
  /* on a phone the hero stops short of the full screen, so the top of the first card shows below it: there is
     more, scroll (Berel, 3 Nov 2026) */
  .d4 .hero { min-height: 86vh; min-height: 86svh; }
  .d4 .t, .d4 .submit-card { border-radius: 24px; }
}


/* =============================================================================
   THE HERO'S SELF-BUILDING LOGO — the live homepage's styles (css/home.css,
   "LOGO BUILD"), scoped to the new page. See hero-logo.js.
   ============================================================================= */
.vp{
  /* timing — seconds after the build starts */
  --logo-start:       .075s;   /* pause before anything happens                */
  --logo-t-front:     0s;      /* STEP 1a  front (yellow) circle: outline, then fill */
  --logo-t-back:      .45s;    /* STEP 1b  back (blue) circle grows out from behind it */
  --logo-t-flame:     .71s;    /* STEP 2   flame outline → fill + flicker      */
  --logo-t-flask:     .9s;     /* STEP 3   flask outline → liquid → bubbles    */
  --logo-t-word:      .71s;    /* STEP 4   wordmark, letter by letter          */
  --logo-letter-gap:  .045s;   /* STEP 4   stagger between letters             */
  --logo-t-idle:      2.62s;   /* idle loops (flame flicker, bubble) start     */
  /* easing */
  --logo-ease-draw:   cubic-bezier(.65, 0, .35, 1);       /* outlines drawing  */
  --logo-ease-out:    cubic-bezier(.22, 1, .36, 1);
  --logo-ease-spring: cubic-bezier(.34, 1.56, .64, 1);    /* overshoot         */
  --logo-ease-liquid: cubic-bezier(.3, 1.2, .55, 1);      /* gentle overshoot  */
  /* colours — exact values from the logo image */
  --logo-blue:   #1E73BE;
  --logo-yellow: #FEC754;
  --logo-white:  #fff;
}

/* ---- static, finished logo (also what reduced-motion and no-JS users see) */
.vp .logo-svg{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 200;     /* the logo's own proportions → no layout shift */
  overflow: visible;            /* outline strokes at the edges are never clipped */
}

.lg-bubble{ opacity: 0; }                                  /* bubbles only exist while animating */
.lg-bubble{ fill: none; stroke: var(--logo-blue); stroke-width: .9; }
.lg-flask-trace{ stroke-linejoin: round; }
/* everything that scales/rotates pivots on its own centre */
.lg-c-fill, .lg-ring, .lg-bubble, .lg-flame-idle{ transform-box: fill-box; transform-origin: center; }
.lg-slide{ transform-box: fill-box; transform-origin: center; }   /* grows from the yellow circle's own centre */
.lg-flame-idle{ transform-origin: 50% 100%; }              /* flame flickers from its base */

/* (on the live site everything below sits inside @media (prefers-reduced-motion: no-preference)) */

  /* shared keyframes */
  @keyframes lg-draw       { from{ stroke-dashoffset: 1 }  to{ stroke-dashoffset: 0 } }   /* outline draws itself   */
  @keyframes lg-stroke-out { from{ stroke-opacity: 1 }     to{ stroke-opacity: 0 } }      /* outline hands over to fill */
  @keyframes lg-fill-in    { from{ fill-opacity: 0 }       to{ fill-opacity: 1 } }
  @keyframes lg-fade-in    { from{ opacity: 0 }            to{ opacity: 1 } }

  /* ---- STEP 1 — circles --------------------------------------------------
     outline draws (stroke-dashoffset, pathLength=1) → fill floods in.
     Blue goes first; yellow (it sits in front) rolls in over it. */
  .vp .logo-svg.is-building .lg-circle--yellow  { --d: calc(var(--logo-start) + var(--logo-t-front)); }
  .vp .logo-svg.is-building .lg-circle--blue    { --d: calc(var(--logo-start) + var(--logo-t-back)); }

  .vp .logo-svg.is-building .lg-ring{
    stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1;   /* undrawn until its turn */
    transform: rotate(-90deg);                                      /* start the outline at 12 o'clock */
    animation:
      lg-draw       .45s var(--logo-ease-draw) var(--d) both,
      lg-stroke-out .19s linear calc(var(--d) + .38s) both;
  }
  .vp .logo-svg.is-building .lg-circle--blue   .lg-ring{ stroke: var(--logo-blue); }
  .vp .logo-svg.is-building .lg-circle--yellow .lg-ring{ stroke: var(--logo-yellow); }

  .vp .logo-svg.is-building .lg-c-fill{                           /* the fill "floods" in, springy */
    animation: lg-flood .45s var(--logo-ease-spring) calc(var(--d) + .3s) both;
  }
  @keyframes lg-flood{ from{ opacity: 0; transform: scale(.55) } to{ opacity: 1; transform: scale(1) } }

  .vp .logo-svg.is-building .lg-slide{                            /* rolls in from the lower right over the blue circle, small bounce */
    animation: lg-slide .64s var(--logo-ease-spring) var(--d) both;
  }
  @keyframes lg-slide{ from{ transform: translate(var(--sx), var(--sy)) scale(var(--ss, 1)) } to{ transform: translate(0, 0) scale(1) } }

  /* ---- STEP 2 — flame: outline draws, then fills white with a flicker ----- */
  .vp .logo-svg.is-building .lg-flame-idle{ --d: calc(var(--logo-start) + var(--logo-t-flame)); }
  .vp .logo-svg.is-building .lg-flame{
    stroke: var(--logo-white); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation:
      lg-draw       .53s var(--logo-ease-draw) var(--d) both,
      lg-flame-fill .53s linear calc(var(--d) + .41s) both,
      lg-stroke-out .23s linear calc(var(--d) + .45s) both;
  }
  @keyframes lg-flame-fill{                                          /* quick flicker as it lights */
    0%{ fill-opacity: 0 }  30%{ fill-opacity: 1 }  44%{ fill-opacity: .45 }
    60%{ fill-opacity: 1 } 76%{ fill-opacity: .78 } 100%{ fill-opacity: 1 }
  }

  /* ---- STEP 3 — flask: outline draws → walls fill → liquid rises → bubbles rise & pop */
  .vp .logo-svg.is-building .lg-flask{ --d: calc(var(--logo-start) + var(--logo-t-flask)); }
  .vp .logo-svg.is-building .lg-flask-trace{
    stroke: var(--logo-blue); stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation:
      lg-draw       .45s var(--logo-ease-draw) var(--d) both,
      lg-stroke-out .23s linear calc(var(--d) + .9s) both;          /* keeps outlining the belly until the liquid is in */
  }
  .vp .logo-svg.is-building .lg-glass{
    animation: lg-fade-in .23s linear calc(var(--d) + .34s) both;
  }
  .vp .logo-svg.is-building .lg-liquid{                            /* slides up inside the flask's silhouette (clip-path) */
    animation: lg-liquid-rise .53s var(--logo-ease-liquid) calc(var(--d) + .41s) both;
  }
  @keyframes lg-liquid-rise{ from{ transform: translateY(46px) } to{ transform: translateY(0) } }

  .vp .logo-svg.is-building .lg-bubble:not(.lg-bubble--idle){      /* 3 bubbles: rise out of the liquid, then pop */
    animation: lg-bubble .47s var(--logo-ease-out) calc(var(--d) + .79s + var(--bd)) both;
  }
  @keyframes lg-bubble{
    0%  { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: 1; }
    78% { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); }
    100%{ opacity: 0; transform: translate(var(--bx), calc(var(--by) - 3px)) scale(2); }   /* pop */
  }

  /* ---- STEP 4 — wordmark, letter by letter (left → right) ----------------- */
  .vp .logo-svg.is-building .lg-word{ --d0: calc(var(--logo-start) + var(--logo-t-word)); }
  .vp .logo-svg.is-building .lg-glyph{
    --d: calc(var(--d0) + var(--i) * var(--logo-letter-gap));
    stroke: var(--logo-white); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation:
      lg-draw       .38s var(--logo-ease-draw) var(--d) both,         /* outline draws on   */
      lg-fill-in    .23s linear calc(var(--d) + .27s) both,           /* then it fills      */
      lg-stroke-out .23s linear calc(var(--d) + .3s) both;
  }

  /* ---- IDLE — very subtle; starts once the build has finished ------------- */
  .vp .logo-svg.is-building .lg-flame-idle{
    animation: lg-flame-idle 3.6s ease-in-out var(--logo-t-idle) infinite both;
  }
  @keyframes lg-flame-idle{                                           /* a barely-there flame flicker */
    0%,100%{ transform: scale(1, 1)         rotate(0deg); }
    25%    { transform: scale(1.012, 1.03)  rotate(-.5deg); }
    55%    { transform: scale(.992, .985)   rotate(.35deg); }
    78%    { transform: scale(1.006, 1.02)  rotate(-.25deg); }
  }
  .vp .logo-svg.is-building .lg-bubble--idle{                       /* one bubble every ~9s */
    animation: lg-bubble-idle 9s linear calc(var(--logo-t-idle) + 2s) infinite both;
  }
  @keyframes lg-bubble-idle{
    0%    { opacity: 0; transform: translate(0, 0) scale(.6); }
    2%    { opacity: 1; }
    11%   { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); }
    13.5% { opacity: 0; transform: translate(var(--bx), calc(var(--by) - 3px)) scale(2); }
    100%  { opacity: 0; transform: translate(var(--bx), calc(var(--by) - 3px)) scale(2); }
  }

/* where the blue circle and the bubbles start from */
.vp .logo-svg .lg-circle--blue{ --sx:64.51px; --sy:72.66px; --ss:0.584; }
.vp .logo-svg .lg-b1{ --bx:8.7px; --by:-37.7px; --bd:0.00s; }
.vp .logo-svg .lg-b2{ --bx:3.6px; --by:-30.4px; --bd:0.12s; }
.vp .logo-svg .lg-b3{ --bx:0.0px; --by:-26.8px; --bd:0.24s; }
.vp .logo-svg .lg-b4{ --bx:8.3px; --by:-35.8px; }
.vp .logo-svg .lg-i0{ --i:0; }
.vp .logo-svg .lg-i1{ --i:1; }
.vp .logo-svg .lg-i2{ --i:2; }
.vp .logo-svg .lg-i3{ --i:3; }
.vp .logo-svg .lg-i4{ --i:4; }
.vp .logo-svg .lg-i5{ --i:5; }
.vp .logo-svg .lg-i6{ --i:6; }
.vp .logo-svg .lg-i7{ --i:7; }
.vp .logo-svg .lg-i8{ --i:8; }
.vp .logo-svg .lg-i9{ --i:9; }
.vp .logo-svg .lg-i10{ --i:10; }
.vp .logo-svg .lg-i11{ --i:11; }
.vp .logo-svg .lg-i12{ --i:12; }
.vp .logo-svg .lg-i13{ --i:13; }


/* =============================================================================
   SCENES — the moving picture in each tile (see scenes.js). Nothing moves until
   the page adds .play; taking .play off puts every scene back to its start, so
   it plays again the next time it scrolls in.
   ============================================================================= */
.sc { position: absolute; inset: 0; overflow: hidden; container-type: size; isolation: isolate; text-align: left; line-height: 1.3; }
.sc img { display: block; max-width: none; }
.sc .caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 .06em; vertical-align: -.16em; background: currentColor; animation: sc-caret 1.1s steps(1) infinite; }
@keyframes sc-caret { 50% { opacity: 0; } }
.sc [hidden] { display: none !important; }

/* ------------------------------------------------------------------ Tanya -- */
/* the flame behind the device, faded out at the top so it has no edge */
.sc-tanya .tn-flame { position: absolute; left: 50%; top: 50%; height: 128cqh; width: auto; transform: translate(-50%, -52%); opacity: 0; filter: drop-shadow(0 0 4cqmin rgba(91, 183, 232, .55));
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 38%); mask: linear-gradient(to bottom, transparent 0, #000 38%); }
.sc-tanya.play .tn-flame { animation: tn-flame 2.2s var(--ease-out) forwards; }
@keyframes tn-flame { from { opacity: 0; transform: translate(-50%, -44%) scale(.92); } to { opacity: .15; transform: translate(-50%, -52%); } }

/* one device, by the visitor's screen: phone, tablet or computer */
.sc-tanya .dv { position: absolute; left: 50%; bottom: 4cqh; translate: -50% 0; display: none; opacity: 0; }
.sc-tanya.play .dv { animation: tn-dv 1.1s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes tn-dv { from { opacity: 0; transform: translateY(6%); } to { opacity: 1; transform: none; } }
@media (min-width: 1069px) { .sc-tanya .dv-d { display: block; } }
@media (min-width: 735px) and (max-width: 1068px) { .sc-tanya .dv-t { display: block; } }
@media (max-width: 734px) { .sc-tanya .dv-m { display: block; } }
/* laptop */
.sc-tanya .dv-d { width: min(84cqw, 172cqh); bottom: auto; top: 7cqh; }   /* runs off the bottom of the card */
.sc-tanya .dv-lid { position: relative; padding: 1.6% 1.6% 0; border-radius: 18px 18px 0 0; background: #0c0e12;
  box-shadow: inset 0 0 0 1.5px #3a3f48, 0 40px 70px -34px rgba(0, 0, 0, .8); }
.sc-tanya .dv-lid::before { content: ''; position: absolute; left: 50%; top: .8%; width: .7%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #2a2f38; }
/* iPad, landscape */
.sc-tanya .dv-t { width: min(80cqw, 122cqh); padding: 2.4%; border-radius: 28px; background: #15171c;
  box-shadow: inset 0 0 0 1.5px #3b3f47, 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 70px -32px rgba(0, 0, 0, .8); }
.sc-tanya .dv-t .tv { border-radius: 10px; }
/* phone: an iPhone 15 Pro to scale. --u is one of its points: the body is 426 x 885, a 393 x 852 screen inside a
   16.5-point edge (4.5 of black titanium, 12 of bezel), the corners all on one centre (71.5, 67 and 55 points) */
.sc-tanya .dv-m { --u: calc(92cqh / 885); width: calc(426 * var(--u)); height: calc(885 * var(--u)); padding: calc(4.5 * var(--u)); border-radius: calc(71.5 * var(--u));
  background: linear-gradient(160deg, #7c7f85 0%, #2c2e32 15%, #4e5156 37%, #232528 62%, #56595e 84%, #8d9096 100%);
  box-shadow: inset 0 0 0 calc(.7 * var(--u)) rgba(255, 255, 255, .24), inset 0 0 0 calc(1.7 * var(--u)) rgba(0, 0, 0, .45),
    0 calc(34 * var(--u)) calc(64 * var(--u)) calc(-20 * var(--u)) rgba(0, 0, 0, .75), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .3); }
.sc-tanya .ph-bz { height: 100%; padding: calc(12 * var(--u)); border-radius: calc(67 * var(--u)); background: #050506; box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .05); }
.sc-tanya .ph-scr { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(55 * var(--u)); background: #1e2356; transition: background .45s; }
/* the status bar carries on the page's top edge, so there is no seam: the landing's navy (lighter in the middle, as
   its top row is), and over it the chapter bar's blue, which fades in when the chapter opens */
.sc-tanya .ph-sb { position: relative; z-index: 1; flex: none; height: calc(59 * var(--u)); margin-bottom: -1px; background: linear-gradient(90deg, #1e2356, #212b5e 25%, #232c62 50%, #232c62 87%, #1d275c); }
.sc-tanya .ph-sb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #294474, #2c4477 8%); opacity: 0; transition: opacity .45s; }
.sc-tanya .ph-scr:has(.tv.on-a:not(.out)) .ph-sb::before { opacity: 1; }
.sc-tanya .ph-sb svg { position: relative; display: block; width: 100%; height: 100%; }
.sc-tanya .dv-m .tv { flex: none; border-radius: 0; background: #1e2356; }
/* the home bar goes dark on the white chapter */
.sc-tanya .ph-isl { position: absolute; z-index: 3; left: 50%; top: calc(11 * var(--u)); width: calc(125 * var(--u)); height: calc(37 * var(--u)); translate: -50% 0; border-radius: 99px; background: #000; }
.sc-tanya .ph-isl::after { content: ''; position: absolute; right: calc(12 * var(--u)); top: 50%; width: calc(11 * var(--u)); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #34405e 0, #111622 42%, #050608 72%); }   /* the camera */
.sc-tanya .ph-home { position: absolute; z-index: 3; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); translate: -50% 0; border-radius: 99px;
  background: rgba(255, 255, 255, .88); transition: background .45s; }
.sc-tanya .ph-scr:has(.tv.on-a:not(.out)) .ph-home { background: rgba(0, 0, 0, .82); }
.sc-tanya .ph-scr::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .025) 30%, rgba(255, 255, 255, 0) 42%); }   /* the glass */
/* the side buttons: action and volume on the left, power on the right */
.sc-tanya .ph-k { position: absolute; width: calc(3.4 * var(--u)); border-radius: calc(1.6 * var(--u)); background: linear-gradient(90deg, #2a2c30, #6d7076 45%, #2c2e32); }
.sc-tanya .ph-act, .sc-tanya .ph-vu, .sc-tanya .ph-vd { left: calc(-2.6 * var(--u)); }
.sc-tanya .ph-pw { right: calc(-2.6 * var(--u)); }
.sc-tanya .ph-act { top: calc(150 * var(--u)); height: calc(30 * var(--u)); }
.sc-tanya .ph-vu { top: calc(214 * var(--u)); height: calc(58 * var(--u)); }
.sc-tanya .ph-vd { top: calc(286 * var(--u)); height: calc(58 * var(--u)); }
.sc-tanya .ph-pw { top: calc(244 * var(--u)); height: calc(92 * var(--u)); }

/* the screen: landing, then the chapter's top, then the chapter text scrolling under its bar */
.sc-tanya .tv { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: #fbfbf8; border-radius: 3px; }
.sc-tanya .tv img { position: absolute; left: 0; top: 0; width: 100%; display: block; }
.sc-tanya .tv-L, .sc-tanya .tv-A { height: 100%; }
.sc-tanya .tv-A { opacity: 0; transform: translateX(5%); transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.sc-tanya .tv.on-a .tv-A { opacity: 1; transform: none; }
.sc-tanya .tv-T { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.sc-tanya .tv.on-t .tv-T { opacity: 1; }
.sc-tanya .tv-Tm { height: auto; }
.sc-tanya .tv.scroll .tv-Tm { transform: translateY(var(--sy)); transition: transform 11.5s cubic-bezier(.45, .05, .55, .95); will-change: transform; }
.sc-tanya .tv-Tf { height: auto; clip-path: var(--clip); }
.sc-tanya .tv.out .tv-A, .sc-tanya .tv.out .tv-T { opacity: 0; transition: opacity .6s ease; }
.sc-tanya .tv-tap { position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(30, 115, 190, .4); opacity: 0; pointer-events: none; }
.sc-tanya .dv-m .tv-tap { width: 20%; }
.sc-tanya .tv-tap.go { animation: tv-tap .6s ease-out; }
@keyframes tv-tap { from { opacity: .95; transform: scale(.25); } to { opacity: 0; transform: scale(1.3); } }
.sc-tanya .tv-cur { position: absolute; width: 1.5%; min-width: 11px; left: 78%; top: 90%; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  transition: left 1s cubic-bezier(.45, .05, .25, 1), top 1s cubic-bezier(.45, .05, .25, 1), opacity .3s; }
.sc-tanya .tv-cur.on { opacity: 1; }
.sc-tanya .tv-cur.click { animation: tv-click .25s ease; }
@keyframes tv-click { 50% { transform: scale(.82); } }
.sc-tanya .tv.still, .sc-tanya .tv.still * { transition: none !important; }

/* ------------------------------------------------ Every Day with the Rebbe -- */
.sc-every-day .ed-rail { position: absolute; inset: 0; --rh: 15cqh; --x: 47cqw; transition: transform .6s cubic-bezier(.6, 0, .2, 1), opacity .45s ease;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); }
.sc-every-day .ed-rail::before { content: ''; position: absolute; left: var(--x); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #e4e0d7; }
.sc-every-day .ed-track { position: absolute; left: 0; right: 0; top: calc(50% - 8.5 * var(--rh)); transform: translateY(calc(6 * var(--rh))); }
.sc-every-day .ed-y { position: relative; height: var(--rh); display: flex; align-items: center; gap: 2.4cqh; padding-left: calc(var(--x) + 3.6cqh); }
.sc-every-day .ed-y i { position: absolute; left: var(--x); top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: #f5f2ec; border: 1.5px solid #b9b2a4; }
.sc-every-day .ed-y b { font: 400 6.4cqh/1 var(--f-news); color: #5b564d; opacity: .55; transform-origin: 0 55%; }
.sc-every-day .ed-y.on i { width: 15px; height: 15px; }
.sc-every-day .ed-y.on b { font-size: 11cqh; font-weight: 500; transform: scale(.58); }
.sc-every-day .ed-y.on span { font: 400 5.2cqh/1 var(--f-heb); color: #6b6255; opacity: 0; }
.sc-every-day.play .ed-track { transform: none; transition: transform 1.05s cubic-bezier(.2, .75, .15, 1) .05s; }
.sc-every-day.play .ed-y.on i { background: #1d1c19; border-color: #1d1c19; transition: background .3s .9s, border-color .3s .9s; }
.sc-every-day.play .ed-y.on b { transform: none; color: #1d1c19; opacity: 1; transition: transform .6s var(--ease-out) .8s, color .45s .8s, opacity .45s .8s; }
.sc-every-day.play .ed-y.on span { opacity: 1; transition: opacity .5s 1s; }
/* behind it, the app's timeline: a rail down each side, in the space beside the month, with a dot for each day.
   Every 3 s one day lights up blue and its chips come up beside it, then fade (an 18 s round of six; transform and opacity only) */
.sc-every-day .ed-bg { position: absolute; inset: 0; pointer-events: none; --g: calc((100cqw - min(560px, 86cqw)) / 2); --rx: calc(var(--g) * .26); }
/* a rail is a 14px strip centred on its line, so the fade at its ends doesn't cut its dots off (a mask clips to the box) */
.sc-every-day .eb-rail { position: absolute; top: 6%; bottom: 6%; width: 14px;
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.sc-every-day .eb-rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; translate: -50% 0; background: #e4ded2; }
.sc-every-day .eb-l { left: calc(var(--rx) - 7px); }
.sc-every-day .eb-r { right: calc(var(--rx) - 7px); }
.sc-every-day .eb-rail i { position: absolute; left: 50%; width: 7px; height: 7px; translate: -50% -50%; border-radius: 50%; background: #f4f1ea; border: 1.5px solid #d3ccbe; }
.sc-every-day .em { position: absolute; top: var(--y); width: 0; height: 0; }
.sc-every-day .em-l { left: var(--rx); }
.sc-every-day .em-r { right: var(--rx); }
.sc-every-day .em-dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: #1f4e9c; opacity: 0; }
.sc-every-day .em-dot::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid #1f4e9c; opacity: 0; }
/* a moment: the day and its time, what the Rebbe did (the main thing), and under it the entry's chips if it has any */
.sc-every-day .em-c { position: absolute; top: -9px; display: flex; flex-direction: column; gap: 5px; width: max-content; max-width: min(250px, calc(var(--g) - var(--rx) - 36px)); opacity: 0; }
.sc-every-day .em-l .em-c { left: 18px; align-items: flex-start; text-align: left; }
.sc-every-day .em-r .em-c { right: 18px; align-items: flex-end; text-align: right; }
.sc-every-day .em-c p { margin: 0; }
.sc-every-day .em-when { display: flex; align-items: baseline; gap: 9px; }
.sc-every-day .em-r .em-when { flex-direction: row-reverse; }
.sc-every-day .em-when b { font: 500 15px/1.1 var(--f-news); color: #7a7164; }
.sc-every-day .em-when time { width: auto; font: 400 12.5px/1 'IBM Plex Sans', var(--f-body); color: #9a8f7e; font-variant-numeric: tabular-nums; }
.sc-every-day .em-what { font: 500 14.5px/1.35 'IBM Plex Sans', var(--f-body); color: #3d3830; text-wrap: balance; }
.sc-every-day .em-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sc-every-day .em-r .em-chips { justify-content: flex-end; }
.sc-every-day .em-chips .ed-chip { padding: 1px 8px; font-size: 11.5px; }
.sc-every-day .em-chips .ed-chip svg { width: 11px; height: 11px; }
/* eight moments: the first at half a second, then one every 2.5 s (a 20 s round), each on screen about 6 s */
.sc-every-day.play .em-dot { animation: em-dot 20s ease-in-out calc(.5s + var(--i) * 2.5s) infinite both; }
.sc-every-day.play .em-dot::after { animation: em-ring 20s ease-out calc(.5s + var(--i) * 2.5s) infinite both; }
.sc-every-day.play .em-c { animation: em-in 20s ease-in-out calc(.75s + var(--i) * 2.5s) infinite both; }
@keyframes em-dot { 0% { opacity: 0; transform: scale(.3); } 2.5%, 28% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes em-ring { 0% { opacity: 0; transform: none; } 2.5% { opacity: .55; } 11%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes em-in { 0% { opacity: 0; transform: translateY(5px); } 3.5% { opacity: 1; transform: none; } 26% { opacity: 1; transform: translateY(-3px); } 30.5%, 100% { opacity: 0; transform: translateY(-6px); } }
@container (width < 1200px) { .sc-every-day .em-chips { display: none; } }   /* a narrower side: the day and what happened */
@container (width < 900px) { .sc-every-day .em-c { display: none; } }        /* narrower still: the dots alone */
@container (width < 620px) { .sc-every-day .ed-bg { display: none; } }                                   /* a phone: the month fills the card */
/* the chips, here and in the month below */
.sc-every-day .ed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid #d3d9e2; border-radius: 99px; background: #fff;
  color: #1f4e9c; font: 400 12.5px/1.4 'IBM Plex Sans', var(--f-body); white-space: nowrap; }
.sc-every-day .ed-chip svg { flex: none; width: 13px; height: 13px; }
.sc-every-day .ed-chips { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 7px; }
.sc-every-day .ed-chips .ed-chip { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .45s var(--ease-out); }
.sc-every-day .ed-d.open .ed-chips .ed-chip { opacity: 1; transform: none; transition-delay: .4s; }   /* they come up just after the day opens */

/* into the month: the rail steps back and fades; the month comes up in the middle, plain and roomy */
.sc-every-day.in-year .ed-rail { opacity: 0; transform: translateX(-8cqw); }
.sc-every-day .ed-panel { position: absolute; left: 50%; top: 5cqh; bottom: 0; width: min(560px, 86cqw); translate: -50% 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(28px);
  background: #fffdf9; border: 1px solid #ece6da; border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 24px 40px -34px rgba(60, 45, 20, .35); color: #232323;
  transition: opacity .55s ease .1s, transform .7s cubic-bezier(.2, .75, .15, 1) .1s; }
.sc-every-day.in-year .ed-panel { opacity: 1; transform: none; }
.sc-every-day .ed-ph { margin: 0; padding: 22px 30px 14px; font: 500 22px/1 var(--f-news); color: #1d1c19; }
.sc-every-day .ed-days { position: relative; flex: 1; overflow: hidden; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.sc-every-day .ed-list { transition: transform .75s cubic-bezier(.45, .05, .2, 1); }
.sc-every-day .ed-d { padding: 15px 30px 16px; border-top: 1px solid #f1ece2; transition: background .5s; }
.sc-every-day .ed-dh { display: flex; align-items: baseline; gap: 14px; }
.sc-every-day .ed-dh b { font: 400 19px/1.2 var(--f-news); color: #1d1c19; }
.sc-every-day .ed-dh em { font: 400 13px/1 'IBM Plex Sans', var(--f-body); font-style: normal; color: #9a8f7e; }
.sc-every-day .ed-ev { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.2, .75, .15, 1), opacity .3s ease; }
.sc-every-day .ed-ev > div { overflow: hidden; }
.sc-every-day .ed-ev p { display: flex; gap: 14px; margin: 9px 0 0; font: 400 14px/1.45 'IBM Plex Sans', var(--f-body); color: #2a2722; }
.sc-every-day .ed-ev p span { min-width: 0; }
.sc-every-day time { flex: none; width: 62px; color: #9a8f7e; font-variant-numeric: tabular-nums; }
.sc-every-day .ed-d.open { background: #faf6ee; }
.sc-every-day .ed-d.open .ed-ev { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s cubic-bezier(.2, .75, .15, 1), opacity .45s ease .12s; }
@container (width < 620px) {
  .sc-every-day .ed-panel { top: 4cqh; width: 90cqw; }
  .sc-every-day .ed-ph { padding: 18px 20px 12px; }
  .sc-every-day .ed-d { padding: 13px 20px 14px; }
  .sc-every-day time { width: 58px; }
}

/* ------------------------------------------------------------ Chabad.org AI -- */
/* behind the chat: the logo's blue and gold, drifting slowly, and a faint dot grid */
.sc-ai .ai-bg { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: linear-gradient(transparent 0, #000 30%); mask: linear-gradient(transparent 0, #000 30%); }   /* fades in under the words, no edge */
.sc-ai .ai-bg i { position: absolute; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.sc-ai .ai-bg .g1 { width: 74cqw; left: -22cqw; top: -42cqw; background: radial-gradient(closest-side, rgba(30, 115, 190, .45), rgba(30, 115, 190, 0)); }
.sc-ai .ai-bg .g2 { width: 60cqw; right: -18cqw; bottom: -36cqw; background: radial-gradient(closest-side, rgba(254, 199, 84, .62), rgba(254, 199, 84, 0)); }
.sc-ai .ai-bg .g3 { width: 44cqw; left: 46cqw; top: -14cqw; background: radial-gradient(closest-side, rgba(106, 169, 255, .34), rgba(106, 169, 255, 0)); }
.sc-ai.play .ai-bg .g1 { animation: ai-d1 19s ease-in-out infinite alternate; }
.sc-ai.play .ai-bg .g2 { animation: ai-d2 23s ease-in-out infinite alternate; }
.sc-ai.play .ai-bg .g3 { animation: ai-d3 27s ease-in-out infinite alternate; }
@keyframes ai-d1 { to { transform: translate(12cqw, 8cqw) scale(1.1); } }
@keyframes ai-d2 { to { transform: translate(-14cqw, -6cqw) scale(.92); } }
@keyframes ai-d3 { to { transform: translate(-10cqw, 10cqw) scale(1.15); } }
.sc-ai .ai-dots-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(20, 90, 170, .34) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask: radial-gradient(60% 75% at 50% 55%, #000 15%, transparent 75%); mask: radial-gradient(60% 75% at 50% 55%, #000 15%, transparent 75%); }
/* the chat sits in the upper part of the tile; it grows upward from the box, like the page */
.sc-ai .ai { position: absolute; left: 50%; top: 3cqh; bottom: 13cqh; width: min(88cqw, 680px); translate: -50% 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  font: 400 clamp(14px, 1.35cqw, 17px)/1.45 var(--f-body); color: #0b2438; opacity: 0; transition: opacity .5s ease; }
.sc-ai.play .ai { opacity: 1; }
.sc-ai .ai-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; transition: opacity .45s, transform .45s; }
.sc-ai .ai.leaving .ai-thread { opacity: 0; transform: translateY(-10px); }
/* the order of a send: the box settles at the bottom (0–.65s), the question rises from it (.45s), then the answer card (.85s) */
.sc-ai .ai-q { align-self: flex-end; max-width: 80%; background: #1E73BE; color: #fff; font-weight: 600; padding: 10px 16px; border-radius: 18px 18px 4px 18px;
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: 100% 100%; transition: opacity .35s ease .45s, transform .55s cubic-bezier(.2, .9, .3, 1.12) .45s; }
.sc-ai .ai-a { background: #fff; border: 1px solid #bccee6; border-radius: 18px; padding: 14px 18px 16px; box-shadow: 0 1px 2px rgba(10, 40, 80, .1), 0 26px 46px -24px rgba(0, 45, 105, .6);
  overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .4s ease .85s, transform .55s var(--ease-out) .85s, height .6s cubic-bezier(.22, .61, .36, 1) 0s; }
.sc-ai .ai.asked .ai-q, .sc-ai .ai.asked .ai-a { opacity: 1; transform: none; }
.sc-ai .ai.idle .ai-q, .sc-ai .ai.idle .ai-a { transition: none; }
.sc-ai .ai-who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .86em; color: #005E9E; }
.sc-ai .ai-who i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #FEC754; color: #006FC9; }
.sc-ai .ai-who svg { width: 12px; height: 12px; }
.sc-ai .ai-body { position: relative; margin-top: 8px; }
.sc-ai .ai-dots { position: absolute; left: 0; top: 6px; display: flex; gap: 5px; transition: opacity .2s; }
.sc-ai .ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9db4cc; }
.sc-ai.play .ai-dots i { animation: ai-dot 1s ease-in-out infinite; }
.sc-ai .ai-dots i:nth-child(2) { animation-delay: .15s; } .sc-ai .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sc-ai .ai.answered .ai-dots { opacity: 0; }
.sc-ai .ai-text { margin: 0; }
.sc-ai .ai-text span { opacity: 0; transition: opacity .3s ease; }
.sc-ai .ai-text span.on { opacity: 1; }
.sc-ai .ai-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; counter-reset: st; }
.sc-ai .ai-steps:empty { display: none; }
.sc-ai .ai-steps span { counter-increment: st; font-size: .84em; font-weight: 700; color: #0f4577; background: #dde9f8; border-radius: 99px; padding: 4px 11px 4px 8px;
  opacity: 0; transform: translateY(5px) scale(.94); transition: opacity .3s ease, transform .4s var(--ease-out); }
.sc-ai .ai-steps span.on { opacity: 1; transform: none; }
.sc-ai .ai-steps span::before { content: counter(st); display: inline-block; min-width: 1.3em; margin-right: 5px; text-align: center; color: #fff; background: #1E73BE; border-radius: 99px; font-size: .9em; }
.sc-ai .ai-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.sc-ai .ai.sourced .ai-src { opacity: 1; transform: none; }
.sc-ai .ai-src span { font-size: .78em; color: #2f5d8a; border: 1px solid #b7cbe4; border-radius: 99px; padding: 2px 10px; }
/* as on ai.chabad.org: a source chip after what it supports (a small outlined label), and the line under every answer */
/* (no overflow: hidden here: it moves an inline-block's baseline to its bottom edge, which lifted the chips off the
   line. The titles come already cut short, as the AI page cuts them.) Its words sit on the line's baseline, and it is
   no taller than the line, so the lines stay evenly spaced. */
.sc-ai .ai-text .ai-cite { display: inline-block; white-space: nowrap; vertical-align: baseline;
  margin: 0 1px; padding: 0 6px; border: 1px solid #cdd7e4; border-radius: 6px; background: #fff; font-size: .74em; line-height: 1.5; color: #4b5b70; }
.sc-ai .ai-src b { font: 700 .76em/1.3 var(--f-body); color: #5b6b80; }
.sc-ai .ai-box { flex: none; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #bccee6; border-radius: 22px; padding: 10px 10px 10px 20px;
  box-shadow: 0 1px 2px rgba(10, 40, 80, .1), 0 26px 46px -24px rgba(0, 45, 105, .6); color: #55687e; transition: transform .65s cubic-bezier(.22, .61, .36, 1); }
.sc-ai .ai.idle .ai-box { transform: translateY(calc(-56cqh + 50%)); }
.sc-ai .ai-in { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ai .ai-typed { color: #0b2438; }
.sc-ai .ai-ph:empty { display: none; }
.sc-ai .ai-mic, .sc-ai .ai-go { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; }
.sc-ai .ai-go { background: #1E73BE; color: #fff; transition: transform .15s, background .15s; }
.sc-ai .ai-go.press { transform: scale(.88); background: #025FA1; }
.sc-ai .ai-mic svg, .sc-ai .ai-go svg { width: 48%; height: 48%; }
/* the chat is real too: a click on it (or tabbing in) and the box takes typing. A real text field lies over the
   demo's typing, unseen until then (.live); the send button is a real button. scenes.js, S.ai */
.sc-ai .ai { cursor: text; }
.sc-ai .ai-box { position: relative; margin: 0; }
.sc-ai .ai-in { position: relative; }
.sc-ai .ai-real { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: max(16px, 1em); color: #0b2438; opacity: 0; cursor: text; }   /* 16px at least: iPhones zoom the page into a smaller field */
.sc-ai .ai-real::placeholder { color: #6b7f95; }
.sc-ai .ai.live .ai-real { opacity: 1; }
.sc-ai .ai.live .ai-ph, .sc-ai .ai.live .ai-typed, .sc-ai .ai.live .caret { visibility: hidden; }
.sc-ai .ai.live .ai-box { box-shadow: 0 0 0 3px rgba(30, 115, 190, .35), 0 18px 40px -22px rgba(0, 45, 105, .55); }
.sc-ai .ai-go { border: 0; padding: 0; cursor: pointer; }
.sc-ai .ai-go:hover { background: #025FA1; }
.sc-ai .ai-go:focus-visible { outline: 2px solid #0b2438; outline-offset: 2px; }
@container (height < 380px) { .sc-ai .ai { font-size: 13px; gap: 8px; } .sc-ai .ai-steps span { padding: 2px 8px 2px 6px; } .sc-ai .ai-src { display: none; } }
/* short cards (a phone): the answer keeps its full height and the thread scrolls up like a chat, the oldest lines fading out
   at the top, instead of the answer card being squeezed and cut off at the input */
@container (height < 380px) { .sc-ai .ai-thread { overflow: hidden; padding-bottom: 8px; margin-bottom: -8px;
    -webkit-mask: linear-gradient(transparent, #000 26px); mask: linear-gradient(transparent, #000 26px); }
  .sc-ai .ai-q, .sc-ai .ai-a { flex: none; } }

/* ------------------------------------------------------------ Kiddush Levana -- */
/* the stars stop at the moon's edge, so none shine through its dark side; three
   of the four star layers fade in and out, and a few stars sparkle (all on the GPU) */
.sc-kiddush-levana .kl-sky { position: absolute; inset: 0;
  -webkit-mask: radial-gradient(circle 41cqmin at 50% 55%, transparent 97%, #000 100%); mask: radial-gradient(circle 41cqmin at 50% 55%, transparent 97%, #000 100%); }
.sc-kiddush-levana .kl-l { position: absolute; inset: 0; width: 100%; height: 100%; will-change: opacity; }
.sc-kiddush-levana.play .kl-l.l1 { animation: kl-tw 3.4s ease-in-out infinite alternate; }
.sc-kiddush-levana.play .kl-l.l2 { animation: kl-tw 4.6s ease-in-out -1.6s infinite alternate; }
.sc-kiddush-levana.play .kl-l.l3 { animation: kl-tw 5.8s ease-in-out -3.1s infinite alternate; }
@keyframes kl-tw { from { opacity: .2; } to { opacity: 1; } }
.sc-kiddush-levana .kl-sp { position: absolute; width: calc(var(--s) * 3.8cqmin); aspect-ratio: 1; translate: -50% -50%; opacity: 0; will-change: transform, opacity; }
.sc-kiddush-levana .kl-sp svg { display: block; width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 .6cqmin rgba(200, 220, 255, .9)); }
.sc-kiddush-levana .kl-sp::after { content: ''; position: absolute; inset: 35%; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2cqmin .3cqmin rgba(190, 210, 255, .7); }
.sc-kiddush-levana.play .kl-sp { animation: kl-spark var(--du) ease-in-out var(--dl) infinite; }
@keyframes kl-spark {
  0%, 62%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  72% { opacity: 1; transform: scale(1) rotate(25deg); }
  80% { opacity: .85; transform: scale(.7) rotate(40deg); }
  88% { opacity: 0; transform: scale(.25) rotate(55deg); }
}
.sc-kiddush-levana .kl-moon { position: absolute; left: 50%; top: 55%; height: 96cqmin; aspect-ratio: 1; translate: -50% -50%; opacity: .05; transform: translateY(22%) scale(1.06); }
.sc-kiddush-levana .kl-cv { display: block; width: 100%; height: 100%; }
.sc-kiddush-levana.play .kl-moon { animation: kl-rise 2.1s cubic-bezier(.45, .05, .2, 1) .1s both; }
@keyframes kl-rise { from { opacity: .05; transform: translateY(22%) scale(1.06); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------- Molad -- */
.sc-molad .mo-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sc-molad.play .mo-cv { animation: mo-in 1.2s ease both; }
@keyframes mo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.sc-molad .mo-flash { position: absolute; left: 0; right: 0; top: 8cqh; margin: 0; text-align: center; font: 600 clamp(15px, 1.6cqw, 20px)/1 var(--f-display); color: #ffd98a; letter-spacing: .02em; opacity: 0; }
.sc-molad .mo-hud { position: absolute; left: 50%; bottom: 7cqh; width: min(80cqw, 560px); translate: -50% 0; font: 400 clamp(13px, 1.3cqw, 15px)/1 var(--f-display); color: #94a4c8; }
.sc-molad .mo-hud p { margin: 0 0 10px; text-align: center; }
.sc-molad .mo-hud b { color: #e8eefb; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-molad .mo-hud i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sc-molad .mo-hud em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fb0e8, #d9ae58); }

/* ------------------------------------------------------- Library Edition -- */
.sc-torah-3d { perspective: 1400px; }
.sc-torah-3d .t3-world { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(-10%, 5%, -900px) rotateY(20deg); }
.sc-torah-3d .t3-box { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1440 / 900; translate: -50% 0; transform-style: preserve-3d; }
.sc-torah-3d .t3-shot { width: 100%; height: 100%;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* one volume, cut out of the picture itself, slides off the shelf */
.sc-torah-3d .t3-gap, .sc-torah-3d .t3-vol { position: absolute; left: 59.72%; top: 14.22%; width: 1.18%; height: 10.11%; }
.sc-torah-3d .t3-gap { background: #120c08; }
.sc-torah-3d .t3-vol { background-size: 8470.6% 989%; background-position: 60.44% 15.82%; transform-origin: 50% 100%; }
.sc-torah-3d .t3-over { position: absolute; inset: 0; display: grid; place-items: center; background: #1b140f; }
.sc-torah-3d .t3-over img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(10px) brightness(.55) saturate(1.1); }
.sc-torah-3d .t3-over::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(27, 20, 15, .2), rgba(27, 20, 15, .92)); }
.sc-torah-3d .t3-load { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #f3ead9; }
.sc-torah-3d .t3-load b { font: 400 clamp(22px, 7cqh, 44px)/1.1 Georgia, 'Times New Roman', serif; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.sc-torah-3d .t3-load span { font: 400 14px/1 var(--f-body); color: rgba(243, 234, 217, .72); }
.sc-torah-3d .t3-load i { display: block; width: min(52cqw, 280px); height: 6px; border-radius: 99px; background: rgba(243, 234, 217, .14); overflow: hidden; margin-top: 6px; }
.sc-torah-3d .t3-load em { display: block; height: 100%; width: 0; border-radius: inherit; background: #d8b978; }
.sc-torah-3d.play .t3-load em { animation: t3-fill 1.4s ease both; }
.sc-torah-3d.play .t3-over { animation: t3-fade .8s ease 1.6s both; }
.sc-torah-3d.play .t3-world { animation: t3-fly 2.8s cubic-bezier(.83, 0, .17, 1) 1.6s both, t3-drift 18s ease-in-out 4.4s infinite alternate; }
.sc-torah-3d.play .t3-vol { animation: t3-pull 7s ease-in-out 5.2s infinite; }
@keyframes t3-fill { 0% { width: 0; } 22% { width: 19%; } 45% { width: 47%; } 70% { width: 72%; } 100% { width: 100%; } }
@keyframes t3-fade { to { opacity: 0; visibility: hidden; } }
@keyframes t3-fly { from { transform: translate3d(-10%, 5%, -900px) rotateY(20deg); } to { transform: none; } }
@keyframes t3-drift { from { transform: none; } to { transform: translate3d(-5%, -2%, 120px) rotateY(-7deg); } }
@keyframes t3-pull { 0%, 12% { transform: none; box-shadow: none; } 30%, 62% { transform: translate3d(0, -14%, 90px) rotateX(-8deg); box-shadow: 0 0 0 1px rgba(216, 185, 120, .9), 0 16px 26px rgba(0, 0, 0, .6); } 80%, 100% { transform: none; box-shadow: none; } }

/* ------------------------------------------------------- Library Search -- */
.sc-torah-search .ts { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(86cqw, 640px); display: flex; flex-direction: column; gap: 14px; font-family: 'Segoe UI', var(--f-body); color: #1d1530; }
.sc-torah-search .ts-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ddd6ec; border-radius: 14px; padding: 8px 8px 8px 16px;
  box-shadow: 0 20px 44px -24px rgba(46, 23, 88, .5); font-size: clamp(14px, 1.5cqw, 18px); }
.sc-torah-search .ts-box > svg { width: 20px; height: 20px; flex: none; color: #6a5a8c; }
.sc-torah-search .ts-field { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.sc-torah-search .ts-q[lang="he"] { font-family: var(--f-heb); font-size: 1.15em; }
.sc-torah-search .ts-ph { color: #8d84a3; font-family: 'Segoe UI', var(--f-body); font-size: clamp(14px, 1.5cqw, 18px); }
.sc-torah-search .ts-go { flex: none; font-style: normal; font-weight: 600; font-size: .9em; background: #4a2a90; color: #fff; border-radius: 10px; padding: 10px 18px; transition: transform .15s, background .15s; }
.sc-torah-search .ts-go.press { transform: scale(.94); background: #2e1758; }
.sc-torah-search .ts-slot { position: relative; min-height: 150px; }
.sc-torah-search .ts-scan { position: absolute; left: 0; right: 0; top: 4px; opacity: 0; transition: opacity .2s; }
.sc-torah-search .ts-scan.on { opacity: 1; }
.sc-torah-search .ts-bar { height: 4px; border-radius: 2px; background: rgba(74, 42, 144, .12); overflow: hidden; }
.sc-torah-search .ts-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4a2a90, #8b6fd6); }
.sc-torah-search .ts-scan p { margin: 10px 0 0; font-size: 13px; color: #5c5274; }
.sc-torah-search .ts-n { color: #2e1758; font-variant-numeric: tabular-nums; }
.sc-torah-search .ts-ref { margin-left: 10px; color: #8d84a3; }
.sc-torah-search .ts-res { display: flex; flex-direction: column; gap: 8px; }
.sc-torah-search .ts-res > div { background: rgba(255, 255, 255, .8); border: 1px solid #e3ddef; border-radius: 12px; padding: 10px 14px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.sc-torah-search .ts-res.on > div { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); }
.sc-torah-search .ts-res.on > div:nth-child(2) { transition-delay: .12s; }
.sc-torah-search .ts-res.on > div:nth-child(3) { transition-delay: .24s; }
.sc-torah-search .ts-res small { display: block; color: #4a2a90; font-weight: 700; font-size: 12px; }
.sc-torah-search .ts-res p { margin: 3px 0 0; font-size: 14px; line-height: 1.35; }
.sc-torah-search .ts-res p[lang="he"] { font-family: var(--f-heb); font-size: 17px; text-align: right; }
.sc-torah-search .ts-res mark { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 2px; }
.sc-torah-search .ts-res i { display: block; height: 8px; width: 66%; border-radius: 99px; background: #e7e1f2; margin-top: 8px; }
@container (height < 380px) { .sc-torah-search .ts-res > div:nth-child(3) { display: none; } }
@container (height < 300px) { .sc-torah-search .ts-res > div:nth-child(2) { display: none; } }

/* --------------------------------------------------------- Seventh Hour -- */
.sc-seventh-hour .sh-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-seventh-hour .sh-seg { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: 19; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; transition: stroke-width .4s; }
.sc-seventh-hour .sh-7 { filter: var(--glow); }
.sc-seventh-hour .sh-7.hot { stroke-width: 38 !important; }
.sc-seventh-hour .sh-dot { opacity: 0; filter: var(--glow); transition: opacity .6s; }
.sc-seventh-hour .sh-dot.on { opacity: .95; }
.sc-seventh-hour .sh-n { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-seventh-hour.play .sh-seg { animation: sh-draw .5s var(--ease-out) calc(.2s + var(--i) * 90ms) both; }
.sc-seventh-hour.play .sh-7 { animation: sh-draw .5s var(--ease-out) calc(.2s + var(--i) * 90ms) both, sh-light .8s ease 1.5s both; }
.sc-seventh-hour.play .sh-n { animation: sh-n 1s var(--ease-out) 1.8s both; }
@keyframes sh-draw { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes sh-light { to { stroke: #ffc46b; stroke-opacity: 1; stroke-width: 30; } }
@keyframes sh-n { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------- Hebrew date converter -- */
.sc-hebrewdateconverter .hd { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(90cqw, 620px); background: #fff; border: 1px solid #d9e3ef; border-radius: 16px;
  box-shadow: 0 24px 50px -28px rgba(2, 60, 120, .38); padding: 12px 22px 6px; font: 400 clamp(13px, 1.35cqw, 16px)/1.3 var(--f-body); color: #0b2438; white-space: nowrap; }
.sc-hebrewdateconverter .hd-head, .sc-hebrewdateconverter .hd-row { display: grid; grid-template-columns: 1fr 34px 1.25fr; align-items: center; }
.sc-hebrewdateconverter .hd-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6c8196; font-weight: 700; padding: 6px 0 10px; border-bottom: 1px solid #e6edf5; }
.sc-hebrewdateconverter .hd-row { padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.sc-hebrewdateconverter .hd-row:last-child { border-bottom: 0; }
.sc-hebrewdateconverter .g { font-weight: 600; }
.sc-hebrewdateconverter .ar { color: #17518f; font-weight: 800; text-align: center; }
.sc-hebrewdateconverter .h { color: #17518f; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-hebrewdateconverter .h b { font-weight: 800; }
.sc-hebrewdateconverter .h i { font: 400 1.08em/1 var(--f-heb); color: #6c8196; direction: rtl; }
.sc-hebrewdateconverter .hd-row > * { opacity: 0; transition: opacity .4s; }
.sc-hebrewdateconverter .hd.go .g { animation: hd-in .45s var(--ease-out) calc(.25s + var(--i) * .38s) both; }
.sc-hebrewdateconverter .hd.go .ar { animation: hd-ar .45s var(--ease-out) calc(.37s + var(--i) * .38s) both; }
.sc-hebrewdateconverter .hd.go .h { animation: hd-out .6s var(--ease-out) calc(.5s + var(--i) * .38s) both; }
.sc-hebrewdateconverter .hd.out .hd-row > * { animation: hd-gone .4s ease both; }
@keyframes hd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hd-ar { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes hd-out { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes hd-gone { from { opacity: 1; } to { opacity: 0; } }
@container (width < 440px) {
  .sc-hebrewdateconverter .hd-head { display: none; }
  .sc-hebrewdateconverter .hd-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
  .sc-hebrewdateconverter .ar { display: none; }
  .sc-hebrewdateconverter .g { font-weight: 400; color: #6c8196; }
}

/* ------------------------------------------------------------ 11 Nissan -- */
/* layers: the map (drawn once), three glow layers that only fade, the pins, and new pins */
.sc-11nisan .ni { position: absolute; inset: 0; }
.sc-11nisan .ni-l { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-11nisan .ni-d { fill: #9fb7e6; opacity: 0; }
.sc-11nisan.play .ni-d { animation: ni-d .6s ease var(--d) forwards; }
.sc-11nisan .ni-halo { opacity: 0; will-change: opacity; }
.sc-11nisan.play .ni-halo.h0 { animation: ni-glow 2.6s ease-in-out 1.5s infinite alternate both; }
.sc-11nisan.play .ni-halo.h1 { animation: ni-glow 3.2s ease-in-out 1.9s infinite alternate both; }
.sc-11nisan.play .ni-halo.h2 { animation: ni-glow 3.8s ease-in-out 2.3s infinite alternate both; }
.sc-11nisan .ni-p { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-11nisan.play .ni-p { animation: ni-p .5s cubic-bezier(.2, .9, .3, 1.4) var(--d) both; }
.sc-11nisan .ni-ring { fill: none; stroke: #ffd98a; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-11nisan .ni-p.new .ni-ring { animation: ni-ring 1.4s ease-out both; }
.sc-11nisan .ni-more { transition: opacity .6s; }
.sc-11nisan .ni-more.fade { opacity: 0; }
@keyframes ni-d { to { opacity: .4; } }
@keyframes ni-glow { from { opacity: .15; } to { opacity: 1; } }
@keyframes ni-p { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes ni-ring { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(5); } }

/* ------------------------------------------------------- Mishnayos Chalukah -- */
.sc-mishnayos-chalukah .mc-svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 88cqh; transition: opacity .6s ease; }
.sc-mishnayos-chalukah .mc-c { fill: #e7e0d2; }
.sc-mishnayos-chalukah .mc-c.on { fill: #26456e; }
.sc-mishnayos-chalukah .mc-c.mine { fill: #e0a92e; }
.sc-mishnayos-chalukah .mc-svg.done .mc-c { fill: #FEC754; }
.sc-mishnayos-chalukah .mc-svg.clear { opacity: 0; }
.sc-mishnayos-chalukah .mc-count { position: absolute; left: 0; right: 0; bottom: 3cqh; margin: 0; text-align: center; font: 600 clamp(13px, 1.3cqw, 16px)/1 var(--f-body); color: #6b6455; }
.sc-mishnayos-chalukah .mc-count b { color: #26456e; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Mishnayos for a name -- */
.sc-mishnayos-name .mn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqh; perspective: 900px; }
.sc-mishnayos-name .mn-field { min-width: min(56cqw, 340px); min-height: 1.25em; display: flex; align-items: center; gap: .04em; padding: 8px 22px; border-radius: 14px; box-sizing: content-box;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font: 500 clamp(26px, 7cqh, 44px)/1.25 var(--f-heb); color: #fff; }
.sc-mishnayos-name .mn-cards { display: flex; gap: min(2.4cqw, 18px); }
.sc-mishnayos-name .mn-c { width: min(25cqw, 196px); background: #faf8f4; color: #1c1b19; border-radius: 16px; padding: 14px 12px 16px; text-align: center; box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(26px) rotateX(-28deg); transition: opacity .35s, transform .35s; }
.sc-mishnayos-name .mn-cards.in .mn-c { opacity: 1; transform: none; transition: opacity .5s, transform .65s cubic-bezier(.2, .9, .3, 1.2); transition-delay: calc(var(--i) * .18s); }
.sc-mishnayos-name .mn-cards.out .mn-c { opacity: 0; transform: translateY(-14px); transition-delay: 0s; }
.sc-mishnayos-name .mn-c b { display: block; font: 500 clamp(34px, 10cqh, 64px)/1 var(--f-heb); color: #26456e; }
.sc-mishnayos-name .mn-c small { display: block; margin-top: 8px; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #a8741f; }
.sc-mishnayos-name .mn-c p { margin: 7px 0 0; font: 400 clamp(13px, 1.3cqw, 16px)/1.3 var(--f-heb); color: #3b3a36; }

/* ----------------------------------------------------------------- Dreidel -- */
.sc-dreidel .dr { position: absolute; inset: 0; opacity: 0; }
.sc-dreidel .dr-stage { position: absolute; left: 50%; top: 38%; width: 26cqmin; height: 26cqmin; margin: -13cqmin 0 0 -13cqmin; perspective: 150cqmin; }
/* the view from slightly above; the wobble (about the tip); the spin */
.sc-dreidel .dr-cam, .sc-dreidel .dr-tilt, .sc-dreidel .dr-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.sc-dreidel .dr-cam { transform: rotateX(-22deg); }
.sc-dreidel .dr-tilt { transform-origin: 50% 175%; will-change: transform; }
.sc-dreidel .dr-spin { will-change: transform; }
.sc-dreidel .dr-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
  background: linear-gradient(165deg, #f2dcae 0%, #e6c68f 45%, #d3ab70 100%); box-shadow: inset 0 0 0 1.1cqmin #B8860B; }
.sc-dreidel .dr-face b { font: 500 16cqmin/1 'Times New Roman', var(--f-heb); color: #1A2B4C; }
.sc-dreidel .dr-face.f0 { transform: rotateY(0deg) translateZ(13cqmin); }
.sc-dreidel .dr-face.f1 { transform: rotateY(90deg) translateZ(13cqmin); }
.sc-dreidel .dr-face.f2 { transform: rotateY(180deg) translateZ(13cqmin); }
.sc-dreidel .dr-face.f3 { transform: rotateY(270deg) translateZ(13cqmin); }
.sc-dreidel .dr-tip { position: absolute; left: 0; top: 100%; width: 26cqmin; height: 23.85cqmin; transform-origin: 50% 0; backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #d8b37a 0%, #b98a45 100%); }
.sc-dreidel .dr-tip.f0 { transform: rotateY(0deg) translateZ(13cqmin) rotateX(-33deg); }
.sc-dreidel .dr-tip.f1 { transform: rotateY(90deg) translateZ(13cqmin) rotateX(-33deg); background: linear-gradient(180deg, #c99d5c, #a87a35); }
.sc-dreidel .dr-tip.f2 { transform: rotateY(180deg) translateZ(13cqmin) rotateX(-33deg); }
.sc-dreidel .dr-tip.f3 { transform: rotateY(270deg) translateZ(13cqmin) rotateX(-33deg); background: linear-gradient(180deg, #c99d5c, #a87a35); }
.sc-dreidel .dr-top { position: absolute; inset: 0; transform: rotateX(90deg) translateZ(13cqmin); background: radial-gradient(circle, #f7e6bf 0%, #e8c88f 70%, #cfa56a 100%); box-shadow: inset 0 0 0 1.1cqmin #B8860B; }
.sc-dreidel .dr-h { position: absolute; left: calc(50% - 2.1cqmin); bottom: 100%; width: 4.2cqmin; height: 11cqmin; transform-origin: 50% 100%; border-radius: 2.1cqmin 2.1cqmin 0 0;
  background: linear-gradient(90deg, #b8862f 0%, #f2dcae 45%, #c99a4f 100%); }
.sc-dreidel .dr-h.h1 { transform: rotateY(60deg); }
.sc-dreidel .dr-h.h2 { transform: rotateY(120deg); }
.sc-dreidel .dr-shadow { position: absolute; left: 50%; top: calc(38% + 31cqmin); width: 34cqmin; height: 7cqmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 44, 24, .4), rgba(58, 44, 24, 0)); }
.sc-dreidel .dr-res { position: absolute; left: 50%; bottom: 7cqh; translate: -50% 0; margin: 0; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(122, 90, 34, .2); font: 600 15px/1 var(--f-display); color: #3a2c18; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.sc-dreidel .dr-res b { font: 500 22px/1 var(--f-heb); color: #1A2B4C; }
.sc-dreidel .dr-res.on { opacity: 1; transform: none; }
.sc-dreidel.play .dr { animation: dr-in .7s ease both; }
@keyframes dr-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------- AI Assistant (MCP) -- */
.sc-ai-mcp .mp { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(13px, 1.25cqw, 15.5px)/1.45 var(--f-body); color: #e6ecf5; }
.sc-ai-mcp .mp-win { width: min(86cqw, 600px); height: 84cqh; display: flex; flex-direction: column; background: #121822; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); overflow: hidden; opacity: 0; transform: translateY(16px); }
.sc-ai-mcp.play .mp-win { animation: mp-in .8s var(--ease-out) both; }
@keyframes mp-in { to { opacity: 1; transform: none; } }
.sc-ai-mcp .mp-bar { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #8f9bb0; font-size: 12px; }
.sc-ai-mcp .mp-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3242; }
.sc-ai-mcp .mp-bar span { margin-left: 8px; }
.sc-ai-mcp .mp-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 16px 6px; transition: opacity .45s, transform .45s; }
.sc-ai-mcp .mp.leaving .mp-thread { opacity: 0; transform: translateY(-8px); }
.sc-ai-mcp .mp-q, .sc-ai-mcp .mp-tool, .sc-ai-mcp .mp-a { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s var(--ease-out); }
.sc-ai-mcp .mp-q { align-self: flex-end; max-width: 82%; background: #2b3446; color: #fff; padding: 9px 14px; border-radius: 16px 16px 4px 16px; }
.sc-ai-mcp .mp-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 99px; background: rgba(30, 115, 190, .16); box-shadow: inset 0 0 0 1px rgba(110, 170, 240, .3); color: #b9d4f3; font-size: .86em; }
.sc-ai-mcp .mp-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(185, 212, 243, .3); border-top-color: #b9d4f3; }
.sc-ai-mcp .mp.tool .mp-spin { animation: mp-spin .8s linear infinite; }
.sc-ai-mcp .mp.found .mp-spin { animation: none; border-color: #6fd39b; border-top-color: #6fd39b; background: #6fd39b; transform: scale(.75); }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.sc-ai-mcp .mp-a { color: #dfe6f1; }
.sc-ai-mcp .mp-text { margin: 0; }
.sc-ai-mcp .mp-text span { opacity: 0; transition: opacity .3s ease; }
.sc-ai-mcp .mp-text span.on { opacity: 1; }
.sc-ai-mcp .mp-src { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 3px 10px 3px 4px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .14); font-size: .8em; color: #a9b6ca; opacity: 0; transition: opacity .4s; }
.sc-ai-mcp .mp.sourced .mp-src { opacity: 1; }
.sc-ai-mcp .mp.asked .mp-q, .sc-ai-mcp .mp.tool .mp-tool, .sc-ai-mcp .mp.answered .mp-a { opacity: 1; transform: none; }
.sc-ai-mcp .mp-mark { display: inline-grid; flex: none; width: 18px; height: 18px; }
.sc-ai-mcp .mp-mark svg { width: 100%; height: 100%; }
.sc-ai-mcp .mp-box { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 12px 12px; padding: 8px 8px 8px 8px; border-radius: 14px; background: #1a212d; border: 1px solid rgba(255, 255, 255, .09); color: #e6ecf5; }
.sc-ai-mcp .mp-conn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 99px; background: rgba(30, 115, 190, .2); color: #cfe2f7; font-size: .82em; font-weight: 700; }
.sc-ai-mcp .mp-in { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ai-mcp .mp-go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e6ecf5; color: #121822; }
.sc-ai-mcp .mp-go svg { width: 50%; height: 50%; }
@container (width < 440px) { .sc-ai-mcp .mp-conn { display: none; } .sc-ai-mcp .mp { font-size: 12.5px; } .sc-ai-mcp .mp-win { height: 90cqh; } .sc-ai-mcp .mp-thread { padding: 10px 12px 4px; gap: 8px; } }

/* ------------------------------------------------------- AI Audio Transcriber -- */
.sc-transcriber .tr { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(86cqw, 600px); display: flex; flex-direction: column; gap: 22px; color: #e6ecf5; transition: opacity .5s; }
.sc-transcriber .tr.out { opacity: 0; }
.sc-transcriber .tr-player { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sc-transcriber .tr-play { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #FEC754; color: #0b1726; }
.sc-transcriber .tr-play svg { width: 18px; height: 18px; margin-left: 2px; }
.sc-transcriber .tr-wave { position: relative; flex: 1; height: 44px; overflow: hidden; }
.sc-transcriber .tr-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-transcriber .tr-base { fill: rgba(255, 255, 255, .2); }
.sc-transcriber .tr-gold { fill: #FEC754; }
.sc-transcriber .tr-fill, .sc-transcriber .tr-fill-in { position: absolute; inset: 0; will-change: transform; }
.sc-transcriber .tr-fill { overflow: hidden; transform: translateX(-100%); }
.sc-transcriber .tr-fill-in { transform: translateX(100%); }
.sc-transcriber .tr-time { flex: none; font: 600 13px/1 var(--f-display); color: #a9b6ca; font-variant-numeric: tabular-nums; }
.sc-transcriber .tr-lines { display: flex; flex-direction: column; gap: 14px; }
.sc-transcriber .tr-l { margin: 0; display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
.sc-transcriber .tr-l.on { opacity: 1; transform: none; }
.sc-transcriber .tr-l em { flex: none; width: 62px; font: 700 11px/1 var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #FEC754; }
.sc-transcriber .tr-l span { flex: 1; font: 400 clamp(15px, 1.5cqw, 19px)/1.4 var(--f-body); color: #eef3fa; }
.sc-transcriber .tr-l span[dir="rtl"] { font-family: var(--f-heb); font-size: clamp(17px, 1.7cqw, 22px); text-align: right; }
.sc-transcriber .tr-l i { font-style: normal; opacity: 0; transition: opacity .25s; }
.sc-transcriber .tr-l i.on { opacity: 1; }

/* ------------------------------------------------------------ Tehillim Divider -- */
.sc-tehillim .th { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: min(86cqh, 62cqw); aspect-ratio: 1; container-type: size; }
.sc-tehillim .th-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-tehillim .th-t { stroke: #d3dce8; stroke-width: 4.2; stroke-linecap: round; transition: stroke .3s; }
.sc-tehillim .th-t.on { stroke: #1E73BE; }
.sc-tehillim .th.done .th-t { stroke: #e0a92e; }
.sc-tehillim .th-in { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #0b2438; }
.sc-tehillim .th-for { font: 700 3.3cqw/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #6c8196; margin-bottom: 3cqw; }
.sc-tehillim .th-n { font: 700 21cqw/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sc-tehillim .th-of { font: 600 5cqw/1.2 var(--f-body); color: #3f5871; }
.sc-tehillim .th-who { margin-top: 4cqw; min-height: 1.3em; font: 600 4.6cqw/1.3 var(--f-body); color: #1E73BE; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s; }
.sc-tehillim .th-who.on { opacity: 1; transform: none; }
.sc-tehillim .th.done .th-who { color: #a8741f; }

/* ---------------------------------------------------- ChabadU Course Selector -- */
/* one panel: the three questions, answered one by one; then they give way to the answers in a line and the courses */
.sc-chabadu .cu { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(88cqw, 470px); padding: 16px 16px 14px; border-radius: 20px; font-family: var(--f-body); color: #e9eef6;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .6); transition: opacity .5s; }
.sc-chabadu .cu.out { opacity: 0; }
.sc-chabadu .cu-head { display: flex; align-items: center; gap: 9px; font: 700 13px/1 var(--f-body); letter-spacing: .02em; color: #fff; }
.sc-chabadu .cu-head i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #FEC754; color: #0c1a33; }
.sc-chabadu .cu-head svg { width: 12px; height: 12px; }
.sc-chabadu .cu-body { display: grid; margin-top: 12px; }
.sc-chabadu .cu-qs, .sc-chabadu .cu-out { grid-area: 1 / 1; transition: opacity .45s, transform .55s var(--ease-out); }
.sc-chabadu .cu-qs { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.sc-chabadu .cu.finding .cu-qs { opacity: 0; transform: translateY(-10px); }
.sc-chabadu .cu-out { position: relative; opacity: 0; }
.sc-chabadu .cu.finding .cu-out { opacity: 1; }
.sc-chabadu .cu-q { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 6px 0 13px; border-radius: 12px; background: rgba(255, 255, 255, .05);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-out); }
.sc-chabadu .cu-q.on { opacity: 1; transform: none; }
.sc-chabadu .cu-q span { font: 500 14px/1.2 var(--f-body); color: rgba(233, 238, 246, .72); }
.sc-chabadu .cu-q em { font: 700 13.5px/1 var(--f-body); font-style: normal; padding: 8px 12px; border-radius: 99px; background: #1E73BE; color: #fff; white-space: nowrap;
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.sc-chabadu .cu-q.picked em { opacity: 1; transform: none; }
.sc-chabadu .cu-find { position: absolute; left: 0; right: 0; top: 34%; margin: 0; display: flex; justify-content: center; align-items: center; gap: 5px; font: 600 13.5px/1 var(--f-body); color: rgba(233, 238, 246, .7); transition: opacity .3s; }
.sc-chabadu .cu-find span { margin-left: 8px; }
.sc-chabadu .cu-find i { width: 6px; height: 6px; border-radius: 50%; background: #FEC754; }
.sc-chabadu.play .cu-find i { animation: ai-dot 1s ease-in-out infinite; }
.sc-chabadu .cu-find i:nth-child(2) { animation-delay: .15s; } .sc-chabadu .cu-find i:nth-child(3) { animation-delay: .3s; }
.sc-chabadu .cu.found .cu-find { opacity: 0; }
.sc-chabadu .cu-sum { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .4s; }
.sc-chabadu .cu.found .cu-sum { opacity: 1; }
.sc-chabadu .cu-sum span { font: 600 12px/1 var(--f-body); padding: 6px 10px; border-radius: 99px; background: rgba(30, 115, 190, .22); box-shadow: inset 0 0 0 1px rgba(110, 175, 255, .35); color: #d6e7fb; }
.sc-chabadu .cu-res { display: flex; flex-direction: column; gap: 8px; }
.sc-chabadu .cu-c { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 13px; border-radius: 12px; background: rgba(255, 255, 255, .07);
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s var(--ease-out); }
.sc-chabadu .cu-c:first-child { box-shadow: inset 0 0 0 1px rgba(254, 199, 84, .45); }
.sc-chabadu .cu-c.on { opacity: 1; transform: none; }
.sc-chabadu .cu-c b { display: block; font: 600 14.5px/1.25 var(--f-display); color: #fff; }
.sc-chabadu .cu-c span { display: block; margin-top: 3px; font: 400 12.5px/1.2 var(--f-body); color: rgba(233, 238, 246, .62); }
.sc-chabadu .cu-c em { flex: none; font: 700 12px/1 var(--f-body); font-style: normal; padding: 6px 9px; border-radius: 99px; background: rgba(254, 199, 84, .12); color: #FEC754; }
@container (height < 330px) {
  .sc-chabadu .cu { padding: 12px 12px 10px; }
  .sc-chabadu .cu-body { margin-top: 9px; }
  .sc-chabadu .cu-q { min-height: 36px; } .sc-chabadu .cu-qs { gap: 7px; }
  .sc-chabadu .cu-res { gap: 6px; } .sc-chabadu .cu-c { padding: 7px 8px 7px 11px; }
  .sc-chabadu .cu-c b { font-size: 13.5px; } .sc-chabadu .cu-c span { font-size: 11.5px; }
}
@container (height < 300px) { .sc-chabadu .cu-sum { display: none; } }   /* a phone: the answers were just shown, so straight to the courses */

/* ---------------------------------------------- Bar/Bat Mitzvah Speech Helper -- */
/* the form fills in, the button is pressed, and the speech writes itself on a sheet of paper, its verse underneath */
.sc-bar-mitzvah .bm { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(88cqw, 640px); display: flex; flex-direction: column; gap: 12px; transition: opacity .5s; }
.sc-bar-mitzvah .bm.out { opacity: 0; }
.sc-bar-mitzvah .bm-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-bar-mitzvah .bm-f { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e6dfd0; }
.sc-bar-mitzvah .bm-f i { font: 700 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #a3977f; }
.sc-bar-mitzvah .bm-f b { min-width: 3ch; font: 600 14px/1 var(--f-body); color: #2a2620; }
.sc-bar-mitzvah .bm-go { margin-left: auto; height: 34px; padding: 0 15px; display: inline-flex; align-items: center; border-radius: 99px; background: #1E73BE; color: #fff; font: 600 13.5px/1 var(--f-display); transition: transform .15s, background .2s; }
.sc-bar-mitzvah .bm-go.press { transform: scale(.94); background: #025FA1; }
.sc-bar-mitzvah .bm-doc { padding: 18px 22px 16px; border-radius: 14px; background: #fffdf8; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 24px 40px -26px rgba(60, 45, 20, .45);
  opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--ease-out); }
.sc-bar-mitzvah .bm.writing .bm-doc { opacity: 1; transform: none; }
.sc-bar-mitzvah .bm-text p { margin: 0 0 7px; font: 400 17px/1.45 Alegreya, Georgia, serif; color: #2a2620; text-wrap: pretty; }
.sc-bar-mitzvah .bm-text span { opacity: 0; transition: opacity .25s; }
.sc-bar-mitzvah .bm-text span.on { opacity: 1; }
.sc-bar-mitzvah .bm-src { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.sc-bar-mitzvah .bm.sourced .bm-src { opacity: 1; }
.sc-bar-mitzvah .bm-src span { font: 700 10.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #a3977f; }
.sc-bar-mitzvah .bm-src b { font: 600 12.5px/1 var(--f-body); color: #1f4e9c; padding: 5px 10px; border-radius: 99px; background: #e8eef8; }
@container (height < 330px) {
  .sc-bar-mitzvah .bm { gap: 9px; }
  .sc-bar-mitzvah .bm-f, .sc-bar-mitzvah .bm-go { height: 30px; } .sc-bar-mitzvah .bm-f { padding: 0 10px; }
  .sc-bar-mitzvah .bm-doc { padding: 13px 16px 12px; }
  .sc-bar-mitzvah .bm-text p { font-size: 15px; margin-bottom: 5px; }
}
@container (height < 340px) {   /* a phone: the speech without its opening line, a little smaller */
  .sc-bar-mitzvah .bm-text p:first-child { display: none; }
  .sc-bar-mitzvah .bm-text p { font-size: 14px; line-height: 1.4; }
  .sc-bar-mitzvah .bm-src { margin-top: 4px; }
}


/* =============================================================================
   THE SUBMIT DIALOG (#sd) — carried over unchanged from the live homepage's
   css/home.css (lines 925–1190 on 3 Nov 2026). Opened by labs.js from the idea card's
   [data-submit] button. Its colours are the old stylesheet's, scoped here.
   ============================================================================= */
.sd { --blue: #025FA1; --blue-dark: #014a80; --text: #0B2438; --text-soft: #4C6478; --ease: cubic-bezier(.22,.61,.36,1); color: var(--text); font-family: var(--f-body); }
.hero-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 15px 30px;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family:'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-cta:hover{
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(1,22,39,0.4);
}
@media (prefers-reduced-motion: reduce){
  .hero-cta{ transition: background .25s, color .25s; }
}

/* Dark filled CTA button variant */
.hero-cta.cta-dark{
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.hero-cta.cta-dark:hover{
  background: #012d50;
  border-color: #012d50;
  box-shadow: 0 10px 22px -10px rgba(1,22,39,0.5);
}
html.modal-open{ overflow: hidden; }

.sd{
  width: min(580px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 40px 90px -30px rgba(1,22,39,0.6), 0 0 0 1px rgba(1,22,39,0.06);
  overflow: hidden;
}
.sd::backdrop{
  background: rgba(1,22,39,0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.sd-scroll{
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* navy header: the hero's grid, and two faint circles from the logo */
.sd-head{
  position: relative;
  padding: 30px 32px 26px;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  color: #fff;
  overflow: hidden;
}
.sd-head::before,
.sd-head::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sd-head::before{ width: 210px; height: 210px; right: -64px; top: -96px; background: rgba(30,115,190,0.32); }
.sd-head::after { width: 120px; height: 120px; right: 52px;  top: 46px;  background: rgba(254,199,84,0.16); }
.sd-head h2{
  position: relative;
  font-size: 24px;
  line-height: 1.2;
  padding-right: 44px;
}
.sd-head p{
  position: relative;
  margin: 8px 0 0;
  max-width: 430px;
  font-family: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255,255,255,0.82);
}
.sd-x{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.sd-x:hover{ background: rgba(255,255,255,0.2); }
.sd-x svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sd-form{
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sd-label,
.sd-field label{
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.sd-opt{ margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }

/* idea / built: a two-way pill switch */
.sd-kind{ border: 0; margin: 0; padding: 0; min-width: 0; }
.sd-seg{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 999px;
}
.sd-seg label{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.sd-seg label:hover{ color: var(--navy); }
.sd-seg input{ position: absolute; opacity: 0; pointer-events: none; }
.sd-seg svg{ width: 18px; height: 18px; flex-shrink: 0; }
.sd-seg label.is-on{ background: var(--navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(1,22,39,0.6); }
.sd-seg label.has-focus{ outline: 3px solid var(--blue); outline-offset: 2px; }

.sd-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-field{ min-width: 0; }
.sd-field input,
.sd-field textarea{
  display: block;
  width: 100%;
  padding: 11px 14px;
  font: 15px/1.45 'Nunito Sans', sans-serif;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #D3DCE6;
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.sd-field textarea{ min-height: 108px; resize: vertical; }
.sd-field input::placeholder,
.sd-field textarea::placeholder{ color: #93A4B5; }
.sd-field input:focus,
.sd-field textarea:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(2,95,161,0.14);
}
.sd-field.bad input,
.sd-field.bad textarea{ border-color: #C4320A; box-shadow: 0 0 0 4px rgba(196,50,10,0.1); }
.sd-err{ margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #B42318; }
.sd-err:empty{ display: none; }

/* what changes between the two kinds */
.sd-form:not(.is-app) .sd-app,
.sd-form:not(.is-app) [data-app],
.sd-form.is-app [data-idea]{ display: none; }

/* the honeypot: off-screen, out of the tab order, ignored by people */
.sd-hp{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sd-msg{
  padding: 12px 14px;
  border: 1px solid rgba(254,199,84,0.75);
  border-radius: 12px;
  background: #FEF6E6;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.sd-msg:empty{ display: none; }
.sd-msg a{ font-weight: 700; color: var(--blue); }

.sd-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 2px;
}
.sd-go{ margin-top: 0; cursor: pointer; flex-shrink: 0; }
.sd-go svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-go[disabled]{ cursor: progress; opacity: 0.75; }
.sd-spin{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sd-spin .8s linear infinite;
}
.sd-go.is-busy .sd-spin{ display: inline-block; }
.sd-go.is-busy .sd-arrow{ display: none; }

/* sent: a check drawn in the logo's two circles */
.sd-done{ padding: 42px 32px 36px; text-align: center; }
.sd-done:focus{ outline: none; }
.sd-done[hidden],
.sd-form[hidden]{ display: none; }
.sd-mark{ position: relative; width: 92px; height: 74px; margin: 0 auto 20px; }
.sd-mark i{ position: absolute; border-radius: 50%; }
.sd-mark .y{ left: 40px; top: 28px; width: 46px; height: 46px; background: var(--yellow); }
.sd-mark .b{ left: 0; top: 0; width: 64px; height: 64px; background: #1E73BE; display: grid; place-items: center; }
.sd-mark svg{
  width: 30px; height: 30px;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: sd-tick .5s .25s var(--ease) forwards;
}
.sd-done h2{ font-size: 24px; color: var(--navy); }
.sd-done p{
  max-width: 400px;
  margin: 10px auto 26px;
  font-family: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-soft);
}
.sd-done .hero-cta{ margin-top: 0; cursor: pointer; }

@keyframes sd-spin{ to{ transform: rotate(360deg); } }
@keyframes sd-tick{ to{ stroke-dashoffset: 0; } }
@keyframes sd-in  { from{ opacity: 0; transform: translateY(16px) scale(.985); } to{ opacity: 1; transform: none; } }
@keyframes sd-up  { from{ opacity: .6; transform: translateY(48px); } to{ opacity: 1; transform: none; } }
@keyframes sd-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: no-preference){
  .sd[open]{ animation: sd-in .38s var(--ease) both; }
  .sd[open]::backdrop{ animation: sd-fade .3s ease both; }
}
@media (prefers-reduced-motion: reduce){
  .sd-mark svg{ animation: none; stroke-dashoffset: 0; }
}

/* phones: a bottom sheet, one column, the button full width */
@media (max-width: 600px){
  .sd{
    width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .sd-scroll{ max-height: 94vh; max-height: 94dvh; }
  .sd[open]{ animation-name: sd-up; }
  .sd-head{ padding: 24px 20px 20px; }
  .sd-head h2{ font-size: 21px; }
  .sd-head p{ font-size: 16.5px; }
  .sd-form{ padding: 22px 20px 26px; }
  .sd-row{ grid-template-columns: 1fr; }
  .sd-field input,
  .sd-field textarea{ font-size: 16px; }      /* 16px stops iOS zooming into the field */
  .sd-foot{ flex-direction: column-reverse; align-items: stretch; }
  .sd-go{ justify-content: center; }
  .sd-done{ padding: 34px 20px 30px; }
}



/* each moving picture's own background, by slug (the mockup set it as style="--tbg:…") */
.vp .t.s-11nisan { --tbg: radial-gradient(90% 90% at 50% 40%, #1e3a5f 0%, #0f172a 75%); }
.vp .t.s-ai { --tbg: linear-gradient(180deg, #d0dff2 0%, #adc5e5 100%); }
.vp .t.s-ai-mcp { --tbg: radial-gradient(90% 80% at 50% 10%, #1d3560 0%, #0c1528 70%); }
.vp .t.s-ai-search { --tbg: linear-gradient(180deg, #d0dff2 0%, #adc5e5 100%); }
.vp .t.s-bar-mitzvah { --tbg: linear-gradient(180deg, #fbf8f2 0%, #f0e9dc 100%); }
.vp .t.s-chabadu { --tbg: radial-gradient(90% 85% at 50% 15%, #1c3d6e 0%, #0c1a33 75%); }
.vp .t.s-dreidel { --tbg: radial-gradient(80% 90% at 50% 35%, #efebe4 0%, #e8e4dc 50%, #d4cfc4 100%); }
.vp .t.s-every-day { --tbg: linear-gradient(180deg, #f7f5f0 0%, #f1ede5 100%); }
.vp .t.s-hebrewdateconverter { --tbg: linear-gradient(180deg, #f6f9fc 0%, #e6eef8 100%); }
.vp .t.s-kiddush-levana { --tbg: radial-gradient(70% 70% at 50% 0%, #24336b 0%, rgba(36, 51, 107, 0) 70%), linear-gradient(180deg, #0c1330 0%, #060a18 100%); }
.vp .t.s-mishnayos-chalukah { --tbg: linear-gradient(180deg, #faf8f4 0%, #f0ebe1 100%); }
.vp .t.s-mishnayos-name { --tbg: radial-gradient(80% 90% at 50% 30%, #1d3a63 0%, #0d1b33 80%); }
.vp .t.s-molad { --tbg: radial-gradient(90% 90% at 50% 40%, #141d38 0%, #0b1020 75%); }
.vp .t.s-seventh-hour { --tbg: linear-gradient(180deg, #140f33 0%, #2a1f55 42%, #8a4a6e 78%, #e59a5c 100%); }
.vp .t.s-tanya { --tbg: radial-gradient(130% 120% at 70% 44%, #2b3675 0%, #20295c 52%, #141a3c 100%); }
.vp .t.s-tehillim { --tbg: linear-gradient(180deg, #f5f8fc 0%, #e7eef7 100%); }
.vp .t.s-torah-3d { --tbg: #1b140f; }
.vp .t.s-torah-search { --tbg: linear-gradient(180deg, #f8f6fc 0%, #ece7f6 100%); }
.vp .t.s-transcriber { --tbg: radial-gradient(80% 90% at 50% 25%, #173353 0%, #0b1726 75%); }