@font-face { font-family:'Noto Lesson Devanagari'; src:url('fonts/noto-sans-devanagari.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Noto Lesson Kannada'; src:url('fonts/noto-sans-kannada.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
html:root {
 --page:#edf3fc; --board:#fff; --panel:#f5f8ff; --edge:#d5e1f4;
 --chalk:#142c50; --dim:#536d90; --faint:#8b9db7; --task:#2463eb; --quiz:#2463eb;
 --good:#147d58; --bad:#bc3e4c; --math-font:'ui-monospace, monospace';
 --ui:'Segoe UI','Noto Lesson Devanagari','Noto Lesson Kannada',Arial,sans-serif;
 --progress-key:'animebook:progress:python-lists-tuples-v1'; color-scheme:light;
}
html body { background:radial-gradient(ellipse at 18% 18%,#e0ebff,transparent 60%),#f2f6fc; }
html #frame { background:#fff; box-shadow:0 1px 0 #fff,0 0 0 1px #d6e1f1,0 24px 90px #45618e21; border-radius:24px; }
html #stage { background:radial-gradient(ellipse at 100% 0,#edf4ff,transparent 60%),#fff; }
html #bar { background:#f7faff; border-color:#d8e4f4; }
html .icon { background:#fff; border-color:#d2dded; }
html .icon:hover { background:#eaf1ff; }
html .seg { background:#d5e1f5; height:9px; }
html .seg i,html .seg.ask i { background:#2463eb; }
html .seg.ask { background:#cae8eb; }
html .step { width:260px; color:#526d90; font-size:18px; }
html .cover { background:linear-gradient(135deg,#ffffffed,#f0f6ffed); }
html .cover-t { font-family:var(--ui); font-weight:700; letter-spacing:-2px; line-height:1.3; }
html .cover .go { color:#fff; background:#2463eb; box-shadow:0 10px 25px #2463eb20; }
html .cover small { max-width:1060px; line-height:1.8; }
html .cover-k { color:#2463eb; }
html .paused-mark { align-items:start; justify-items:end; padding:26px; }
html .paused-mark div { background:#eff5ffff; border:1px solid #d5e3f7; color:#526d90; font-size:18px; max-width:620px; }
html .caption { background:#f3f7fffa; color:#193758; border:1px solid #d1dff4; max-width:1320px; font-size:25px; bottom:74px; box-shadow:0 3px 16px #254d8b0c; }
html .help { background:#e7eef9e6; }
html .help-box { background:#fff; box-shadow:0 20px 80px #17325c20; }
html .help dl { font-size:21px; }
html .sound-note { background:#fff0dd; border:1px solid #efce9f; color:#735125; }
html .btn { background:#2463eb; color:#fff; }
html .btn.go { background:#2463eb; color:#fff; }
html .btn.quiet { background:#fff; color:#42618a; }
html .card { background:#fffffffa; box-shadow:0 10px 40px #274f8612; border-color:#d5e1f4; }
html .volume input { accent-color:#2463eb; }
html .language-control select,html #languageSelect { background:#fff; color:#193758; border:1px solid #d2dded; border-radius:9px; font-family:var(--ui); }
html .lesson-language { font-family:var(--ui); color:#16345b; background:#fff; border-color:#cbdcf4; }
.pt-quiz { position:absolute; left:90px; top:302px; width:1420px; max-height:570px; padding:30px 36px; background:#fffffffb; border:1px solid #d5e1f4; border-left:6px solid #2463eb; border-radius:22px; box-shadow:0 15px 40px #254d8b0b; overflow:auto; }
.pt-quiz.pt-full { top:64px; max-height:810px; padding:36px 42px; }
.pt-q-top { display:flex; justify-content:space-between; align-items:center; gap:22px; color:#2463eb; font-size:20px; font-weight:600; margin-bottom:18px; }
.pt-q-title { margin:0 0 20px; color:#142c50; font:600 32px/1.55 var(--ui); }
.pt-q-body { display:grid; grid-template-columns:1fr; gap:25px; }
.pt-q-body.has-code { grid-template-columns:0.9fr 1.1fr; align-items:start; }
.pt-q-code { margin:0; padding:22px 26px; background:#f0f5ff; border:1px solid #d6e3f8; border-radius:14px; color:#1a3f78; white-space:pre; font:28px/1.65 ui-monospace,'Courier New',monospace; }
.pt-opts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pt-opts.pt-sequence-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pt-sequence-options .pt-option { justify-content:center; }
.pt-sequence-options .pt-option b { display:none; }
.pt-option { border:2px solid #d8e3f4; border-radius:14px; background:#fff; padding:16px 18px; text-align:left; display:flex; align-items:center; gap:14px; min-height:76px; font:500 28px/1.45 var(--ui); color:#16345b; }
.pt-option code { font:27px/1.45 ui-monospace,'Courier New',monospace; }
.pt-option b { font-size:19px; border:1px solid #d6e2f4; color:#6a80a0; border-radius:8px; width:31px; height:32px; display:grid; place-items:center; flex:none; }
.pt-option:hover { border-color:#7fa7f4; background:#f8fbff; }
.pt-option[aria-pressed=true] { border-color:#2463eb; background:#eff5ff; }
.pt-option.is-right { border-color:#16835b; background:#effaf5; }
.pt-option.is-wrong { border-color:#c34755; background:#fff5f6; }
.pt-option:disabled { cursor:default; opacity:1; }
.pt-feedback { margin:20px 0 0; min-height:0; padding:15px 20px; border-radius:12px; background:#f1f6ff; color:#24446d; font-size:26px; line-height:1.6; }
.pt-feedback:empty { display:none; }
.pt-feedback.good { background:#eff9f3; color:#126948; }
.pt-feedback.bad { background:#fff3f1; color:#9b3542; }
.pt-q-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; margin-top:22px; }
.pt-q-actions .btn { border-radius:12px; font-size:25px; padding:12px 25px; }
.pt-q-hint { font-size:18px; color:#69809f; margin:17px 0 0; }
.pt-finish { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:50px 110px; text-align:center; background:radial-gradient(ellipse at 70% 20%,#edf5ff,transparent 60%),#fff; }
.pt-finish .mascot { width:180px; height:126px; }
.pt-finish h1 { margin:0; font:700 51px/1.4 var(--ui); }
.pt-finish p { margin:0; max-width:1150px; font:27px/1.55 var(--ui); color:#56708f; }
.pt-score { display:flex; align-items:center; gap:30px; background:#edf4ff; border:1px solid #cfddf5; padding:22px 38px; border-radius:22px; }
.pt-score strong { font:700 60px/1.2 var(--ui); color:#2463eb; }
.pt-score span { font-size:26px; text-align:left; }
.pt-finish nav { display:flex; gap:18px; }
.pt-finish .btn { text-decoration:none; font-size:25px; }
.pt-source-links { font-size:18px; color:#6782a6; }
.pt-source-links a { color:#456d9c; text-decoration-thickness:1px; text-underline-offset:4px; }
@media (max-width:700px) {
 html #bar { gap:5px; padding:7px; }
 html #bRestart { display:none; }
 html #bar .icon { width:33px; }
 html .language-control select,html #languageSelect,html .lesson-language { font-size:13px; min-width:75px; max-width:86px; height:38px; }
 html .segs { flex-basis:100%; height:20px; }
}
@media (prefers-reduced-motion:reduce) { .pt-option,.pt-quiz { transition:none; animation:none; } }
#ptMobileRead { display:none; }
@media (max-width:700px) and (orientation:portrait) {
 html #frame { top:12px; transform:translate(-50%,0) scale(var(--k,.23)); transform-origin:50% 0; }
 html #bar { box-shadow:0 8px 20px #3b629313; border-radius:0 0 12px 12px; }
 html #caption { display:none!important; }
 #ptMobileRead { display:block; position:fixed; top:calc(900px * var(--k) + 128px); left:12px; right:12px; bottom:12px; overflow:auto; border:1px solid #d5e2f4; border-radius:15px; background:#fff; box-shadow:0 5px 25px #294b8010; font:16px/1.65 var(--ui); }
 #ptMobileRead[hidden] { display:none; }
 #ptMobileMeta { padding:20px; }
 #ptMobileMeta[hidden] { display:none; }
 #ptMobileMeta h2 { font:700 20px/1.5 var(--ui); margin:0 0 9px; color:#193c6b; }
 #ptMobileMeta p { font:16px/1.7 var(--ui); margin:12px 0 0; }
 .pt-mobile-sub { color:#577394; }
 .pt-mobile-code { padding:13px; margin:15px 0; white-space:pre; overflow:auto; font:14px/1.7 ui-monospace,monospace; color:#204b86; background:#f2f6ff; border-radius:10px; border:1px solid #dce6f7; }
 .pt-mobile-caption { border-left:3px solid #2463eb; padding:8px 12px; background:#f2f7ff; color:#264e82; }
 .pt-mobile-note { color:#67809e; font-size:14px!important; }
 #ptMobileRead .pt-quiz { position:static; width:100%; max-height:none; border:0; border-left:4px solid #2463eb; padding:18px; border-radius:14px; box-shadow:none; overflow:visible; }
 #ptMobileRead .pt-q-top { font-size:13px; margin-bottom:14px; }
 #ptMobileRead .pt-q-title { font:650 18px/1.6 var(--ui); margin-bottom:16px; }
 #ptMobileRead .pt-q-body.has-code { grid-template-columns:1fr; gap:16px; }
 #ptMobileRead .pt-q-code { font:14px/1.8 ui-monospace,monospace; padding:13px; overflow:auto; border-radius:9px; }
 #ptMobileRead .pt-opts { gap:9px; }
 #ptMobileRead .pt-option { padding:10px; min-height:52px; border-radius:9px; gap:8px; font:500 16px/1.5 var(--ui); }
 #ptMobileRead .pt-option code { font:14px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
 #ptMobileRead .pt-option b { font-size:12px; width:22px; height:25px; border-radius:5px; }
 #ptMobileRead .pt-feedback { margin-top:15px; padding:11px; font-size:15px; line-height:1.7; }
 #ptMobileRead .pt-q-actions { gap:8px; margin-top:16px; justify-content:flex-start; }
 #ptMobileRead .pt-q-actions .btn { font-size:14px; padding:10px 13px; min-height:44px; border-radius:8px; }
 #ptMobileRead .pt-q-hint { display:none; }
 #ptMobileRead .pt-finish { position:static; padding:24px 18px; gap:17px; }
 #ptMobileRead .pt-finish .mascot { width:90px; height:63px; }
 #ptMobileRead .pt-finish h1 { font-size:24px; }
 #ptMobileRead .pt-finish p { font-size:16px; }
 #ptMobileRead .pt-score { padding:15px 18px; gap:18px; border-radius:15px; }
 #ptMobileRead .pt-score strong { font-size:36px; }
 #ptMobileRead .pt-score span { font-size:16px; }
 #ptMobileRead .pt-finish nav { gap:10px; flex-wrap:wrap; justify-content:center; }
 #ptMobileRead .pt-finish .btn { font-size:14px; padding:12px 16px; }
 #ptMobileRead .pt-source-links { font-size:12px; }
}