/* Styles for levels: the "Find my starting point" check, pictures and short texts in questions, and lessons grouped around a level. */
.lx-pic { font-size: calc(46px * var(--k)); line-height: 1.3; text-align: center; white-space: pre-line; letter-spacing: .06em; margin: 10px 0 0; overflow-wrap: anywhere; }
.lx-pic svg.lx-clock { display: block; margin: 0 auto; max-width: calc(46 * var(--vw)); height: auto; }
.lx-pic.many { font-size: calc(32px * var(--k)); }
.lx-passage { font-size: calc(20px * var(--k)); line-height: 1.75; background: var(--panel2); border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 12px auto 0; max-width: 720px; text-align: left; }
body[data-band="tween"] .lx-passage, body[data-band="teen"] .lx-passage, body[data-band="senior"] .lx-passage { font-size: calc(17px * var(--k)); line-height: 1.65; }
.lx-passage + .kquestion { font-size: calc(21px * var(--k)); padding-top: 12px; }
.kanswers.lx-long { grid-template-columns: minmax(0, 1fr); } .kanswers.lx-long .kanswer { font-size: calc(17px * var(--k)); }
.kanswers.lx-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kanswer { overflow-wrap: break-word; } .kanswer.right { text-align: center; }
/* the check: one question, big buttons */
.lx-check .kanswers.lx-big .kanswer { min-height: calc(78px * var(--k)); font-size: calc(26px * var(--k)); border-radius: 22px; }
.lx-check .kanswers.lx-big.lx-long .kanswer { min-height: calc(60px * var(--k)); font-size: calc(18px * var(--k)); }
.lx-check .kquestion { font-size: calc(30px * var(--k)); }
.lx-check .lx-passage + .kquestion { font-size: calc(22px * var(--k)); }
.lx-saybar { display: flex; justify-content: center; margin: 12px 0 0; min-height: 48px; }
.kbtn.lx-say { --c: #f5a800; color: #2a1a00; min-height: calc(48px * var(--k)); font-size: calc(17px * var(--k)); }
.lx-under { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .lx-under[hidden] { display: none; }
.lx-under .kbtn { min-height: 48px; }
.lx-foot { margin-top: 12px; min-height: 60px; gap: 10px; }
.kanswer.lx-picked { border-style: dashed; opacity: .8; }
.lx-offer h2 { margin-top: 12px; }
.lx-suggest { margin: 14px auto 0; max-width: 520px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--ok) 12%, var(--panel)); border: 2px solid color-mix(in srgb, var(--ok) 50%, transparent); } .lx-suggest p { margin: 0 0 10px; }
/* lessons around a level */
.lx-pill { display: inline-block; font-size: calc(13px * var(--k)); font-weight: 700; padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 30%, var(--panel)); border: 2px solid color-mix(in srgb, var(--gold) 65%, transparent); color: var(--text); vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.lx-group { margin-bottom: calc(16px * var(--k)); }
.lx-group h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); margin: 0 0 10px; } .lx-group h3 small { font-weight: 500; font-size: calc(13px * var(--k)); }
.lx-group.right { background: color-mix(in srgb, var(--gold) 9%, transparent); border: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 22px; padding: calc(12px * var(--k)); }
.lx-allrow { margin: 4px 0 12px; }
@media (max-width: 699px) { .kanswers.lx-three.lx-wordy { grid-template-columns: minmax(0, 1fr); } .lx-pic { font-size: calc(36px * var(--k)); } .lx-pic.many { font-size: calc(25px * var(--k)); } .lx-check .kquestion { font-size: calc(23px * var(--k)); } .lx-check .kanswers.lx-big .kanswer { min-height: calc(66px * var(--k)); font-size: calc(22px * var(--k)); } .lx-passage { font-size: calc(17px * var(--k)); padding: 10px 12px; } }
@media (max-width: 380px) { .lx-pic.many { font-size: calc(21px * var(--k)); letter-spacing: 0; } }

.lx-check .kquestion:focus { outline: none; }