/* ---------- online classes (live.js): the class under the hello on Hôm nay, the class screen ---------- */

.lv-card { box-sizing: border-box; color: var(--ink, #1B201C); }
.lv-card p { margin: 0; }
.lv-say { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lv-btn { flex: none; min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px; font: 700 14.5px/1 var(--font, inherit); cursor: pointer; white-space: nowrap;
  background: var(--acc-soft, #E2F3E8); color: var(--acc-ink, #0E7A43); -webkit-tap-highlight-color: transparent; transition: transform var(--t-press, 90ms) ease; }
.lv-btn:active { transform: translateY(1px); }
.lv-btn:focus-visible { outline: 3px solid var(--acc, #1FA463); outline-offset: 2px; }
.lv-btn.go { background: var(--acc-btn, #14884F); color: #fff; }
.lv-btn.keep.on { background: var(--fill, #EFECE4); color: var(--ink2, #4F5751); }
/* the tick of a kept seat */
.lv-tick { width: 13px; height: 13px; margin: 0 5px 0 -3px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the portrait: a photo, or the first letter on a soft tint */
.lv-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  font: 700 18px/1 var(--font, inherit); background: var(--av-bg); color: var(--av-ink); }
.lv-av img { width: 100%; height: 100%; object-fit: cover; }
.lv-av.t0 { --av-bg: #FBE4D6; --av-ink: #96401A; }
.lv-av.t1 { --av-bg: #DCEFE3; --av-ink: #1E6A3E; }
.lv-av.t2 { --av-bg: #E3E6F8; --av-ink: #3A4494; }
.lv-av.t3 { --av-bg: #F5E1EC; --av-ink: #8A2C61; }
html[data-theme="dark"] .lv-av.t0 { --av-bg: #43291D; --av-ink: #F6BE9E; }
html[data-theme="dark"] .lv-av.t1 { --av-bg: #1D3A29; --av-ink: #9BDDB6; }
html[data-theme="dark"] .lv-av.t2 { --av-bg: #272C4C; --av-ink: #B7BFF2; }
html[data-theme="dark"] .lv-av.t3 { --av-bg: #42233A; --av-ink: #F0B2D4; }

/* ---------- the card: light like the others on the page, the teacher's portrait, a line said like a friend ---------- */
.lv-a.lv-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who btn" "av say say"; align-items: center; gap: 2px 12px;
  margin: 0 0 14px; padding: 12px 12px 13px 13px; border-radius: 20px; background: var(--card, #fff); box-shadow: var(--sh-card, 0 6px 20px -14px rgba(0, 0, 0, .3)); }
/* the frame the rings and the red dot hang on */
.lv-face { position: relative; display: grid; grid-area: av; align-self: start; margin-top: 2px; }
.lv-face .lv-av { position: relative; z-index: 1; }
.lv-a.is-on .lv-av { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--red, #DE4636); }
.lv-face .lv-dot { position: absolute; z-index: 2; right: -3px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--red, #DE4636);
  box-shadow: 0 0 0 2.5px var(--card, #fff); }
.lv-a.lv-card .lv-who { grid-area: who; font-size: 14px; line-height: 1.3; color: var(--ink2, #4F5751); }
.lv-a.lv-card .lv-who b { font-weight: 700; color: var(--ink, #1B201C); }
.lv-a.lv-card .lv-who em { font-style: normal; font-weight: 700; color: var(--red-ink, #B8321F); }
.lv-a.lv-card .lv-btn { grid-area: btn; }
.lv-a.lv-card .lv-say { grid-area: say; font-size: 16px; line-height: 1.35; font-weight: 600; }
/* a small sound wave after "đang dạy", bars of different heights when still */
.lv-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; margin-left: 7px; vertical-align: -1px; }
.lv-wave i { width: 3px; height: 12px; border-radius: 2px; background: var(--red, #DE4636); transform: scaleY(var(--s, .6)); }
.lv-wave i:nth-child(1) { --s: .45; }
.lv-wave i:nth-child(2) { --s: .95; }
.lv-wave i:nth-child(3) { --s: .6; }
.lv-wave i:nth-child(4) { --s: .8; }
.lv-num { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- the class screen ---------- */
.lv-room { min-height: 100vh; padding: 0 0 calc(48px + env(safe-area-inset-bottom)); }
.lv-video { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; }
.lv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-info, .lv-h, .lv-tt { max-width: 880px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.lv-info { padding: 16px 16px 0; }
.lv-info h1 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--ink, #1B201C); }
.lv-info p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2, #4F5751); }
.lv-h { margin-top: 28px; margin-bottom: 0; padding: 0 16px 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #1B201C); }
.lv-tt { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0 16px; }
.lv-li { display: grid; align-items: center; gap: 12px; }
.lv-what { min-width: 0; font-size: 15px; line-height: 1.35; color: var(--ink, #1B201C); }
.lv-li .lv-btn { min-height: 34px; padding: 0 13px; font-size: 14px; }

/* the teacher under the title, the classes after as small cards */
.lv-a .lv-by { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lv-a .lv-by.is-on .lv-av { box-shadow: 0 0 0 2px var(--bg, #F4F1E9), 0 0 0 4px var(--red, #DE4636); }
.lv-a .lv-by b { font-weight: 700; color: var(--ink, #1B201C); }
.lv-by .lv-dot { display: inline-block; width: 8px; height: 8px; margin: 0 7px 2px 1px; border-radius: 50%; vertical-align: middle; background: var(--red, #DE4636); }
.lv-a .lv-tt { display: grid; gap: 10px; }
.lv-a .lv-li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; border-radius: 18px; background: var(--card, #fff); box-shadow: var(--sh-card, none); }
.lv-a .lv-li .lv-av { width: 38px; height: 38px; font-size: 16px; }
.lv-a .lv-what { font-weight: 600; }
.lv-a .lv-what small { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--ink2, #4F5751); }
.lv-a .lv-what small b { font-weight: 700; color: var(--ink, #1B201C); }

/* a question or its answer up: the class's line is one thin row under the panel, the classes after it gone */
.lv-mini { display: none; max-width: 880px; margin: 0 auto; padding: 10px 18px 0; box-sizing: border-box; font-size: 13.5px; line-height: 1.4; color: var(--ink2, #4F5751);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-mini b { font-weight: 700; color: var(--ink, #1B201C); }
.lv-mini .lv-dot { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; vertical-align: middle; background: var(--red, #DE4636); }
.lv-room.is-quiz .lv-mini { display: block; }
.lv-room.is-quiz :is(.lv-info, .lv-h, .lv-tt) { display: none; }

@media (min-width: 760px) {
  .lv-room .lv-video { margin-top: 12px; border-radius: 16px; overflow: hidden; }
  .lv-mini { padding: 12px 8px 0; }
  .lv-info { padding: 20px 4px 0; }
  .lv-info h1 { font-size: 26px; }
  .lv-h, .lv-tt { padding-left: 4px; padding-right: 4px; }
  .lv-room { padding-left: 24px; padding-right: 24px; }
  .lv-room .bar { margin: 0 -24px; }
}

/* ---------- the motion: transform and opacity only, every still frame complete, none at all for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hôm nay opens: the card rises in under the hello, the portrait gives one soft clay hop */
  .lv-card.lv-enter { animation: lv-rise .55s cubic-bezier(.22, .9, .3, 1); }
  .lv-enter .lv-face { animation: lv-hop .62s .3s cubic-bezier(.3, .7, .4, 1); }

  /* on now: rings go out from the portrait like a live stream, the red dot breathes, the wave talks */
  .lv-a.is-on .lv-face::before, .lv-a.is-on .lv-face::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red, #DE4636);
    opacity: 0; pointer-events: none; animation: lv-ring 3s cubic-bezier(.2, .6, .35, 1) infinite; }
  .lv-a.is-on .lv-face::after { animation-delay: 1.5s; }
  .lv-dot { animation: lv-breathe 2.4s ease-in-out infinite; }
  .lv-wave i { animation: lv-talk .9s ease-in-out infinite alternate; }
  .lv-wave i:nth-child(1) { animation-duration: .8s; animation-delay: -.3s; }
  .lv-wave i:nth-child(2) { animation-duration: 1.05s; animation-delay: -.7s; }
  .lv-wave i:nth-child(3) { animation-duration: .7s; animation-delay: -.1s; }
  .lv-wave i:nth-child(4) { animation-duration: .95s; animation-delay: -.5s; }
  /* a slow shine over Vào nghe now and then, waiting a while between */
  .lv-btn.go { position: relative; overflow: hidden; isolation: isolate; }
  .lv-btn.go::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
    background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .34) 50%, transparent 85%); transform: translateX(-120%);
    animation: lv-shine 6.5s 1.6s ease-in-out infinite; }

  /* coming up: the minutes turn over; a tap on Giữ chỗ (the button springs like every button, feel.js) pops its tick
     in and draws it */
  .lv-num.is-new { animation: lv-roll .5s cubic-bezier(.2, .8, .2, 1); }
  .lv-btn.lv-pop .lv-tick { animation: lv-pop .45s cubic-bezier(.3, .7, .4, 1); }
  .lv-btn.lv-pop .lv-tick path { stroke-dasharray: 14; animation: lv-draw .38s .06s ease-out backwards; }

  /* the class screen: the stream comes up, the classes after it one by one */
  .lv-room .lv-video { animation: lv-show .6s cubic-bezier(.22, .9, .3, 1); }
  .lv-room .lv-info { animation: lv-rise .5s .08s cubic-bezier(.22, .9, .3, 1) backwards; }
  .lv-room .lv-h { animation: lv-rise .45s .2s cubic-bezier(.22, .9, .3, 1) backwards; }
  .lv-room .lv-li { animation: lv-rise .45s cubic-bezier(.22, .9, .3, 1) backwards; animation-delay: calc(.26s + var(--i, 0) * 80ms); }
  /* the thin row fades in; the class's line and the classes after come back the way they came in (display brings the
     animations above back) */
  .lv-room.is-quiz .lv-mini { animation: lv-fade .35s ease-out; }
}
@keyframes lv-fade { from { opacity: 0; } }
@keyframes lv-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lv-show { from { opacity: 0; transform: scale(.965); } }
@keyframes lv-hop {
  30% { transform: translateY(-4px) scale(1.06, .95); }
  55% { transform: translateY(0) scale(.96, 1.04); }
  78% { transform: scale(1.02, .98); }
}
@keyframes lv-ring {
  0% { opacity: .7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes lv-breathe { 50% { opacity: .65; transform: scale(.74); } }
@keyframes lv-talk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes lv-shine { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(260%); } }
@keyframes lv-roll { from { opacity: 0; transform: translateY(.6em); } }
@keyframes lv-pop { from { transform: scale(.3); } 60% { transform: scale(1.25); } 82% { transform: scale(.94); } }
@keyframes lv-draw { from { stroke-dashoffset: 14; } }

/* ---------- the stream's shields: clear boxes over the parts of YouTube's player that open YouTube ---------- */
/* top left: the title and the channel (the sound, captions and settings at the top right stay free); the row under the
   seek bar: "Xem trên YouTube", the logo, copy link. Measured on the 2025 player at 375 and 880 wide: the seek bar sits
   about 10 px above the bottom shield at both. */
.lv-shield { position: absolute; z-index: 2; display: block; background: transparent; -webkit-tap-highlight-color: transparent; }
.lv-shield.top { top: 0; left: 0; right: clamp(136px, 19%, 172px); height: clamp(52px, 14%, 72px); }
.lv-shield.bot { left: 0; right: 0; bottom: 0; height: calc(32px + 6.3%); }
.lv-full { position: absolute; z-index: 3; right: 8px; bottom: 6px; display: grid; place-items: center; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  background: rgba(0, 0, 0, .42); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv-full svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lv-full:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.lv-video:fullscreen { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* the iPhone: the box fills the window */
.lv-video.is-full { position: fixed; inset: 0; z-index: 90; max-width: none; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; }

/* ---------- the quiz under the stream ---------- */
.lv-qz { --qz-r: #E5484D; --qz-b: #2F6FE4; --qz-y: #F0B020; --qz-g: #22975A; position: relative; max-width: 880px; margin: 0 auto; padding: 12px 12px 0; box-sizing: border-box; color: var(--ink, #1B201C); }
html[data-theme="dark"] .lv-qz { --qz-r: #D9434A; --qz-b: #3A73DD; --qz-y: #E3A51C; --qz-g: #23915A; }
.lv-qz[hidden] { display: none; }
.lq-in { padding: 14px 14px 16px; border-radius: 22px; background: var(--card, #fff); box-shadow: var(--sh-card, 0 6px 20px -14px rgba(0, 0, 0, .3)); }
.lq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lq-n { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink2, #4F5751); }
.lq-sec { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--fill, #EFECE4); font: 800 17px/1 var(--font, inherit); font-variant-numeric: tabular-nums; }
.lv-qz.is-late .lq-sec { background: var(--red-soft, #FCE9E4); color: var(--red-ink, #B8321F); }
.lq-bar { height: 6px; margin: 10px 0 12px; border-radius: 6px; background: var(--fill, #EFECE4); overflow: hidden; }
.lq-bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc, #1FA463); transform-origin: left; transition: transform .1s linear; }
.lv-qz.is-late .lq-bar i { background: var(--red, #DE4636); }
.lq-lb { margin: 0 0 2px; font-size: 13.5px; color: var(--ink2, #4F5751); }
/* the text a reading question asks about: a sheet of paper over the question, scrolled inside when long */
.lq-doc { margin: 4px 0 10px; max-height: 132px; padding: 9px 12px; border: 1px solid var(--line, #E7E2D6); border-radius: 14px; background: var(--bg, #F4F1E9);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; }
.lq-doc p { margin: 0; }
.lq-doc.is-long:not(.is-end) { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.lq-doc:focus-visible { outline: 3px solid var(--acc, #1FA463); outline-offset: 1px; }
.lq-ask { margin: 0 0 14px; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; white-space: pre-line; overflow-wrap: anywhere; }
.lq-ask.sm { margin: 10px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink2, #4F5751); }
.lq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lq-o { position: relative; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px 12px; border: 0; border-radius: 16px; box-sizing: border-box; text-align: left;
  font: 700 16px/1.3 var(--font, inherit); color: #fff; background: var(--qz); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16); cursor: pointer;
  -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; transition: transform var(--t-press, 90ms) ease, opacity .25s ease; }
.lq-o span { min-width: 0; }
.lq-o.c0 { --qz: var(--qz-r); }
.lq-o.c1 { --qz: var(--qz-b); }
.lq-o.c2 { --qz: var(--qz-y); color: #2A2100; }
.lq-o.c3 { --qz: var(--qz-g); }
.lq-sh { flex: none; width: 22px; height: 22px; fill: currentColor; opacity: .92; }
.lq-o:active { transform: translateY(2px); }
.lq-o:focus-visible { outline: 3px solid var(--ink, #1B201C); outline-offset: 2px; }
.lv-qz.is-locked .lq-o { cursor: default; }
.lv-qz.is-locked .lq-o:not(.on) { opacity: .32; }
.lq-o.on { box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 6px var(--qz); }
.lq-o:disabled { color: #fff; }
.lq-o.c2:disabled { color: #2A2100; }
.lq-note { min-height: 20px; margin: 12px 0 0; font-size: 15px; font-weight: 600; text-align: center; color: var(--ink2, #4F5751); }
.lq-note:empty { display: none; }
/* the line is down: a small note at the bottom of the panel */
.lq-off { display: none; margin: 8px 0 0; font-size: 13px; text-align: center; color: var(--ink2, #4F5751); }
.lv-qz.is-off .lq-off { display: block; }

/* the answer: mine right or wrong, the right one lit, the others small and faded */
.lq-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 12px; }
.lq-head small { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--ink2, #4F5751); }
.lq-head b { min-width: 0; font-size: 20px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.lq-head.ok b { color: var(--acc-ink, #0E7A43); }
.lq-head.bad b { color: var(--red-ink, #B8321F); font-size: 18px; }
.lq-pts { padding-top: 3px; font: 800 20px/1 var(--font, inherit); font-variant-numeric: tabular-nums; color: var(--ink, #1B201C); }
.lq-opts.is-res { gap: 8px; }
.lq-opts.is-res .lq-o { min-height: 46px; padding: 8px 10px; font-size: 14px; cursor: default; box-shadow: none; }
.lq-opts.is-res .lq-sh { width: 16px; height: 16px; }
.lq-o.dim { opacity: .3; }
.lq-o.right { box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 6px var(--acc, #1FA463); }
.lq-opts.is-res .lq-o.right .lq-sh { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lq-o.mine.dim { opacity: .6; text-decoration: line-through; text-decoration-thickness: 2px; }
/* my pick: a small "Bạn" tag on its corner */
.lq-o.mine::after { content: 'Bạn'; position: absolute; top: -9px; right: 8px; padding: 1px 7px; border-radius: 999px; font: 800 11px/1.5 var(--font, inherit);
  text-decoration: none; background: var(--ink, #1B201C); color: var(--card, #fff); box-shadow: 0 0 0 2px var(--card, #fff); }

/* the board: the top 5, mine lit; my place under it when I am further down */
.lq-h { margin: 16px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink2, #4F5751); }
.lq-h.big { margin: 2px 0 10px; font-size: 20px; letter-spacing: -.01em; color: var(--ink, #1B201C); }
.lq-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lq-board li, .lq-pod li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px 0 6px; border-radius: 12px; font-size: 15px; }
.lq-board i, .lq-pod i { font-style: normal; font-weight: 800; text-align: center; color: var(--ink2, #4F5751); font-variant-numeric: tabular-nums; }
.lq-board span, .lq-pod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lq-board b, .lq-pod b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lq-board li.me, .lq-pod li.me { background: var(--acc-soft, #E2F3E8); color: var(--acc-ink, #0E7A43); }
.lq-board li.me i { color: inherit; }
.lq-mine { margin-top: 4px; padding-top: 4px; border-top: 2px dotted var(--line, #E7E2D6); }

/* the end: the top 3 and their grains */
.lq-pod { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lq-pod li { grid-template-columns: 34px minmax(0, 1fr) auto auto; min-height: 48px; background: var(--fill, #EFECE4); }
.lq-pod li i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.lq-pod li.p1 i { background: #E2A21B; }
.lq-pod li.p2 i { background: #8E9AA6; }
.lq-pod li.p3 i { background: #C07A45; }
.lq-pod em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--honey-ink, #8A5A00); }
.lq-win { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 17px; color: var(--honey-ink, #8A5A00); }
.lq-rank { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink2, #4F5751); }

/* a phone with a reading question: everything around the text gets tighter, and the text takes what the screen has left
   (at 375 x 667 the stream, the text, the question and the 4 choices all fit) */
@media (max-width: 759px) {
  .lv-qz.has-doc { padding-top: 8px; }
  .lv-qz.has-doc .lq-in { padding: 10px 12px 12px; }
  .lv-qz.has-doc .lq-sec { min-width: 30px; height: 30px; font-size: 15px; }
  .lv-qz.has-doc .lq-bar { margin: 8px 0; }
  .lv-qz.has-doc .lq-doc { max-height: clamp(84px, calc(100svh - 535px), 220px); }
  .lv-qz.has-doc .lq-ask { margin-bottom: 10px; font-size: 18px; }
  .lv-qz.has-doc .lq-opts { gap: 8px; }
  .lv-qz.has-doc .lq-o { min-height: 54px; padding: 8px 10px; font-size: 15px; }
}
@media (min-width: 760px) {
  .lv-qz { padding: 14px 4px 0; }
  .lq-doc { max-height: 220px; }
  .lq-in { padding: 18px 20px 20px; }
  .lq-ask { font-size: 24px; }
  .lq-o { min-height: 84px; font-size: 17px; }
}

/* the quiz moves: the panel slides up under the stream, the choices pop in one by one, the right one gives a little
   jump, the rows of the board come in one by one; the seconds bump in the last 3. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .lv-qz.lq-pop .lq-in { animation: lq-up .48s cubic-bezier(.22, 1, .36, 1); }
  .lv-qz.is-ask.lq-pop .lq-o { animation: lq-in .4s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(.12s + var(--i, 0) * 60ms); }
  .lv-qz.is-late .lq-sec { animation: lq-bump .5s cubic-bezier(.3, 1.4, .5, 1); }
  .lq-o.on { animation: lq-press .3s cubic-bezier(.3, 1.4, .5, 1); }
  .lv-qz.lq-pop .lq-o.right { animation: lq-jump .55s .25s cubic-bezier(.3, 1.4, .5, 1) backwards; }
  .lv-qz.lq-pop .lq-head { animation: lq-in .4s .1s cubic-bezier(.3, 1.3, .5, 1) backwards; }
  .lv-qz.lq-pop :is(.lq-board, .lq-pod) li { animation: lq-row .4s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.35s + var(--i, 0) * 70ms); }
  .lv-qz.lq-pop .lq-win { animation: lq-in .5s .6s cubic-bezier(.3, 1.4, .5, 1) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .lq-bar i, .lq-o { transition: none; }
}
@keyframes lq-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes lq-in { from { opacity: 0; transform: scale(.86); } }
@keyframes lq-bump { 40% { transform: scale(1.18); } }
@keyframes lq-press { 50% { transform: scale(.95); } }
@keyframes lq-jump { 40% { transform: translateY(-5px) scale(1.04); } 70% { transform: translateY(1px); } }
@keyframes lq-row { from { opacity: 0; transform: translateX(-12px); } }