@import url("./lesson/math.css");

.coming-soon { display:none; min-height:0; place-items:center; text-align:center; }
.coming-soon.is-visible { display:grid; }
.coming-soon-card { width:min(100%,680px); padding:32px 32px 36px; border:1px solid #e2e8ee; border-radius:28px; background:#fff; box-shadow:0 12px 40px rgba(35,55,75,.05); }
/* Single-message destinations occupy the viewport without creating a scroll area. */
body:has(>main.coming-mode>.coming-soon:not(.is-more)) { height:100dvh; padding-bottom:0; overflow:hidden; }
main.page.coming-mode:has(>.coming-soon:not(.is-more)) { height:100dvh; min-height:0; padding-block:24px; }
.coming-soon:not(.is-more) { height:100%; min-width:0; }
.coming-soon:not(.is-more) .coming-soon-card { display:flex; flex-direction:column; justify-content:center; height:min(100%,640px); min-width:0; min-height:0; padding:clamp(12px,3dvh,32px) 24px; }
.coming-soon:not(.is-more) [data-coming-soon-content]:not([hidden]) { display:flex; flex:1; min-width:0; min-height:0; }
.coming-soon:not(.is-more) .guest-feature-gate { min-width:0; padding:8px; gap:8px; }
.coming-soon .guest-feature-gate>span { width:48px; height:48px; }
.coming-soon .guest-feature-gate>span img { width:40px; height:40px; }
.coming-soon .guest-feature-gate h1 { margin:0; font-size:20px; line-height:1.4; }
.coming-soon .guest-feature-gate p { margin:0; font-size:13px; line-height:1.5; }
body:not(:is([data-account-type="free"],[data-account-type="subscribed"])) main.page.coming-mode:has(>.coming-soon:not(.is-more)) { padding-top:calc(var(--header-height) + 12px); }
@media (max-width:760px) {
  body:is([data-account-type="free"],[data-account-type="subscribed"]) main.page.coming-mode:has(>.coming-soon:not(.is-more)) { padding-top:calc(80px + env(safe-area-inset-top,0px)); padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)); }
}
.coming-soon.is-more { place-items:start center; }
.coming-soon.is-more .coming-soon-card { width:min(100%,1000px); padding:24px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.coming-soon-title { margin:8px 0; color:#273746; font:800 clamp(18px,3.8dvh,28px)/1.4 var(--font-ui); }
main.coming-mode,main.lesson-mode { grid-template-columns:1fr; }
main.coming-mode .column,main.lesson-mode .column { display:none; }
.lesson-view { display:none; min-width:0; }
.lesson-view.is-visible { display:block; }
.lesson-shell { width:min(100%,960px); margin:0 auto; }
.lesson-top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.lesson-shell:not(.lesson-shell--ui-lab) .lesson-top { width:min(100%,820px); margin-inline:auto; }
.lesson-back { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--system-blue-action); border-radius:14px; background:var(--system-blue-action); color:var(--system-action-ink); font-size:25px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 var(--quest-theme-shadow); }
.lesson-back:active { transform:translateY(2px); box-shadow:0 1px 0 var(--quest-theme-shadow); }
.lesson-back:focus-visible,.lesson-retry:focus-visible,.lesson-answer:focus-visible,.lesson-video-player>button:focus-visible,.lesson-video-iframe:focus-visible { outline:3px solid var(--quest-theme-focus); outline-offset:3px; }
.lesson-top-title { min-width:0; flex:1; overflow:hidden; color:#676767; font:700 18px var(--font-ui); text-overflow:ellipsis; white-space:nowrap; }
.lesson-status { padding:9px 13px; border-radius:12px; background:#e2e8f0; color:#3f4c5b; font:700 12px var(--font-ui); letter-spacing: 0; white-space:nowrap; box-shadow:inset 0 -3px 0 #cbd5e1; }
.lesson-shell>.lesson-card:not(.lesson-card--ui-lab) { width:min(100%,820px); margin-inline:auto; padding:clamp(8px,2vw,18px) 0 56px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.lesson-card:focus-visible { outline:3px solid var(--quest-theme-focus); outline-offset:3px; }
.ui-lab-open .topbar-wrap { display:none; }
.ui-lab-open { height:100dvh; overflow:hidden; }
.ui-lab-open main.page { width:100%; min-height:100vh; padding:0; }
body:is([data-account-type="free"],[data-account-type="subscribed"]).ui-lab-open main.page { width:100%; max-width:none; margin:0; padding:0; }
body.ready-lesson-open main.page.lesson-mode { width:100%; max-width:none; min-height:100dvh; margin:0; padding:0; }
.ui-lab-open .lesson-view { min-height:100vh; }
.lesson-shell--ui-lab { display:flex; flex-direction:column; width:100%; height:100dvh; min-height:0; overflow:hidden; }
.lesson-shell--ui-lab .lesson-top { position:sticky; top:0; z-index:3; flex:0 0 auto; min-height:80px; gap:20px; margin:0; padding:16px clamp(24px,7vw,100px) 10px; border:0; background:var(--system-white); direction:ltr; }
.lesson-shell--ui-lab .lesson-back { width:var(--control-height-compact); height:var(--control-height-compact); flex:0 0 var(--control-height-compact); border:0; background:transparent; color:var(--system-muted); box-shadow:none; font:400 34px/1 var(--font-ui); }
.lesson-shell--ui-lab .lesson-back:hover { background:transparent; color:#3d5367; transform:none!important; box-shadow:none!important; }
.lesson-shell--ui-lab .lesson-back:active { transform:none!important; box-shadow:none!important; }
@media (max-width:760px) { .lesson-shell--ui-lab .lesson-top { min-height:70px; gap:16px; padding:max(12px,env(safe-area-inset-top,0px)) 16px 10px; } }
.lesson-card--ui-lab { flex:1 1 auto; min-height:0; overflow:hidden; padding:0; border:0; border-radius:0; background:#fff; box-shadow:none; }
.level-layout-preview { height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; background:#fff; }
.lesson-shell--ui-lab .level-layout-preview { min-height:0; }
.level-layout-content { position:relative; min-height:0; overflow:hidden; background:#fff; }
.ui-lab-template-open .level-layout-task { height:100%; align-items:safe center; overflow-x:hidden; overflow-y:auto; scroll-behavior:smooth; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--quest-theme-main) transparent; }
.ui-lab-template-open .level-layout-task::-webkit-scrollbar { width:9px; }
.ui-lab-template-open .level-layout-task::-webkit-scrollbar-track { background:transparent; }
.ui-lab-template-open .level-layout-task::-webkit-scrollbar-thumb { border:3px solid #fff; border-radius:999px; background:var(--quest-theme-main); }
.level-progress { width:100%; height:8px; overflow:hidden; background:#e4ded5; }
.level-progress span { display:block; height:100%; margin-inline-end:auto; border-radius:99px 0 0 99px; background:var(--quest-theme-main); transition:width 180ms ease; }
[dir="ltr"] .level-progress span { margin-inline:0 auto; border-radius:0 99px 99px 0; }
.level-layout-task { width:100%; zoom:var(--lesson-content-zoom, 1); grid-template-columns:minmax(0,1fr); min-height:calc(100% - 8px); display:grid; place-items:center; padding:clamp(28px,5vw,64px); }
.level-lesson-copy { min-width:0; max-width:100%; width:min(100%,760px); margin-inline:auto; }
.level-layout-kicker { margin:0 0 10px; color:var(--system-muted); font:700 12px var(--font-ui); letter-spacing: 0; }
.level-layout-task h1 { margin:0 0 14px; color:#3f464d; font:700 clamp(30px,5vw,48px)/1.12 var(--font-ui); }
.level-lesson-copy>p:not(.level-layout-kicker):not(.level-feedback):not(.lesson-code-overflow-hint) { max-width:680px; margin:0; color:#68717a; font:600 18px/1.65 var(--font-ui); }
.level-answer-list { display:grid; gap:14px; margin-top:clamp(28px,5vw,42px); }
.ui-lab-mcq .level-answer-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ui-lab-mcq .level-answer-list button { min-height:76px; grid-template-columns:40px 1fr; gap:15px; padding:14px 18px; border-radius:17px; font-size:clamp(15px,1.5vw,18px); }
.ui-lab-mcq .level-answer-list button>span { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:11px; background:var(--quest-theme-soft-strong); color:var(--quest-theme-muted-text); font:700 13px var(--font-ui); }
.ui-lab-mcq .level-answer-list button>b { font:inherit; }
.level-answer-list button { min-height:68px; display:grid; grid-template-columns:90px 1fr; align-items:center; padding:0 20px; border:2px solid var(--quest-theme-line); border-radius:15px; background:var(--quest-theme-surface); color:var(--quest-theme-muted-text); text-align:start; box-shadow:0 3px 0 var(--quest-theme-line); cursor:pointer; transition:background 150ms,border-color 150ms,transform 120ms,box-shadow 120ms; }
[dir="rtl"] .level-answer-list button { text-align:right; }
[dir="ltr"] .level-answer-list button { text-align:left; }
.level-answer-list button:hover { border-color:var(--quest-theme-line-strong); background:var(--quest-theme-soft); }
.level-answer-list button.is-selected { border-color:var(--quest-theme-main); background:var(--quest-theme-soft-strong); box-shadow:0 1px 0 var(--quest-theme-main); transform:translateY(2px); }
.level-answer-list button.is-selected>span { background:var(--quest-theme-top); color:var(--quest-theme-text); }
.level-answer-list button.is-correct { border-color:#62bd3d; background:#e5f7dc; color:#315f26; }
.level-answer-list button.is-wrong { border-color:#ef8e9f; background:#fff0f3; color:#8a4e59; }
.level-answer-list code { color:var(--quest-theme-text); font:800 18px ui-monospace,monospace; }
.level-answer-list span { font:700 16px var(--font-ui); }
.level-feedback { min-height:24px; margin:20px 0 0; color:#68717a; font:700 15px/1.5 var(--font-ui); }
.level-feedback.is-correct { color:#39752f; }
.level-feedback.is-wrong { color:#944653; }
.ui-lab-pinata { position:fixed; z-index:20; inset:0; overflow:hidden; pointer-events:none; }
.ui-lab-pinata>strong { position:absolute; top:44%; left:50%; color:#ffd84d; font-size:58px; text-shadow:0 0 0 #fff,0 0 24px rgba(255,216,77,.8); transform:translate(-50%,-50%); animation:ui-lab-confetti-flash 560ms ease-out both; }
.ui-lab-pinata i { position:absolute; top:44%; left:50%; width:10px; height:16px; border-radius:2px; background:var(--color); opacity:0; animation:ui-lab-confetti-burst var(--duration) var(--delay) linear both; }
.ui-lab-pinata i:nth-of-type(3n) { width:12px; height:12px; border-radius:50%; }
@keyframes ui-lab-confetti-flash { 0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-30deg); } 45% { opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(8deg); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.7) rotate(22deg); } }
@keyframes ui-lab-confetti-burst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0); animation-timing-function:cubic-bezier(.16,.72,.3,1); }
  9% { opacity:1; }
  30% { opacity:1; transform:translate(var(--burst-x),var(--burst-y)) scale(1) rotate(var(--burst-spin)); animation-timing-function:cubic-bezier(.28,.2,.55,1); }
  78% { opacity:.92; }
  100% { opacity:0; transform:translate(var(--fall-x),var(--fall-y)) scale(.82) rotate(var(--spin)); }
}