/* AI Osthath guided lesson inside the Interactive Study box (osthath-study.js) */

.interactive-study-stage { transition: min-block-size 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease; }
.interactive-study-stage.ost-lesson-on {
  min-block-size: 0;
  overflow: hidden;
  justify-content: flex-start;
  background:
    radial-gradient(1200px 380px at 50% -120px, rgba(197,155,39,0.10), transparent 70%),
    radial-gradient(900px 300px at 100% 110%, rgba(140,29,64,0.07), transparent 70%),
    linear-gradient(180deg, var(--ivory-100) 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(197,155,39,0.25), 0 18px 40px -24px rgba(15,30,54,0.35);
}
.interactive-study-stage.ost-lesson-on .study-stage-center-content { display: none; }
.interactive-study-stage.ost-lesson-on .study-stage-bottom-bar {
  margin-top: 0.35rem;
  padding-block-start: 0.15rem;
  flex-shrink: 0;
}
.interactive-study-stage.ost-lesson-on .osthath-ai-icon-btn {
  flex-direction: row;
  gap: 0.55rem;
  padding: 0.28rem 0.85rem 0.28rem 0.35rem;
  border-radius: 999px;
  background: rgba(15, 30, 54, 0.06);
  border: 1px solid rgba(197, 155, 39, 0.35);
}
.interactive-study-stage.ost-lesson-on .osthath-icon-circle {
  inline-size: 34px;
  block-size: 34px;
}
.interactive-study-stage.ost-lesson-on .osthath-icon-circle svg {
  inline-size: 18px;
  block-size: 18px;
}

.ost-lesson [hidden], .ost-lesson[hidden] { display: none !important; }

.ost-lesson {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 2px 4px 4px;
}
.ost-lesson.ost-enter { animation: ostEnter 0.6s cubic-bezier(.2,.9,.25,1) both; }
.ost-lesson.ost-leave { animation: ostLeave 0.26s ease both; }
@keyframes ostEnter { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ostLeave { to { opacity: 0; transform: translateY(8px) scale(0.99); } }

/* ---- top bar ---- */
.ost-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ost-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color: #fff; font-size: 0.85rem; max-inline-size: 70%;
  box-shadow: 0 6px 16px -8px rgba(15,30,54,0.6);
}
.ost-chip b {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-950); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap;
}
.ost-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost-status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-start: auto;
  font-size: 0.82rem; font-weight: 600; color: var(--navy-800);
  padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.8);
  border: 1px solid var(--ivory-300);
}
.ost-status[data-state="idle"] { visibility: hidden; }
.ost-eq { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 14px; }
.ost-eq i { inline-size: 3px; block-size: 4px; border-radius: 2px; background: var(--crimson-700); opacity: 0.35; }
.ost-status[data-state="speaking"] .ost-eq i { opacity: 1; animation: ostEq 0.9s ease-in-out infinite; }
.ost-status[data-state="speaking"] .ost-eq i:nth-child(2) { animation-delay: -0.6s; }
.ost-status[data-state="speaking"] .ost-eq i:nth-child(3) { animation-delay: -0.3s; }
.ost-status[data-state="speaking"] .ost-eq i:nth-child(4) { animation-delay: -0.75s; }
.ost-status[data-state="speaking"] .ost-eq i:nth-child(5) { animation-delay: -0.15s; }
.ost-status[data-state="thinking"] .ost-eq i { background: var(--gold-500); opacity: 1; animation: ostDot 1.2s ease-in-out infinite; block-size: 4px; }
.ost-status[data-state="thinking"] .ost-eq i:nth-child(n) { animation-delay: calc(var(--n, 0) * 0.1s); }
.ost-status[data-state="listening"] .ost-eq i { background: #2e9e5b; opacity: 1; animation: ostListen 1.6s ease-in-out infinite; }
@keyframes ostEq { 0%,100% { block-size: 4px; } 50% { block-size: 14px; } }
@keyframes ostDot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ostListen { 0%,100% { block-size: 5px; } 50% { block-size: 8px; } }
.ost-ghost-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ivory-300); background: #fff; color: var(--navy-800);
  border-radius: 999px; padding: 0.28rem 0.75rem;
}
.ost-ghost-btn:hover { border-color: var(--gold-500); }
.ost-close {
  inline-size: 32px; block-size: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ivory-300); background: #fff; color: var(--navy-800); font-size: 1.2rem; line-height: 1;
  display: grid; place-content: center; transition: transform 0.2s ease, border-color 0.2s ease;
}
.ost-close:hover { transform: rotate(90deg); border-color: var(--crimson-700); color: var(--crimson-700); }

/* ---- body: text (and images beside it) ---- */
.ost-body { display: grid; grid-template-columns: 1fr; gap: 1.1rem; flex: 1; min-block-size: 0; }
.ost-body.has-media { grid-template-columns: minmax(0, 1.45fr) minmax(220px, 1fr); }
@media (max-width: 900px) { .ost-body.has-media { grid-template-columns: 1fr; } }
.ost-main { display: flex; flex-direction: column; gap: 0.85rem; min-inline-size: 0; flex: 1; min-block-size: 0; }

.ost-question {
  align-self: flex-end; max-inline-size: 85%;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); color: #fff;
  border-radius: 18px 18px 4px 18px; padding: 0.6rem 1rem; box-shadow: 0 10px 22px -14px rgba(15,30,54,0.8);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.ost-question[dir="rtl"] { align-self: flex-start; border-radius: 18px 18px 18px 4px; }
.ost-question.ost-in { animation: ostBubble 0.5s cubic-bezier(.2,1.3,.4,1) both; }
.ost-q-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-400); }
.ost-q-text { font-size: 1.02rem; line-height: 1.6; }
@keyframes ostBubble { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

/* the sentence being said, big */
.ost-spotlight {
  position: relative; min-block-size: 7.5rem; display: flex; align-items: center;
  padding: 1.1rem 1.3rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,238,0.95));
  border: 1px solid rgba(197,155,39,0.35);
  box-shadow: 0 16px 34px -22px rgba(15,30,54,0.45), inset 0 1px 0 #fff;
  overflow: hidden;
}
.ost-spotlight::before {
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; inline-size: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-400), var(--crimson-700));
}
.ost-spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
  transform: translateX(-120%);
}
.ost-lesson-on .ost-spotlight:has(.ost-in)::after { animation: ostSheen 1.4s ease 0.15s 1; }
@keyframes ostSheen { to { transform: translateX(120%); } }
.ost-spot-text {
  margin: 0; inline-size: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.45; color: var(--navy-950);
}
.ost-spot-text[dir="rtl"] { font-family: 'Plus Jakarta Sans', 'Geeza Pro', 'Noto Naskh Arabic', system-ui, sans-serif; font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.75; }
.ost-spot-text.ost-out { opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; }
.ost-spot-text .ost-w { display: inline; }
.ost-spot-text.ost-in .ost-w { animation: ostWord 0.5s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(min(var(--i), 28) * 38ms); }
@keyframes ostWord { from { opacity: 0; filter: blur(6px); color: var(--gold-500); } 60% { color: var(--crimson-700); } to { opacity: 1; filter: none; } }

/* thinking */
.ost-thinking { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 18px; background: rgba(255,255,255,0.75); border: 1px dashed rgba(197,155,39,0.5); animation: ostBubble 0.4s ease both; }
.ost-orb { position: relative; inline-size: 46px; block-size: 46px; flex: none; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-400), var(--crimson-700), var(--navy-800), var(--gold-400)); animation: ostSpin 1.6s linear infinite; }
.ost-orb span { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--ivory-100) 60%); box-shadow: inset 0 0 12px rgba(197,155,39,0.35); }
.ost-thinking-copy { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-inline-size: 0; }
.ost-thinking-copy strong { color: var(--navy-900); font-size: 0.98rem; }
.ost-shimmer { display: block; block-size: 9px; border-radius: 6px; inline-size: 100%;
  background: linear-gradient(90deg, var(--ivory-300) 0%, #fff 50%, var(--ivory-300) 100%); background-size: 200% 100%; animation: ostShimmer 1.3s linear infinite; }
.ost-shimmer.short { inline-size: 60%; }
@keyframes ostSpin { to { transform: rotate(360deg); } }
@keyframes ostShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* the full answer, the current sentence marked */
.ost-transcript {
  list-style: none; margin: 0; padding: 0.2rem 0.2rem 0.2rem 0; max-block-size: 210px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.35rem; scroll-behavior: smooth;
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
}
.ost-line {
  padding: 0.45rem 0.8rem; border-radius: 10px; font-size: 0.98rem; line-height: 1.7; color: var(--navy-800);
  opacity: 0.55; border-inline-start: 3px solid transparent; transition: opacity 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
  animation: ostLine 0.45s ease both; animation-delay: var(--d);
}
.ost-line.done { opacity: 0.8; }
.ost-line.current { opacity: 1; background: rgba(197,155,39,0.12); border-inline-start-color: var(--gold-500); transform: translateX(2px); font-weight: 600; }
.ost-line[dir="rtl"].current { transform: translateX(-2px); }
@keyframes ostLine { from { opacity: 0; transform: translateY(6px); } }

.ost-sources { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; animation: ostLine 0.5s ease both; }
.ost-src-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--crimson-700); font-weight: 700; margin-inline-end: 0.2rem; }
.ost-src { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--ivory-100); border: 1px solid var(--ivory-300); color: var(--navy-800); }

/* ---- topic images ---- */
.ost-media { display: flex; flex-direction: column; gap: 0.9rem; min-inline-size: 0; }
.ost-figure {
  margin: 0; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(197,155,39,0.35); box-shadow: 0 20px 40px -26px rgba(15,30,54,0.6);
  opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(8px);
  clip-path: inset(0 0 100% 0 round 16px);
}
.ost-figure.ready { animation: ostReveal 0.9s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--d); }
@keyframes ostReveal {
  0% { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(8px); clip-path: inset(0 0 100% 0 round 16px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round 16px); }
}
.ost-figure-btn { display: block; position: relative; inline-size: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--ivory-100); overflow: hidden; }
.ost-figure-btn img { display: block; inline-size: 100%; block-size: auto; max-block-size: 300px; object-fit: contain; animation: ostKenBurns 14s ease-in-out infinite alternate; }
@keyframes ostKenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }
.ost-zoom { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-content: center;
  background: rgba(15,30,54,0.75); color: #fff; font-size: 0.95rem; opacity: 0; transition: opacity 0.2s ease; }
.ost-figure-btn:hover .ost-zoom, .ost-figure-btn:focus-visible .ost-zoom { opacity: 1; }
.ost-figure figcaption { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.9rem 0.85rem; font-size: 0.86rem; color: var(--navy-800); }
.ost-fig-week { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson-700); font-weight: 700; }
.ost-fig-note { color: var(--navy-700, #44506a); font-size: 0.8rem; line-height: 1.5; }

/* ---- the gallery: one stage, two layers trading places, a caption, a thumbnail strip ---- */
.ost-gal { display: flex; flex-direction: column; gap: 0.7rem; min-inline-size: 0; outline: none; }
.ost-gal.ost-gal-in { animation: ostGalIn 0.85s cubic-bezier(.2,.9,.2,1) both; }
@keyframes ostGalIn { from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(8px); clip-path: inset(0 0 100% 0 round 18px); }
  to { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round 18px); } }
.ost-gal:focus-visible .ost-gal-stage { box-shadow: 0 0 0 3px var(--gold-500), 0 24px 50px -28px rgba(15,30,54,0.7); }
.ost-gal-stage {
  position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3.1; min-block-size: 220px;
  background: radial-gradient(120% 90% at 50% 0%, #fffdf8 0%, var(--ivory-100, #f6f1e7) 60%, #ece3d1 100%);
  border: 1px solid rgba(197,155,39,0.45); box-shadow: 0 24px 50px -28px rgba(15,30,54,0.7);
  touch-action: pan-y; user-select: none; isolation: isolate;
}
.ost-gal-layer { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; will-change: transform, opacity, clip-path; }
.ost-gal-bg { position: absolute; inset: -10%; inline-size: 120%; block-size: 120%; object-fit: cover; filter: blur(26px) saturate(1.15); opacity: 0.32; transform: scale(1.05); }
.ost-gal-img {
  position: relative; max-inline-size: 92%; max-block-size: 88%; object-fit: contain; border-radius: 8px;
  filter: drop-shadow(0 14px 22px rgba(15,30,54,0.22));
  transform-origin: var(--kb-x, 50%) var(--kb-y, 50%);
}
.ost-gal-layer.on .ost-gal-img { animation: ostGalKen 16s ease-in-out infinite alternate; }
@keyframes ostGalKen { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }

/* the glow that sweeps the stage when Osthath names the image on show */
.ost-gal-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(214,174,63,0.85) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; }
.ost-gal-stage.pulse .ost-gal-glow { animation: ostGalGlow 1.4s cubic-bezier(.3,.7,.2,1) both; }
@keyframes ostGalGlow { 0% { opacity: 0; transform: rotate(0deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(300deg); } }
.ost-gal-said {
  position: absolute; z-index: 4; inset-block-start: 12px; inset-inline-start: 12px; padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(120deg, var(--crimson-700, #8c1d40), var(--crimson-800, #6e1531)); box-shadow: 0 8px 18px -8px rgba(140,29,64,0.9);
  opacity: 0; transform: translateY(-8px) scale(0.92); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,1.3,.4,1);
}
.ost-gal-stage.said .ost-gal-said { opacity: 1; transform: none; }
.ost-gal-nav, .ost-gal-zoom {
  position: absolute; z-index: 4; display: grid; place-content: center; border: 0; cursor: pointer; color: #fff;
  background: rgba(15,30,54,0.62); backdrop-filter: blur(6px); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.6);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.2,1.3,.4,1), background 0.2s ease;
}
.ost-gal-nav { inset-block-start: 50%; inline-size: 40px; block-size: 40px; border-radius: 50%; margin-block-start: -20px; opacity: 0; }
.ost-gal-nav.prev { inset-inline-start: 10px; transform: translateX(-8px); }
.ost-gal-nav.next { inset-inline-end: 10px; transform: translateX(8px); }
.ost-gal-zoom { inset-block-start: 10px; inset-inline-end: 10px; inline-size: 36px; block-size: 36px; border-radius: 12px; opacity: 0; }
.ost-gal-stage:hover .ost-gal-nav, .ost-gal-stage:focus-within .ost-gal-nav, .ost-gal:focus-visible .ost-gal-nav { opacity: 1; transform: none; }
.ost-gal-stage:hover .ost-gal-zoom, .ost-gal-stage:focus-within .ost-gal-zoom { opacity: 1; }
.ost-gal-nav:hover, .ost-gal-zoom:hover { background: var(--crimson-700, #8c1d40); transform: scale(1.08); }
@media (hover: none) { .ost-gal-nav, .ost-gal-zoom { opacity: 0.9; transform: none; } }
.ost-gal-count { position: absolute; z-index: 4; inset-block-end: 12px; inset-inline-end: 12px; padding: 0.15rem 0.55rem; border-radius: 999px;
  font: 600 0.72rem/1.6 'JetBrains Mono', ui-monospace, monospace; color: #fff; background: rgba(15,30,54,0.6); }
.ost-gal-timer { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: rgba(15,30,54,0.12); }
.ost-gal-timer i { display: block; block-size: 100%; inline-size: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-400, #d6ae3f), var(--crimson-700, #8c1d40)); }
@keyframes ostGalTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ost-gal-stage.paused .ost-gal-timer { opacity: 0; transition: opacity 0.3s ease; }
.ost-gal-timer { transition: opacity 0.3s ease; }

.ost-gal-cap { display: flex; flex-direction: column; gap: 0.18rem; padding: 0.15rem 0.2rem; min-block-size: 3.6rem; color: var(--navy-800, #1d2b45); }
.ost-gal-k { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson-700, #8c1d40); font-weight: 700; }
.ost-gal-k b { color: var(--gold-600, #a8841f); }
.ost-gal-title { font-size: 1.02rem; line-height: 1.35; }
.ost-gal-title span { display: inline-block; }
.ost-gal-cap.in .ost-gal-title span { animation: ostGalWord 0.55s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes ostGalWord { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.ost-gal-note { font-size: 0.82rem; line-height: 1.5; color: var(--navy-700, #44506a); }
.ost-gal-cap.in .ost-gal-note, .ost-gal-cap.in .ost-gal-credit { animation: ostLine 0.6s ease both 0.18s; }
.ost-gal-credit { font-size: 0.68rem; color: var(--navy-700, #6b7385); opacity: 0.8; text-decoration: none; }
a.ost-gal-credit:hover { text-decoration: underline; opacity: 1; }

.ost-gal-strip { display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.2rem 0.15rem 0.45rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ost-gal-thumb {
  flex: none; inline-size: 62px; block-size: 48px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; scroll-snap-align: center;
  border: 2px solid transparent; background: var(--ivory-100, #f6f1e7); opacity: 0.62;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,1.3,.4,1), border-color 0.25s ease, box-shadow 0.25s ease;
  animation: ostBubble 0.5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: var(--d);
}
.ost-gal-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ost-gal-thumb:hover { opacity: 1; transform: translateY(-2px); }
.ost-gal-thumb.on { opacity: 1; border-color: var(--gold-500, #c59b27); transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 16px -8px rgba(197,155,39,0.9); }
.ost-gal-thumb.broken { display: none; }

.interactive-study-stage.ost-popup .ost-gal-stage { aspect-ratio: auto; block-size: min(46dvh, 520px); }

/* ---- the large viewer ---- */
.ost-lightbox { border: 0; padding: 0; background: transparent; max-inline-size: min(94vw, 1180px); max-block-size: 92vh; overflow: visible; }
.ost-lightbox::backdrop { background: rgba(8,14,28,0.78); backdrop-filter: blur(8px); }
.ost-lightbox[open] { animation: ostZoomIn 0.45s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes ostZoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.ost-lightbox figure { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.ost-lb-frame { background: radial-gradient(120% 90% at 50% 0%, #fffdf8, var(--ivory-100, #f6f1e7)); display: grid; place-items: center; }
.ost-lightbox img { display: block; max-inline-size: min(94vw, 1180px); max-block-size: 76vh; object-fit: contain; }
.ost-lightbox figcaption { padding: 0.8rem 1.1rem 0.9rem; color: var(--navy-900, #13203a); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ost-lb-meta { font-size: 0.74rem; color: var(--navy-700, #5b6478); }
.ost-lb-meta a { color: inherit; }
.ost-lightbox .ost-close { position: absolute; inset-block-start: -14px; inset-inline-end: -14px; z-index: 2; box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.ost-lb-nav { position: absolute; z-index: 2; inset-block-start: 42%; inline-size: 46px; block-size: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-content: center; color: #fff; background: rgba(15,30,54,0.7); backdrop-filter: blur(6px); transition: transform 0.2s ease, background 0.2s ease; }
.ost-lb-nav.prev { inset-inline-start: 12px; } .ost-lb-nav.next { inset-inline-end: 12px; }
.ost-lb-nav:hover { background: var(--crimson-700, #8c1d40); transform: scale(1.08); }
::view-transition-group(ost-gal-hero) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- the question box ---- */
.ost-composer { display: flex; flex-direction: column; gap: 0.55rem; inline-size: 100%; }
.ost-composer.ost-pop { animation: ostPop 0.7s cubic-bezier(.18,1.35,.4,1) both; }
@keyframes ostPop { 0% { opacity: 0; transform: translateY(26px) scale(0.9); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
.ost-suggest { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ost-sug {
  font: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 999px; padding: 0.35rem 0.9rem;
  border: 1px solid rgba(197,155,39,0.5); background: rgba(255,255,255,0.9); color: var(--navy-900);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: ostBubble 0.5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: var(--d);
}
.ost-sug:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 8px 18px -10px rgba(197,155,39,0.9); }
.ost-input-wrap {
  position: relative; display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.55rem 0.55rem 0.55rem 1rem;
  border-radius: 20px; background: #fff;
  border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, var(--gold-400), var(--crimson-700), var(--navy-800), var(--gold-400));
  background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 300%;
  animation: ostBorder 6s linear infinite;
  box-shadow: 0 18px 40px -22px rgba(15,30,54,0.55);
}
.ost-input-wrap:focus-within { box-shadow: 0 0 0 5px rgba(197,155,39,0.18), 0 18px 40px -22px rgba(15,30,54,0.55); }
@keyframes ostBorder { to { background-position: 0 0, 300% 0; } }
.ost-input-wrap textarea {
  flex: 1; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 1.05rem; line-height: 1.6;
  color: var(--navy-950); min-block-size: 2.6em; max-block-size: 160px; padding: 0.3rem 0;
}
.ost-send {
  flex: none; inline-size: 46px; block-size: 46px; border-radius: 15px; border: 0; cursor: pointer; display: grid; place-content: center;
  background: linear-gradient(135deg, var(--crimson-700), var(--crimson-800)); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(140,29,64,0.9); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ost-send:hover { transform: translateY(-2px) scale(1.04); }
.ost-send:active { transform: scale(0.95); }
[dir="rtl"] .ost-send svg, .ost-input-wrap:has(textarea:dir(rtl)) .ost-send svg { transform: scaleX(-1); }
.ost-hint { font-size: 0.74rem; color: var(--navy-700, #5b6478); opacity: 0.8; padding-inline: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .ost-lesson *, .ost-lesson *::before, .ost-lesson *::after, .ost-lesson { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ost-figure { opacity: 1; transform: none; filter: none; clip-path: none; }
  .ost-gal, .ost-gal-layer { clip-path: none !important; filter: none !important; }
  .ost-gal-layer.on .ost-gal-img { animation: none; }
}

/* a long piece in smaller type; the next piece shown dimmed while its voice is being made */
.ost-spot-text.ost-long { font-size: clamp(1.15rem, 1.7vw, 1.5rem); }
.ost-spot-text[dir="rtl"].ost-long { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
.ost-spotlight { transition: opacity 0.3s ease; }
.ost-spotlight.ost-pending .ost-spot-text { opacity: 0.38; filter: saturate(0.4); transition: opacity 0.4s ease; }
.ost-spotlight.ost-pending::before { animation: ostPendingBar 1s ease-in-out infinite alternate; }
@keyframes ostPendingBar { from { opacity: 0.35; } to { opacity: 1; } }
.ost-lesson.is-thinking .ost-spotlight { display: none; }

/* ---- the study box as a popup over both columns while Osthath talks (same View Transition as the chat's expand) ---- */
/* (the expand / collapse animation itself: «ost-pop» in styles.css, started by window.osthathPopTransition) */

.interactive-study-stage.ost-popup {
  position: fixed;
  inset: 5dvh 0 auto 0;
  margin-inline: auto;
  inline-size: min(1140px, calc(100dvw - 11.5rem));
  block-size: 90dvh;
  z-index: 1000;
  border: 2px solid var(--gold-500);
  box-shadow: var(--shadow-elevated, 0 30px 80px rgba(8, 14, 28, 0.45));
  padding: 1.5rem 1.75rem 1.25rem;
  transition: inset 0.35s cubic-bezier(0.22, 1, 0.36, 1), inline-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), block-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.35s ease;
}
.interactive-study-stage.ost-popup.ost-fullsize {
  inset: 0;
  inline-size: 100dvw;
  block-size: 100dvh;
  border-radius: 0;
  border-width: 0;
  padding: 1.5rem 5.5rem 1.25rem;
}
.interactive-study-stage.ost-popup .ost-spot-text { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.interactive-study-stage.ost-popup .ost-spot-text[dir="rtl"] { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.interactive-study-stage.ost-popup .ost-spot-text.ost-long { font-size: clamp(1.25rem, 1.9vw, 1.75rem); }
.interactive-study-stage.ost-popup .ost-transcript { max-block-size: 30dvh; }
.interactive-study-stage.ost-popup .ost-figure-btn img { max-block-size: 46dvh; }

.ost-stage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 38, 0.62);
  backdrop-filter: blur(4px);
  z-index: 990;
  opacity: 1;
  transition: display, opacity 0.28s ease-out;
  transition-behavior: allow-discrete;
}
@starting-style { .ost-stage-backdrop { opacity: 0; } }
.ost-stage-backdrop[hidden] { display: none; opacity: 0; }

@media (max-width: 700px) {
  .interactive-study-stage.ost-popup { inset: 2dvh 0 auto 0; inline-size: calc(100dvw - 1rem); block-size: 96dvh; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ost-stage-backdrop { transition-duration: 0.1s; }
}


/* ---- Osthath's whiteboard (notes written by hand while he talks) ---- */
.ost-board-wrap { display: flex; flex-direction: column; gap: 0.45rem; min-block-size: 0; flex: 1 1 0; block-size: 100%; animation: ostLine 0.5s ease both; }
.ost-board-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ost-board-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--crimson-700, #8c1d40); }
.ost-board-toggle { display: none !important; }
.ost-lesson:not(.view-board) .ost-board { display: none; }
.ost-lesson.view-board .ost-transcript { display: none !important; }

/* When the board appears, hide all spoken text and let the board take the whole text place */
.ost-lesson.board-active .ost-spotlight,
.ost-lesson.board-active .ost-transcript,
.ost-lesson:has(.ost-board-wrap:not([hidden])) .ost-spotlight,
.ost-lesson:has(.ost-board-wrap:not([hidden])) .ost-transcript {
  display: none !important;
}

.ost-board {
  position: relative; overflow: hidden; flex: 1 1 0; min-block-size: 280px; max-block-size: none; block-size: 100%; border-radius: 14px;
  display: flex; flex-direction: column;
  padding: 0.9rem 1.1rem 1.6rem;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,0.95), rgba(255,255,255,0) 55%),
    radial-gradient(80% 80% at 90% 100%, rgba(200,214,230,0.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fbfcfd, #f1f4f7);
  border: 8px solid #d9dde3; border-block-end-width: 14px;
  box-shadow: inset 0 0 0 1px rgba(15,30,54,0.08), inset 0 10px 24px -18px rgba(15,30,54,0.4), 0 16px 30px -22px rgba(15,30,54,0.6);
}
.ost-board::after { /* the marker tray */
  content: ""; position: absolute; inset-inline: 18%; inset-block-end: -11px; block-size: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #8c1d40 0 14%, transparent 14% 18%, #157a3a 18% 30%, transparent 30% 34%, #1b2a4a 34% 50%, transparent 50%);
  opacity: 0.85;
}
.interactive-study-stage.ost-popup .ost-board { min-block-size: 200px; max-block-size: none; }
.ost-board-notes {
  /* fill the whole board: notes go down a column, then continue in the next column to the right;
     the board is erased only when a new note has no room left anywhere */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0.55rem 2.2rem;
  flex: 1 1 0;
  min-block-size: 0;
  max-block-size: 100%;
  overflow: hidden;
  padding-block: 0.25rem 0.6rem;
  scrollbar-width: none;
}
.ost-board-notes > .ost-note { max-inline-size: 100%; }
.ost-note {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-block-size: 46px;
  padding: 4px 8px 6px;
  border-radius: 10px;
  color: var(--ink, #1b2a4a);
  transition: opacity 0.28s ease, background-color 0.28s ease, transform 0.28s ease;
}
.ost-note.kind-title {
  min-block-size: 54px;
  padding-block-end: 10px;
}
.ost-note.kind-warn,
.ost-note.kind-tip {
  margin-block: 3px;
  padding: 6px 10px 8px;
}
/* Focus where the board is currently writing */
.ost-board-notes:has(.ost-note.writing) .ost-note.written {
  opacity: 0.68;
}
.ost-note.writing {
  opacity: 1;
  background: rgba(197, 155, 39, 0.11);
  box-shadow: 0 0 0 1px rgba(197, 155, 39, 0.28);
}
.ost-note.written:last-child {
  opacity: 1;
}
.ost-note[dir="rtl"] { justify-content: flex-start; }
.ost-note-svg { display: block; max-inline-size: 100%; block-size: 40px; inline-size: auto; overflow: visible; flex-shrink: 0; }
.ost-note.kind-title .ost-note-svg { block-size: 46px; }
.ost-note .ost-hand-svg {
  font-family: Caveat, "Aref Ruqaa", cursive; font-weight: 700; font-size: 34px;
  fill: var(--ink, #1b2a4a); fill-opacity: 0; stroke: var(--ink, #1b2a4a); stroke-width: 0.9px;
  stroke-dasharray: 160; stroke-dashoffset: 160; paint-order: stroke;
}
.ost-note[dir="rtl"] .ost-hand-svg { font-family: "Aref Ruqaa", Caveat, serif; font-weight: 700; font-size: 31px; }
.ost-note.writing .ost-hand-svg { animation: ostInkStroke 0.9s ease-out forwards, ostInkFill 0.5s ease 0.45s forwards; }
.ost-note.written .ost-hand-svg { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0.4px; }
@keyframes ostInkStroke { to { stroke-dashoffset: 0; } }
@keyframes ostInkFill { to { fill-opacity: 1; } }
.ost-note.kind-title .ost-hand-svg { font-size: 38px; }
.ost-note-html { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em; line-height: 1.25; }
.ost-note .ost-hand { font-family: Caveat, "Aref Ruqaa", cursive; font-weight: 700; font-size: 1.55rem; color: var(--ink, #1b2a4a); }
.ost-note .ost-math { font-size: 1.12rem; color: var(--ink, #1b2a4a); }
.ost-note .ost-math .katex { color: inherit; }
.ost-note-mark { position: absolute; pointer-events: none; overflow: visible; }

.ost-pen { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 3; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 6px 6px rgba(15,30,54,0.35)); transition: opacity 0.25s ease; }
.ost-pen.on { opacity: 1; }
.ost-pen svg { display: block; transform-origin: 20% 90%; animation: ostPenWiggle 0.22s ease-in-out infinite alternate; }
@keyframes ostPenWiggle { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-2px); } }

.ost-eraser { position: absolute; z-index: 4; inline-size: 92px; block-size: 46px; border-radius: 10px; pointer-events: none; opacity: 0;
  inset-block-start: 20%; inset-inline-start: -110px;
  background: linear-gradient(180deg, #2f3d55 0 42%, #e9e4d8 42% 100%); box-shadow: 0 10px 18px -8px rgba(15,30,54,0.6); }
.ost-eraser.on { animation: ostEraser 0.95s cubic-bezier(.45,.05,.4,1) forwards; }
@keyframes ostEraser {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  10% { opacity: 1; }
  35% { transform: translate(calc(100cqi + 90px), 18px) rotate(6deg); }
  60% { transform: translate(40px, 70px) rotate(-6deg); }
  90% { opacity: 1; transform: translate(calc(100cqi + 120px), 110px) rotate(6deg); }
  100% { opacity: 0; transform: translate(calc(100cqi + 140px), 110px) rotate(6deg); }
}
.ost-board { container-type: inline-size; }
@media (prefers-reduced-motion: reduce) {
  .ost-note .ost-hand-svg { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
  .ost-pen, .ost-eraser { display: none; }
}

/* board view: the board takes the entire text area with no spoken text shown */
.ost-lesson { overflow-y: hidden; }
.ost-lesson .ost-body { min-block-size: 0; overflow: hidden; flex: 1 1 0; }
.ost-lesson .ost-main { min-block-size: 0; overflow: hidden; flex: 1 1 0; }
.ost-board-wrap { flex: 1 1 0; min-block-size: 0; }
.ost-board { flex: 1 1 0; min-block-size: 160px; max-block-size: none; }
.ost-composer { flex-shrink: 0; }
.ost-lesson:has(.ost-composer:not([hidden])) .ost-gal-stage { block-size: min(34dvh, 400px); }
.interactive-study-stage.ost-popup .ost-lesson.view-board .ost-board { min-block-size: 180px; max-block-size: none; }

/* the lesson appears when the voice starts: the popup opens, then its parts rise in one after another */
@keyframes ostRise { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ost-lesson.ost-reveal .ost-top { animation: ostRise 0.55s cubic-bezier(.2,.9,.25,1) 0.22s both; }
.ost-lesson.ost-reveal .ost-spotlight { animation: ostRise 0.6s cubic-bezier(.2,.9,.25,1) 0.38s both; }
.ost-lesson.ost-reveal .ost-question { animation: ostRise 0.55s cubic-bezier(.2,.9,.25,1) 0.5s both; }
.ost-lesson.ost-reveal .ost-media { animation: ostRise 0.6s cubic-bezier(.2,.9,.25,1) 0.55s both; }
.ost-lesson.ost-reveal .ost-composer { animation: ostRise 0.6s cubic-bezier(.2,.9,.25,1) 0.7s both; }
@media (prefers-reduced-motion: reduce) { .ost-lesson.ost-reveal * { animation: none !important; } }

/* ---- Paused state ---- */
.ost-status[data-state="paused"] {
  background: rgba(255, 244, 214, 0.95);
  border-color: var(--gold-500);
  color: var(--crimson-700);
}
.ost-status[data-state="paused"] .ost-eq i {
  background: var(--crimson-700);
  opacity: 0.85;
  block-size: 6px;
  animation: none !important;
}

/* ---- Left (Green Area) & Right (Red Area) Floating Action Buttons in the Empty Blurred Space ---- */
.ost-side-rail {
  position: fixed;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 1018;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition: inset-inline-start 0.35s cubic-bezier(0.22, 1, 0.36, 1), inset-inline-end 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ost-side-rail[hidden] {
  display: none !important;
}
.ost-rail-left {
  inset-inline-start: max(0.5rem, calc((100dvw - min(1140px, calc(100dvw - 11.5rem))) / 4 - 34px));
  animation: ostRailLeftIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ost-rail-right {
  inset-inline-end: max(0.5rem, calc((100dvw - min(1140px, calc(100dvw - 11.5rem))) / 4 - 34px));
  animation: ostRailRightIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ostRailLeftIn {
  from { opacity: 0; transform: translate(-22px, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes ostRailRightIn {
  from { opacity: 0; transform: translate(22px, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

body.ost-fullsize-on .ost-rail-left {
  inset-inline-start: 0.7rem;
}
body.ost-fullsize-on .ost-rail-right {
  inset-inline-end: 0.7rem;
}
/* When the Side Chatbot drawer is open on the right, shift the right rail smoothly beside it */
body.ost-side-chat-open .ost-rail-right {
  inset-inline-end: min(454px, calc(100dvw - 4.8rem));
}

.ost-rail-btn {
  inline-size: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.ost-rail-btn:hover {
  transform: translateY(-3px) scale(1.06);
  color: #ffffff;
}
.ost-rail-btn:active {
  transform: scale(0.94);
}
.ost-rail-icon {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: rgba(15, 30, 54, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  color: var(--gold-400, #d6ae3f);
  display: grid;
  place-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ost-rail-btn:hover .ost-rail-icon {
  background: rgba(197, 155, 39, 0.28);
  border-color: var(--gold-400, #d6ae3f);
  color: #ffffff;
  box-shadow: 0 10px 24px -6px rgba(197, 155, 39, 0.7);
}
.ost-rail-btn.is-active .ost-rail-icon {
  background: linear-gradient(135deg, var(--crimson-700, #8c1d40), var(--crimson-800, #6e1531));
  border-color: var(--gold-400, #d6ae3f);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(214, 174, 63, 0.35), 0 10px 22px -6px rgba(140, 29, 64, 0.85);
}
.ost-rail-label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* Toggle icons inside Pause & Full Size buttons */
#ostActionPauseBtn .ico-play { display: none; }
#ostActionPauseBtn.is-active .ico-pause { display: none; }
#ostActionPauseBtn.is-active .ico-play { display: block; }

#ostActionFullsizeBtn .ico-fs-exit { display: none; }
#ostActionFullsizeBtn.is-active .ico-fs-enter { display: none; }
#ostActionFullsizeBtn.is-active .ico-fs-exit { display: block; }

/* ---- Rating Popover Card anchored to Rating Button ---- */
.ost-rating-anchor {
  position: relative;
  display: flex;
  justify-content: center;
}
.ost-rating-popover {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(100% + 14px);
  transform: translateY(-50%);
  inline-size: 270px;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #ffffff;
  color: var(--navy-950, #0f1e36);
  border: 2px solid var(--gold-500, #c59b27);
  box-shadow: 0 24px 52px -16px rgba(8, 14, 28, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 1030;
  animation: ostRatePopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ost-rating-popover[hidden] {
  display: none !important;
}
@keyframes ostRatePopIn {
  from { opacity: 0; transform: translate(12px, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}
.ost-rating-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--navy-900);
}
.ost-rating-close {
  border: 0;
  background: rgba(15, 30, 54, 0.07);
  color: var(--navy-800);
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.ost-rating-sub {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--crimson-700);
  direction: rtl;
  text-align: right;
}
.ost-rating-stars {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.ost-star-btn {
  border: 0;
  background: transparent;
  font-size: 1.65rem;
  line-height: 1;
  color: #d3d8e2;
  cursor: pointer;
  padding: 0.1rem;
  transition: transform 0.18s cubic-bezier(0.22, 1.4, 0.36, 1), color 0.15s ease;
}
.ost-star-btn:hover {
  transform: scale(1.2);
}
.ost-star-btn.on {
  color: var(--gold-500, #c59b27);
  text-shadow: 0 2px 10px rgba(197, 155, 39, 0.45);
}
.ost-rating-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  direction: rtl;
}
.ost-rate-tag {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 30, 54, 0.15);
  background: var(--ivory-100, #f8f5ee);
  color: var(--navy-900);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ost-rate-tag.on {
  background: var(--navy-900);
  color: var(--gold-400);
  border-color: var(--gold-500);
}
.ost-rating-submit {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--crimson-700, #8c1d40), var(--crimson-800, #6e1531));
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ost-rating-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -6px rgba(140, 29, 64, 0.7);
}
.ost-rating-thanks {
  font-size: 0.84rem;
  font-weight: 700;
  color: #157a3a;
  text-align: center;
  direction: rtl;
  padding: 0.35rem 0;
}

/* ---- Chatbot Slide-In Drawer from the Right Side (where the Chatbot button lives) ---- */
.ost-chat-drawer-close-btn {
  display: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  border: 1px solid var(--ivory-300);
  background: var(--ivory-100);
  color: var(--navy-900);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  place-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.ost-chat-drawer-close-btn:hover {
  background: var(--crimson-700);
  color: #ffffff;
  transform: rotate(90deg);
}
.osthath-right-chat-panel.ost-chat-side-drawer {
  position: fixed !important;
  inset: 4dvh 1rem 4dvh auto !important;
  inline-size: min(420px, calc(100dvw - 2rem)) !important;
  block-size: 92dvh !important;
  max-block-size: 92dvh !important;
  z-index: 1025 !important;
  border: 2px solid var(--gold-500) !important;
  border-radius: 20px !important;
  box-shadow: -20px 0 60px -15px rgba(6, 12, 24, 0.65), 0 24px 60px -20px rgba(8, 14, 28, 0.6) !important;
  transform-origin: right center;
  animation: ostChatSlideFromRight 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.osthath-right-chat-panel.ost-chat-side-drawer.ost-chat-side-closing {
  animation: ostChatSlideToRight 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.osthath-right-chat-panel.ost-chat-side-drawer .ost-chat-drawer-close-btn {
  display: inline-grid;
}
.osthath-right-chat-panel.ost-chat-side-drawer .chat-expand-icon-btn {
  display: none;
}
@keyframes ostChatSlideFromRight {
  from {
    opacity: 0;
    transform: translateX(108%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes ostChatSlideToRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(108%) scale(0.95);
  }
}

@media (max-width: 900px) {
  .interactive-study-stage.ost-popup {
    inline-size: calc(100dvw - 1.5rem);
  }
  .ost-rail-left { inset-inline-start: 0.4rem; }
  .ost-rail-right { inset-inline-end: 0.4rem; }
  .ost-rail-btn { inline-size: 54px; min-block-size: 54px; }
}

/* short screens (laptops, small windows): the picture column fits the lesson's height. The picture shrinks first, so its title,
   note and the thumbnails under it stay on screen; if it still does not fit, the column scrolls instead of being cut off */
@media (min-width: 901px) {
  .ost-body.has-media { grid-template-rows: minmax(0, 1fr); }
  .ost-body.has-media .ost-media { min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .ost-body.has-media .ost-media { gap: 0.5rem; }
  .ost-body.has-media .ost-gal { flex: 1 1 auto; min-block-size: 0; gap: 0.45rem; }
  .ost-body.has-media .ost-gal-stage { aspect-ratio: auto; flex: 1 1 0; min-block-size: 130px; }
  .ost-body.has-media .ost-gal-cap { min-block-size: 0; gap: 0.1rem; }
  .ost-body.has-media .ost-gal-title { font-size: 0.95rem; }
  .ost-body.has-media .ost-gal-note { font-size: 0.78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ost-body.has-media .ost-gal-strip { flex: none; }
}
@media (min-width: 901px) and (max-height: 560px) {
  .ost-body.has-media .ost-gal-credit { display: none; }
  .ost-body.has-media .ost-gal-stage { min-block-size: 100px; }
}

/* diagrams the pen draws on the board (flow / tree / layers) */
.ost-note.kind-diagram { justify-content: center; padding-block: 8px 10px; }
.ost-diagram { display: block; max-inline-size: 100%; overflow: visible; }
.ost-diagram path { fill: none; }
.ost-dg-label { font-family: Caveat, "Aref Ruqaa", cursive; font-weight: 700; font-size: 26px; fill: var(--ink, #1b2a4a); }
.ost-dg-label[direction="rtl"] { font-family: "Aref Ruqaa", Caveat, serif; font-size: 23px; }
.ost-dg-label.big { font-size: 30px; fill: #8c1d40; }
.ost-dg-label.small { font-size: 20px; }
.ost-dg-label.small[direction="rtl"] { font-size: 18px; }

/* pointing inside the picture: the picture zooms to the structure Osthath names; a sketched circle and arrow show it */
.ost-gal-zoomer { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 0 0;
  transition: transform 1.05s cubic-bezier(.22,1,.36,1); will-change: transform; }
.ost-gal-zoomer.zoomed .ost-gal-img { animation: none !important; transform: none !important; }
.ost-gal-mark { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.ost-gal-mark path { fill: none; }
.ost-gal-mark-label { font-family: Caveat, cursive; font-weight: 700; font-size: 24px; fill: #c0262d;
  paint-order: stroke; stroke: rgba(255,255,255,0.92); stroke-width: 5px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .ost-gal-zoomer { transition-duration: 0.01s; } }

/* ---- Re-explain & Headlines (right rail) ---- */
.ost-rail-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none !important; }
.ost-rail-btn:disabled .ost-rail-icon { box-shadow: none; }
body.ost-side-head-open .ost-rail-right { inset-inline-end: min(454px, calc(100dvw - 4.8rem)); }

.ost-headlines {
  position: fixed; inset: 4dvh 1rem 4dvh auto; inline-size: min(420px, calc(100dvw - 2rem)); z-index: 1025;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ivory-100, #f6f1e7); color: var(--navy-900, #0f1e36);
  border: 2px solid var(--gold-500, #c59b27); border-radius: 20px;
  box-shadow: -20px 0 60px -15px rgba(6,12,24,0.65), 0 24px 60px -20px rgba(8,14,28,0.6);
  transform-origin: right center; animation: ostChatSlideFromRight 0.36s cubic-bezier(0.22,1,0.36,1) both;
}
.ost-headlines[hidden] { display: none !important; }   /* closed until its rail button is clicked */
.ost-headlines.is-closing { animation: ostChatSlideToRight 0.26s cubic-bezier(0.4,0,1,1) forwards; }
.ost-hl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 1.1rem 0.8rem;
  background: linear-gradient(135deg, var(--navy-900, #0f1e36), var(--navy-800, #1d2b45)); color: #fff; }
.ost-hl-eyebrow { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-400, #d6ae3f); font-weight: 700; }
.ost-hl-title { margin: 0.1rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; line-height: 1.1; }
.ost-hl-close { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-content: center; transition: transform 0.2s ease, background-color 0.2s ease; }
.ost-hl-close:hover { background: var(--crimson-700, #8c1d40); transform: rotate(90deg); }
.ost-hl-close:focus-visible, .ost-hl-again:focus-visible, .ost-hl-said summary:focus-visible { outline: 2px solid var(--gold-500, #c59b27); outline-offset: 2px; }
.ost-hl-list { flex: 1; min-block-size: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; overscroll-behavior: contain; }
.ost-hl-empty { margin: 1rem 0; color: var(--navy-700, #44506a); font-size: 0.92rem; line-height: 1.6; }
.ost-hl-entry { background: #fff; border: 1px solid rgba(197,155,39,0.35); border-radius: 14px; padding: 0.85rem 0.95rem; display: grid; gap: 0.55rem;
  animation: ostLine 0.45s ease both; animation-delay: var(--d, 0ms); }
.ost-hl-entry.is-latest { border-color: var(--gold-500, #c59b27); box-shadow: 0 10px 24px -16px rgba(140,29,64,0.55); }
.ost-hl-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ost-hl-kind { font-weight: 700; color: var(--crimson-700, #8c1d40); }
.ost-hl-meta time { color: var(--navy-700, #6b7385); font-variant-numeric: tabular-nums; }
.ost-hl-q { margin: 0; font-weight: 600; font-size: 0.98rem; line-height: 1.5; color: var(--navy-900, #0f1e36); }
.ost-hl-notes { list-style: none; margin: 0; padding: 0.55rem 0.7rem; display: grid; gap: 0.3rem; border-radius: 10px;
  background: #fbfaf6; border: 1px dashed rgba(29,43,69,0.18); font-family: Caveat, "Aref Ruqaa", cursive; font-size: 1.2rem; line-height: 1.25; }
.ost-hl-note { color: var(--navy-900, #1b2a4a); padding-inline-start: 0.9rem; position: relative; }
.ost-hl-note::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.ost-hl-note.k-title { font-size: 1.4rem; color: #8c1d40; padding-inline-start: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ost-hl-note.k-title::before { display: none; }
.ost-hl-note.k-warn { color: #c0262d; }
.ost-hl-note.k-tip { color: #157a3a; }
.ost-hl-note.k-diagram { color: #1b2a4a; }
.ost-hl-arrow { color: #8c1d40; font-family: system-ui, sans-serif; font-size: 0.9em; }
.ost-hl-said summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--navy-700, #44506a); }
.ost-hl-said p { margin: 0.45rem 0 0; font-size: 0.95rem; line-height: 1.85; color: var(--navy-800, #1d2b45); }
.ost-hl-wait { margin: 0; font-size: 0.85rem; color: var(--navy-700, #6b7385); font-style: italic; }
.ost-hl-again { justify-self: start; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--crimson-700, #8c1d40); color: var(--crimson-700, #8c1d40); background: transparent; transition: background-color 0.15s ease, color 0.15s ease; }
.ost-hl-again:hover { background: var(--crimson-700, #8c1d40); color: #fff; }
@media (prefers-reduced-motion: reduce) { .ost-headlines, .ost-hl-entry { animation-duration: 0.01s !important; } }

/* ---- voice typing: the microphone beside Send (lesson box and chatbot) ---- */
.osthath-mic-btn { flex: none; position: relative; display: grid; place-content: center; cursor: pointer; border-radius: 15px;
  inline-size: 46px; block-size: 46px; border: 1.5px solid rgba(140,29,64,0.35); background: #fff; color: var(--crimson-700, #8c1d40);
  transition: transform 0.18s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.osthath-mic-btn:hover { transform: translateY(-2px); border-color: var(--crimson-700, #8c1d40); }
.osthath-mic-btn:focus-visible { outline: 2px solid var(--gold-500, #c59b27); outline-offset: 2px; }
.osthath-mic-icon { display: grid; place-content: center; }
.osthath-mic-btn[data-state="rec"] { background: #c0262d; border-color: #c0262d; color: #fff;
  animation: osthathMicHeart 1.05s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--level, 0) * 12px) rgba(192,38,45,0.22); }
/* the microphone beats like a heart while it listens (lub-dub), and its glow grows with the student's voice */
@keyframes osthathMicHeart {
  0% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); }
  42% { transform: scale(1.09); } 70%, 100% { transform: scale(1); }
}
.osthath-mic-btn[data-state="busy"] { cursor: progress; opacity: 0.8; }
/* he has gone quiet: the button fades toward "sending" until 2 s of silence send the question */
.osthath-mic-btn[data-state="rec"].is-ending { animation: none; background: #e0767b; border-color: #e0767b; transition: background-color 1.3s linear; }
.osthath-mic-btn[data-state="busy"] .osthath-mic-icon { animation: osthathMicSpin 0.9s linear infinite; }
.osthath-mic-btn.is-denied { animation: osthathMicShake 0.4s ease 2; border-color: #c0262d; }
.osthath-mic-time { position: absolute; inset-block-start: -1.35rem; inset-inline: -10px; text-align: center; font: 600 0.72rem/1 system-ui, sans-serif;
  color: #c0262d; font-variant-numeric: tabular-nums; pointer-events: none; }
.osthath-mic-chat { block-size: auto; min-block-size: 46px; border-radius: var(--radius-sm, 10px); }
@keyframes osthathMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,38,45,0.45); } 50% { box-shadow: 0 0 0 9px rgba(192,38,45,0); } }
@keyframes osthathMicSpin { to { transform: rotate(360deg); } }
@keyframes osthathMicShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .osthath-mic-btn, .osthath-mic-btn .osthath-mic-icon { animation: none !important; } }

/* ---- small screens (phones, tablets, narrow windows): nothing may sit on top of the board ----
   the side buttons become one slim bar along the bottom (icons only; the labels stay for screen readers),
   and the lesson window ends above that bar */
@media (max-width: 900px) {
  .interactive-study-stage.ost-popup { inset-block-start: 1.5dvh; block-size: calc(98.5dvh - 70px); }
  .interactive-study-stage.ost-popup.ost-fullsize { inset-block-start: 0; block-size: calc(100dvh - 64px); padding: 1rem 0.9rem 0.75rem; }
  .ost-side-rail {
    inset-block-start: auto; inset-block-end: max(10px, env(safe-area-inset-bottom));
    transform: none; flex-direction: row; gap: 0.35rem; animation: ostRailUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .ost-rail-left, body.ost-fullsize-on .ost-rail-left { inset-inline-start: 0.6rem; }
  .ost-rail-right, body.ost-fullsize-on .ost-rail-right, body.ost-side-chat-open .ost-rail-right { inset-inline-end: 0.6rem; }
  .ost-rail-btn { inline-size: 44px; min-block-size: 44px; gap: 0; }
  .ost-rail-icon { inline-size: 42px; block-size: 42px; }
  .ost-rail-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ost-rating-popover { inset-block-start: auto; inset-block-end: calc(100% + 12px); inset-inline-end: 0; transform: none; max-inline-size: calc(100dvw - 1.5rem); }
}
@keyframes ostRailUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .ost-side-rail { animation: none; } }

/* a long note wrapped onto more lines: the lines sit close together like one note */
.ost-board-notes > .ost-note.cont { margin-block-start: -0.45rem; }
/* never wider than the board (a single very long word, a wide formula) */
.ost-board-notes .ost-note-svg { max-inline-size: 100%; }
.ost-board-notes .ost-note-html { max-inline-size: 100%; }

/* small screens, stacked lesson: the board gets the larger share of the height and the picture fits the rest
   (before, the board row collapsed to 0 and the picture took all the space, so the board was hidden and erased itself) */
@media (max-width: 900px) {
  .ost-body.has-media { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.6rem; }
  .ost-body.has-media .ost-main { min-block-size: 0; }
  .ost-body.has-media .ost-media { min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; gap: 0.4rem; }
  .ost-body.has-media .ost-gal { flex: 1 1 auto; min-block-size: 0; gap: 0.35rem; }
  .ost-body.has-media .ost-gal-stage { aspect-ratio: auto; flex: 1 1 0; min-block-size: 110px; }
  .ost-body.has-media .ost-gal-cap { min-block-size: 0; gap: 0.1rem; }
  .ost-body.has-media .ost-gal-title { font-size: 0.95rem; }
  .ost-body.has-media .ost-gal-note { font-size: 0.78rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ost-body.has-media .ost-gal-credit { display: none; }
  .ost-body.has-media .ost-gal-strip { flex: none; }
  .ost-board { min-block-size: 150px; }
}
@media (max-width: 900px) {
  /* more height for the board: the question shrinks to one line, the syllabus file name is left out, the picture takes less */
  .ost-body.has-media { grid-template-rows: minmax(0, 1.9fr) minmax(0, 1fr); }
  .ost-sources { display: none !important; }
  .ost-question { padding: 0.4rem 0.75rem; font-size: 0.9rem; max-inline-size: 100%; }
  .ost-question > * { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .ost-question .ost-q-label, .ost-question small { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .ost-question { display: none; }
}
@media (max-width: 900px) {
  /* smaller handwriting on phones: more of the explanation fits on the board before it is erased */
  .ost-board { padding: 0.6rem 0.7rem 1rem; }
  .ost-board-notes { gap: 0.35rem 1.4rem; }
  .ost-note { min-block-size: 32px; padding: 2px 6px 4px; }
  .ost-note-svg { block-size: 28px; }
  .ost-note.kind-title .ost-note-svg { block-size: 32px; }
  .ost-note .ost-hand { font-size: 1.15rem; }
  .ost-note .ost-math { font-size: 0.95rem; }
  .ost-board-notes > .ost-note.cont { margin-block-start: -0.3rem; }
}

/* ---------- pictures pinned on the board under their headline (the side picture box is no longer used) ---------- */
.ost-media { display: none !important; }
.ost-note.kind-pic { padding: 10px 6px 6px; min-block-size: 0; background: none; box-shadow: none; }
.ost-board-notes:has(.ost-note.writing) .ost-note.kind-pic.written { opacity: 0.85; }
.ost-pin {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 7px 6px; border: 0; border-radius: 4px; cursor: zoom-in; font: inherit;
  background: #fffdf8; box-shadow: 0 10px 22px -12px rgba(15,30,54,0.55), 0 1px 3px rgba(15,30,54,0.18);
  transform: rotate(var(--tilt, -1deg)); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ost-pin:hover, .ost-pin:focus-visible { transform: rotate(0deg) scale(1.03); box-shadow: 0 16px 30px -14px rgba(15,30,54,0.6), 0 1px 3px rgba(15,30,54,0.2); }
.ost-pin:focus-visible { outline: 2px solid #c59b27; outline-offset: 3px; }
.ost-pin img { display: block; block-size: var(--pic-h, 200px); inline-size: auto; max-inline-size: min(100%, 440px); object-fit: contain; border-radius: 2px; }
.ost-pin-cap { max-inline-size: 100%; font-family: Caveat, "Aref Ruqaa", cursive; font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: #1b2a4a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ost-pin-cap:dir(rtl) { font-family: "Aref Ruqaa", Caveat, serif; font-size: 1.05rem; }
.ost-pin-tape { position: absolute; inset-block-start: -9px; inset-inline-start: 50%; inline-size: 62px; block-size: 18px; translate: -50% 0; rotate: -4deg;
  background: rgba(244, 226, 160, 0.82); box-shadow: 0 1px 2px rgba(15,30,54,0.15); border-radius: 2px; }
.ost-note.kind-pic.pinning .ost-pin { animation: ostPinIn 0.85s cubic-bezier(.2,.9,.25,1.15) both; }
.ost-note.kind-pic.pinning .ost-pin-tape { animation: ostTapeIn 0.35s ease 0.55s both; }
.ost-note.kind-pic.flash .ost-pin { animation: ostPinFlash 0.9s ease; }
@keyframes ostPinIn {
  0% { opacity: 0; transform: translateY(-34px) rotate(calc(var(--tilt, -1deg) * -6)) scale(0.82); filter: blur(4px); }
  60% { opacity: 1; transform: translateY(4px) rotate(calc(var(--tilt, -1deg) * 1.6)) scale(1.02); filter: none; }
  100% { opacity: 1; transform: rotate(var(--tilt, -1deg)); }
}
@keyframes ostTapeIn { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }
@keyframes ostPinFlash { 0%, 100% { box-shadow: 0 10px 22px -12px rgba(15,30,54,0.55); } 35% { box-shadow: 0 0 0 4px rgba(197,155,39,0.7), 0 14px 26px -12px rgba(15,30,54,0.6); transform: rotate(0deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .ost-note.kind-pic .ost-pin, .ost-note.kind-pic .ost-pin-tape { animation: none !important; } }
@media (max-width: 640px) { .ost-pin img { max-inline-size: min(100%, 280px); } }

/* the Headlines list: the picture under its headline */
.ost-hl-note.k-pic { display: flex; align-items: center; gap: 0.6rem; list-style: none; }
.ost-hl-note.k-pic img { inline-size: 64px; block-size: 48px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(15,30,54,0.2); flex: none; }

/* ---------- pointing inside a picture: it lifts off the board, grows in the middle, the place gets highlighted ---------- */
.ost-note.kind-pic.lifted .ost-pin { opacity: 0.25; transition: opacity 0.3s ease; }
.ost-focus { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  background: rgba(246, 248, 251, 0.72); backdrop-filter: blur(2px); animation: ostFocusIn 0.35s ease both; }
.ost-focus.leaving { animation: ostFocusOut 0.5s ease forwards; }
@keyframes ostFocusIn { from { background: rgba(246, 248, 251, 0); backdrop-filter: blur(0); } }
@keyframes ostFocusOut { to { background: rgba(246, 248, 251, 0); backdrop-filter: blur(0); } }
.ost-focus-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 8px; border-radius: 6px;
  background: #fffdf8; box-shadow: 0 24px 50px -20px rgba(15,30,54,0.6), 0 2px 6px rgba(15,30,54,0.2); transform-origin: center; }
.ost-focus-img { position: relative; }
.ost-focus-img img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; border-radius: 2px; }
.ost-focus-cap { font-family: Caveat, "Aref Ruqaa", cursive; font-weight: 700; font-size: 1.3rem; color: #1b2a4a; }
.ost-focus-cap:dir(rtl) { font-family: "Aref Ruqaa", Caveat, serif; font-size: 1.15rem; }
/* the highlighter: a yellow marker swipe over the place */
.ost-focus-mark { position: absolute; border-radius: 7px; background: rgba(255, 213, 0, 0.42); mix-blend-mode: multiply;
  box-shadow: 0 0 0 2px rgba(214, 160, 0, 0.55); clip-path: inset(0 100% 0 0); opacity: 0; }
.ost-focus-mark.rtl { clip-path: inset(0 0 0 100%); }
.ost-focus-mark.on { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 0.55s cubic-bezier(.45,.05,.4,1), opacity 0.15s ease; animation: ostMarkGlow 1.8s ease-in-out 0.6s infinite alternate; }
@keyframes ostMarkGlow { to { box-shadow: 0 0 0 3px rgba(214, 160, 0, 0.75), 0 0 18px 2px rgba(255, 213, 0, 0.45); } }
.ost-focus-tag { position: absolute; translate: -50% 8px; padding: 3px 12px 4px; border-radius: 999px; white-space: nowrap; max-inline-size: 90%;
  overflow: hidden; text-overflow: ellipsis; background: #1b2a4a; color: #fdf6dd; font: 700 0.9rem/1.3 "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 6px 14px -6px rgba(15,30,54,0.6); opacity: 0; transition: opacity 0.3s ease, translate 0.3s ease; }
.ost-focus-tag.above { translate: -50% -8px; }
.ost-focus-tag:dir(rtl) { font-family: "Noto Kufi Arabic", "Plus Jakarta Sans", sans-serif; }
.ost-focus-tag.on { opacity: 1; }
.ost-focus ~ .ost-pen, .ost-board .ost-pen { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .ost-focus, .ost-focus.leaving, .ost-focus-mark.on { animation: none; transition: none; } }

/* pointing on the pinned picture itself (no cover over the board) */
.ost-pin-frame { position: relative; display: block; line-height: 0; }
.ost-note.kind-pic.pointing { opacity: 1 !important; z-index: 1; }
.ost-note.kind-pic.pointing .ost-pin { transform: rotate(0deg); box-shadow: 0 0 0 3px rgba(197,155,39,0.75), 0 16px 30px -14px rgba(15,30,54,0.6); }
.ost-pin-frame .ost-focus-mark { border-radius: 4px; }
.ost-pin-frame .ost-focus-tag { font-size: 0.72rem; padding: 2px 8px 3px; translate: -50% 4px; z-index: 1; }
.ost-pin-frame .ost-focus-tag.above { translate: -50% -4px; }