/* BKBC3064 · original offline-first learning dashboard. No external fonts or services. */
:root{--ink:#292642;--muted:#77738b;--line:#e8e3f1;--paper:#faf8fd;--purple:#6b58cd;--pale:#ede8ff;--dark:#30275d;--mint:#bff4e4;--pink:#fbe0ec;--gold:#ffd885;--white:#fff;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f3fb;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e8a648;outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}::selection{background:#d9c8ff}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.045em}h1{line-height:1.08}h2{line-height:1.15}p{line-height:1.65}[hidden]{display:none!important}
.shell{min-height:100dvh;display:grid;grid-template-columns:234px minmax(0,1fr)}.sidebar{background:linear-gradient(160deg,#5142ab,#7969cd 65%,#9385dc);color:#f9f8ff;padding:28px 16px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto;box-shadow:8px 0 35px #30275d10}.brandbox{display:flex;align-items:center;gap:10px;padding:0 12px 30px}.logo-mark{width:40px;height:40px;flex-shrink:0;background:#ffffff2b;border:1px solid #ffffff66;display:grid;place-items:center;font-size:1.35rem;border-radius:13px;box-shadow:inset 0 1px #ffffff80}.brandbox strong{display:block;font-size:.88rem}.brandbox small{display:block;color:#e0dbff;font-size:.71rem}.side-label{color:#d9d1ff;font-weight:850;font-size:.69rem;letter-spacing:.13em;margin:11px 13px 10px}.navlink{display:flex;align-items:center;gap:11px;min-height:45px;padding:11px 13px;text-decoration:none;color:#f4efffdb;border-radius:13px;font-size:.88rem;font-weight:700;margin:2px 0}.navlink.active,.navlink:hover{background:#ffffff35;color:#fff}.navicon{width:23px;text-align:center;font-size:1.06rem}.side-week{display:flex;gap:6px;flex-wrap:wrap;margin:5px 9px 17px}.side-week a{font-size:.72rem;color:#fff;text-decoration:none;font-weight:850;background:#ffffff1c;border:1px solid #ffffff19;min-width:46px;text-align:center;padding:7px 6px;border-radius:9px}.side-week a:hover{background:#ffffff4f}.sidebar-bottom{margin-top:auto;background:#ffffff1e;border:1px solid #ffffff31;padding:16px;border-radius:18px}.sidebar-bottom strong{font-size:.92rem}.sidebar-bottom p{font-size:.76rem;color:#e3dcff;margin:6px 0 13px}.sidebar-bottom a{display:block;text-decoration:none;text-align:center;padding:9px 8px;border-radius:10px;background:#fff;color:#5847ad;font-size:.8rem;font-weight:850}
.main{min-width:0;padding:22px clamp(17px,3vw,46px) 70px;max-width:1550px;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.topbar-left{font-size:.84rem;color:var(--muted)}.topbar-left b{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:10px}.searchbox{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:.85rem}.searchbox input{outline:0;border:0;background:transparent;min-width:0;width:210px;color:var(--ink)}.xp-header{border:0;background:#fff;box-shadow:0 4px 18px #30275d0d;border-radius:15px;padding:10px 15px;white-space:nowrap;color:#6651c6;font-weight:900}.avatar{width:39px;height:39px;border-radius:50%;background:#dbd3ff;display:grid;place-items:center;font-weight:900;color:#5946af}.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:18px;margin-bottom:26px}.hero-left{position:relative;overflow:hidden;background:linear-gradient(120deg,#e3dcff 0%,#f1e8fa 57%,#fff4ea 100%);min-height:325px;border:1px solid #e1dcf2;padding:clamp(27px,3.5vw,53px);border-radius:27px}.hero-left:before{position:absolute;content:"";width:330px;height:330px;background:radial-gradient(circle,#bcb0ff88,transparent 70%);right:-95px;top:-110px}.hero-left:after{position:absolute;content:"";width:185px;height:185px;border:30px solid #ffffff4f;border-radius:50%;right:0;bottom:-135px}.eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#7757b9;font-weight:900;margin-bottom:19px;position:relative;z-index:1}.hero-left h1{font-size:clamp(2.45rem,4.8vw,4.55rem);max-width:770px;font-weight:900;position:relative;z-index:1;margin-bottom:18px}.hero-left h1 span{color:#8062da}.hero-left p{max-width:620px;font-size:1rem;color:#605b75;position:relative;z-index:1}.hero-buttons,.btn-row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;border-radius:12px;border:1px solid transparent;padding:11px 17px;font-size:.87rem;font-weight:820;transition:.17s}.button:hover{transform:translateY(-2px)}.button.primary{background:#6855c6;color:#fff;box-shadow:0 8px 20px #5d4cb032}.button.secondary{color:#57469f;background:#fff;border-color:#ddd7f0}.button.dark{color:#fff;background:#342b62}.button.small{padding:8px 11px;font-size:.8rem}.hero-buttons{position:relative;z-index:1;margin-top:25px}.hero-stat{position:relative;overflow:hidden;border-radius:27px;padding:25px;background:linear-gradient(150deg,#3f3480,#6656b3 68%,#8d79cc);color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:325px}.hero-stat:after{content:"";position:absolute;border:40px solid #ffffff10;width:170px;height:170px;border-radius:50%;right:-50px;top:-75px}.hero-stat .minor{font-size:.77rem;font-weight:850;letter-spacing:.11em;color:#cfc5ff}.hero-stat h2{font-size:1.58rem;margin:7px 0 18px;color:#fff}.stat-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-duo>div{padding:15px;background:#ffffff16;border:1px solid #ffffff25;border-radius:16px}.stat-duo strong{display:block;font-size:2.18rem;line-height:1.1}.stat-duo small{color:#e3dcff;font-size:.75rem}.meter{height:9px;background:#dcd5f1;border-radius:99px;overflow:hidden}.meter>i{height:100%;display:block;width:0;background:linear-gradient(90deg,#9e83f2,#5fcbbb);border-radius:99px;transition:width .3s}.hero-stat .meter{background:#ffffff35}.hero-stat .meter>i{background:linear-gradient(90deg,#8cebd9,#ffdb99)}.xp-stat{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:.88rem;margin:15px 0 8px}.xp-stat strong{font-size:1.27rem}.progress-note{font-size:.74rem;color:#e4ddff;margin:11px 0 0}.summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:30px}.mini-stat{border:1px solid var(--line);padding:15px 16px;background:#fff;border-radius:18px;display:flex;gap:12px;align-items:center;box-shadow:0 6px 22px #39315e07}.mini-stat .art{width:43px;height:43px;border-radius:13px;background:#efe9ff;display:grid;place-items:center;font-size:1.35rem;flex-shrink:0}.mini-stat strong{font-size:1.3rem;display:block;line-height:1.2}.mini-stat small{font-size:.77rem;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:27px 0 17px}.section-head h2{margin-bottom:3px;font-size:1.6rem}.section-head p{font-size:.88rem;color:var(--muted);margin:0}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:.77rem;font-weight:800;color:#6e687e}.filter.active{background:#5444ac;color:#fff;border-color:#5444ac}.week-group{margin-bottom:25px;scroll-margin-top:20px}.week-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.week-group-head h3{font-size:1rem;margin:0;letter-spacing:-.01em}.week-group-head span{font-size:.76rem;color:#8b829b}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.lesson-card{background:#fff;border:1px solid #e5def0;border-radius:22px;box-shadow:0 9px 23px #4a3b710b;padding:21px;display:flex;flex-direction:column;gap:13px;min-width:0;transition:transform .18s,box-shadow .18s}.lesson-card:hover{transform:translateY(-3px);box-shadow:0 17px 36px #4a3b711a}.lesson-card.featured{background:linear-gradient(130deg,#fff,#f7f2ff)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:#f0ebfb;color:#6b55bd;font-size:.72rem;font-weight:850}.pill.mint{color:#177965;background:#dff8ee}.pill.coral{color:#bb597e;background:#ffedf2}.pill.grey{color:#746c81;background:#f3f1f5}.lesson-card h3{font-size:1.4rem;margin:0;line-height:1.17}.lesson-card .desc{font-size:.87rem;color:#777185;margin:0;min-height:45px}.card-emoji{font-size:2.2rem;filter:drop-shadow(0 4px 6px #40308024)}.card-bottom{display:flex;gap:11px;align-items:center;justify-content:space-between;margin-top:auto}.card-xp{color:#6654b7;font-size:.74rem;font-weight:900;white-space:nowrap}.card-track{margin-top:0}.card-tag{color:#8b799e;letter-spacing:.08em;font-size:.72rem;font-weight:900;text-transform:uppercase}.card-line{display:flex;align-items:center;justify-content:space-between;gap:9px}.alert{background:#fffbf4;border:1px solid #f4e7cf;color:#866a42;padding:15px 18px;border-radius:16px;font-size:.82rem;line-height:1.6}.assessment{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:23px}.assessment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.assess-item{border-radius:15px;background:#f8f5fc;border:1px solid #ece7f3;padding:15px}.assess-item b{font-size:.85rem}.assess-item strong{font-size:1.35rem;display:block;margin:5px 0;color:#5645b2}.assess-item p{font-size:.78rem;color:#716b82;margin:3px 0}.footer{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:#898398;font-size:.77rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* Lesson player */
.lesson-body{background:#f7f4fb}.lesson-shell{max-width:1470px;margin:auto;padding:17px clamp(12px,2.7vw,42px) 50px}.lesson-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:19px}.lesson-crumb{display:flex;gap:10px;align-items:center;color:#81778e;font-size:.83rem;font-weight:800}.lesson-crumb a{background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:11px;text-decoration:none;color:#6653b4}.lesson-crumb b{color:#4c4175}.lesson-top-xp{border-radius:13px;background:#fff;border:1px solid #e8e0f3;padding:9px 13px;font-weight:900;color:#654fc4;font-size:.87rem}.lesson-intro{padding:26px 30px;border-radius:25px;background:radial-gradient(circle at 90% 4%,#fff6db,transparent 38%),linear-gradient(110deg,#dcd3fc,#eee9fe 65%,#fff1f5);border:1px solid #e2d8f9;margin-bottom:16px;position:relative;overflow:hidden}.lesson-intro h1{font-size:clamp(2rem,4vw,3.55rem);margin:8px 0 9px;max-width:770px}.lesson-intro p{max-width:790px;color:#655b7b;margin-bottom:16px}.intro-sticker{position:absolute;right:6%;top:13%;font-size:5.5rem;transform:rotate(12deg);opacity:.73;filter:drop-shadow(0 12px 14px #7863ae33)}.lesson-layout{display:grid;grid-template-columns:235px minmax(0,1fr);align-items:start;gap:18px}.lesson-nav{background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px;position:sticky;top:16px;box-shadow:0 8px 24px #4a3b710a}.navlesson{display:flex;gap:11px;align-items:center;text-align:left;border:0;background:transparent;color:#706b80;border-radius:11px;padding:13px 11px;font-weight:790;font-size:.85rem;width:100%;margin-bottom:2px}.navlesson .i{width:25px;font-size:1.12rem;text-align:center}.navlesson.active{background:#ede7fd;color:#5944af}.navlesson:hover{background:#f5f1ff}.lesson-nav .nav-footer{margin:12px 5px 5px;padding:14px;border:1px dashed #d9d1e8;border-radius:12px;background:#fbf9ff;font-size:.76rem;color:#777085}.lesson-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,37px);min-height:480px;box-shadow:0 15px 35px #30275d08}.panel-kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#8766cf;font-size:.75rem}.panel-title{font-size:clamp(1.6rem,3vw,2.35rem);margin:7px 0 10px}.panel-lead{color:#787187;font-size:.94rem;max-width:850px}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.panel-card{border:1px solid #e7e0ef;border-radius:18px;padding:19px;background:#fbfaff}.panel-card.white{background:#fff}.panel-card.alt{background:#f1edff}.panel-card h3{font-size:1.08rem;letter-spacing:-.025em}.panel-card p,.panel-card li{font-size:.87rem;color:#70697e;line-height:1.63}.goal-callout{background:linear-gradient(115deg,#e7e0ff,#e7faf3);padding:22px;border-radius:17px;margin:19px 0}.goal-callout strong{font-size:.8rem;letter-spacing:.08em;color:#5d4bb5}.goal-callout p{font-size:1.04rem;font-weight:700;margin:7px 0 0;color:#33275b}.step-row{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:16px;margin:11px 0;background:#fff}.step-num{width:33px;height:33px;display:grid;place-items:center;background:#f1ebff;color:#6544ba;border-radius:11px;flex-shrink:0;font-weight:900}.step-row>div{flex:1;min-width:0}.step-row p{font-size:.89rem;color:#635e72;margin:0}.step-row .step-title{font-size:.76rem;text-transform:uppercase;color:#9a8ca8;font-weight:850;margin-bottom:4px}.tick{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#4d8674;white-space:nowrap;font-weight:800}.tick input{accent-color:#6955c7;width:17px;height:17px}.tick-label{cursor:pointer}.review-list{list-style:none;padding:0}.review-list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:11px;font-size:.9rem}.review-list li:before{content:'◉';color:#856de0}.activity-question{border-radius:17px;border:1px solid var(--line);padding:18px;margin:12px 0;background:#fff}.activity-question strong{display:block;margin-bottom:12px}.option-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.option{padding:12px;text-align:left;border:1px solid #e0dbea;border-radius:11px;background:#faf9fd;color:#453e57;font-weight:700;font-size:.84rem;min-height:53px}.option:hover{background:#f0eaff}.option.correct{border-color:#5ec8ab;background:#e5fbef;color:#1f775d}.option.wrong{border-color:#ed9c9e;background:#fff0ef;color:#b44853}.feedback{font-size:.79rem;padding:9px 0 0;font-weight:730;color:#6a6383}.sequence-list{display:grid;gap:9px;margin:15px 0}.sequence-item{display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid #e3dded;background:#faf9ff;padding:11px 13px;border-radius:12px;font-size:.86rem;font-weight:760}.sequence-item>span{display:flex;align-items:center;gap:9px}.sequence-item i{font-style:normal;color:#8465ca}.sequence-arrows{display:flex;gap:5px}.sequence-arrows button{border:1px solid #d9d0e8;background:#fff;color:#6a53bf;border-radius:8px;width:32px;height:30px}.game-feedback{margin:8px 0;color:#6553a6;font-weight:800}.studio{border:1px solid #ded5f0;border-radius:19px;padding:19px;background:linear-gradient(140deg,#f9f6ff,#fffafa);margin-top:14px}.studio-flag{font-size:.76rem;color:#6e54b3;letter-spacing:.08em;font-weight:900;text-transform:uppercase}.studio h3{margin:7px 0 8px}.studio-description{font-size:.84rem;color:#746d86}.studio-pad{background:#fff;border:1px solid #e9e3f2;border-radius:17px;padding:18px;margin:14px 0}.lab-field{display:grid;gap:5px;font-size:.79rem;font-weight:850;margin:10px 0;color:#5b5470}.lab-field input,.lab-field select,.reflection-box,.tutorial-note{border:1px solid #ded7ea;background:#fff;border-radius:11px;padding:11px 12px;width:100%;color:var(--ink);font:inherit;outline-offset:3px}.lab-field input[type=range]{padding:5px}.mini-browser{border:1px solid #dfd9ed;border-radius:13px;overflow:hidden;background:#fff}.browser-chrome{height:33px;background:#eeebf4;display:flex;align-items:center;padding:0 13px;gap:5px}.browser-chrome span{height:8px;width:8px;border-radius:50%;background:#b2a8c7}.browser-chrome span:first-child{background:#ffa3a3}.browser-chrome span:nth-child(2){background:#ffd98a}.browser-chrome span:nth-child(3){background:#9fddb5}.browser-content{padding:18px}.preview-site{border-radius:12px;background:linear-gradient(135deg,#9d8bf2,#d9caed);padding:26px;color:#fff}.preview-site h3{font-size:clamp(1.4rem,3vw,2.25rem);margin:0 0 7px}.preview-site p{font-size:.83rem;opacity:.86}.preview-site button{background:#fff;color:#5144a0;padding:10px 14px;border:0;border-radius:9px;font-weight:800}.sitemap-stage{display:flex;flex-direction:column;align-items:center;gap:11px;min-height:190px;padding:14px}.sitemap-root{padding:12px 25px;background:#5c50ae;color:#fff;font-weight:900;border-radius:12px}.sitemap-children{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;border-top:2px dashed #a69dc0;padding-top:15px;width:100%}.node{background:#efeaff;color:#5649a0;border:1px solid #dcd5f8;border-radius:11px;padding:10px 12px;font-weight:800;font-size:.81rem}.add-node{border:1px dashed #a58ee4;background:#fff;color:#684db7;padding:9px;border-radius:9px;font-weight:800}.wireframe{width:260px;max-width:100%;margin:12px auto;background:#fff;border:7px solid #3d3951;border-radius:28px;padding:13px;min-height:315px;box-shadow:0 15px 25px #3a2f5940}.wireframe>div{background:#d9d9df;border-radius:7px;margin-bottom:10px}.wf-navbar{height:25px}.wf-hero{height:84px}.wf-copy{height:35px}.wf-cards{display:flex;gap:8px;background:transparent!important}.wf-cards b{display:block;flex:1;height:70px;background:#d9d9df;border-radius:7px}.wf-footer{height:20px}.screen-toggle{display:flex;gap:7px;margin:10px 0}.screen-toggle button{background:#f6f3fd;color:#604e9f;border:1px solid #dfd6f0;border-radius:9px;padding:8px 11px;font-size:.8rem;font-weight:800}.screen-toggle button.selected{background:#6856c4;color:#fff}.mini-page{border:1px solid #ded7ed;background:#fff;border-radius:14px;padding:14px;min-height:200px;max-width:520px;margin:auto;transition:width .25s}.mini-page.phone{max-width:255px}.mini-page .page-head{background:#6a58c2;color:#fff;padding:10px;border-radius:9px}.mini-page .page-block{border-radius:7px;background:#dcd4f4;padding:15px;margin-top:9px;font-size:.82rem}.mini-page .page-wide{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mini-page.phone .page-wide{grid-template-columns:1fr}.mini-page.phone .hide-mobile{display:none}.flow-preview{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;padding:18px 0}.flow-preview .flow-step{padding:9px 13px;background:#f0eaff;border:1px solid #dbd0f7;color:#5b45a0;border-radius:11px;font-weight:800;font-size:.8rem}.flow-preview .flow-arrow{color:#967dc2}.demo-chip{display:inline-flex;gap:6px;padding:8px 11px;border-radius:10px;background:#f2edff;color:#634faf;font-size:.79rem;font-weight:800;margin:4px}.demo-status{border-radius:10px;background:#e7faf1;border:1px solid #cbebdb;padding:10px 13px;color:#28785f;font-size:.81rem;font-weight:770;margin-top:10px}.demo-button{border:1px solid #d9ceed;background:#6b58c4;color:#fff;padding:10px 14px;border-radius:10px;font-weight:800;margin:4px 4px 4px 0}.demo-button.light{background:#f3eefe;color:#5b48ac}.disabled-explain{font-size:.76rem;color:#85788b}.reflection-box,.tutorial-note{min-height:130px;resize:vertical;line-height:1.65}.word-counter{font-size:.8rem;color:#8b7e98;margin-top:8px}.resource-list{display:grid;gap:10px}.resource-link{display:flex;gap:12px;align-items:center;border:1px solid #e5def0;padding:14px;border-radius:12px;text-decoration:none;background:#fff;font-size:.85rem;font-weight:850;color:#5d4bac;overflow-wrap:anywhere}.resource-link:hover{background:#f5f1fe}.source-pre{white-space:pre-wrap;overflow-wrap:anywhere;font:normal .84rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#564e67;padding:17px;background:#fcfbfe;border:1px solid #e6e1ee;border-radius:12px;max-height:650px;overflow:auto}.source-detail{margin:18px 0;border:1px solid var(--line);border-radius:14px;padding:13px}.source-detail summary{cursor:pointer;color:#5847a9;font-weight:850}.toast{position:fixed;right:25px;bottom:22px;background:#383064;color:#fff;border-radius:15px;padding:13px 17px;font-weight:850;z-index:40;box-shadow:0 12px 40px #2d23584f;max-width:300px}.achievement-modal{position:fixed;inset:0;background:#1e1a3cbb;display:grid;place-items:center;padding:16px;z-index:100;backdrop-filter:blur(6px)}.achievement-dialog{background:#fff;max-height:90dvh;overflow:auto;border-radius:23px;padding:26px;width:min(760px,100%)}.achievement-art{padding:28px;border-radius:18px;background:radial-gradient(circle at 95% 10%,#6554ad,transparent 45%),linear-gradient(135deg,#29245b,#534297);color:#fff;min-height:330px}.achievement-art h2{font-size:2.15rem;color:#fff}.achievement-art .giant{font-size:3.1rem;font-weight:900;letter-spacing:-.07em}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.tiny{font-size:.79rem;color:#857d96}.note-warn{padding:13px 15px;border-radius:13px;background:#fff5e7;border:1px solid #f3dfb7;color:#775d35;font-size:.82rem;margin:13px 0}.lesson-footer{color:#898199;font-size:.76rem;margin:24px 0 5px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.hidden-by-filter{display:none!important}
@media(max-width:1180px){.summary-strip{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1.2fr .8fr}.sidebar{padding:23px 11px}.shell{grid-template-columns:205px minmax(0,1fr)}.lesson-intro .intro-sticker{opacity:.35}}
@media(max-width:920px){.shell{display:block}.sidebar{height:auto;position:relative;padding:13px 16px;display:block}.brandbox{padding:0}.sidebar .side-label,.sidebar .side-week,.sidebar .sidebar-bottom{display:none}.sidebar nav{display:flex;gap:4px;overflow:auto;margin-top:9px}.sidebar .navlink{white-space:nowrap;margin:0}.main{padding:20px 17px 55px}.hero{grid-template-columns:1fr}.hero-left,.hero-stat{min-height:0}.hero-stat{gap:12px}.assessment-grid{grid-template-columns:repeat(2,1fr)}.lesson-layout{grid-template-columns:1fr}.lesson-nav{position:static;display:flex;overflow-x:auto;gap:5px;padding:9px}.navlesson{width:auto;white-space:nowrap;margin:0}.lesson-nav .nav-footer{display:none}}
@media(max-width:650px){.lesson-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.topbar-left{display:none}.searchbox input{width:130px}.section-head{align-items:flex-start;flex-direction:column}.summary-strip{grid-template-columns:repeat(2,1fr);gap:8px}.mini-stat{padding:11px;gap:8px}.mini-stat .art{width:38px;height:38px}.hero-left{padding:28px 23px}.hero-left h1{font-size:2.55rem}.hero-stat{padding:22px}.assessment-grid,.two-col{grid-template-columns:1fr}.lesson-intro{padding:23px 18px}.intro-sticker{right:4%;font-size:3.1rem;top:8%}.lesson-shell{padding:10px 10px 35px}.lesson-panel{padding:19px 15px;min-height:0}.step-row{padding:12px;gap:10px}.step-row .tick{white-space:normal}.lesson-crumb{font-size:.74rem}.lesson-top-xp{font-size:.75rem;padding:8px}.option-list{grid-template-columns:1fr}.achievement-dialog{padding:16px}.achievement-art{padding:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.sidebar,.topbar,.lesson-nav,.lesson-head,.button,.modal-actions{display:none!important}.main,.lesson-shell{padding:0}.lesson-panel{box-shadow:none;border:0}.achievement-dialog{max-height:none;overflow:visible}.achievement-modal{position:static;background:none;padding:0}.achievement-art{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ===== BKBC3064 refresh: TAR UMT branding + stronger motion ===== */
:root{--ink:#1f3251;--muted:#62718a;--line:#dce7f3;--paper:#f6fbff;--purple:#1782c5;--pale:#e8f4ff;--dark:#0d4e7d;--mint:#d8f8ef;--pink:#ffe9ee;--gold:#ffd45f;--white:#fff;--radius:22px}
body,.lesson-body{background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%)}
.sidebar{background:linear-gradient(180deg,#0d6fa6 0%,#1782c5 50%,#2794d2 100%);box-shadow:8px 0 35px #0d4e7d18}
.brandbox{align-items:center;gap:12px}.tarumt-logo{width:56px;height:auto;object-fit:contain;border-radius:14px;background:#fff;padding:6px;box-shadow:0 10px 24px #08263a24}.brandbox small{color:#d8efff}
.logo-mark{display:none}.navlink,.side-week a,.sidebar-bottom{transition:transform .2s ease,background .2s ease,box-shadow .25s ease}.navlink:hover,.side-week a:hover{transform:translateX(3px)}.navlink.active,.navlink:hover{background:#ffffff2a;box-shadow:inset 0 0 0 1px #ffffff1f}.sidebar-bottom{background:linear-gradient(180deg,#ffffff1b,#ffffff13)}.sidebar-bottom a{color:#0b6397}
.topbar-left b,.xp-header,.hero-left h1 span,.card-xp,.filter.active,.resource-link,.source-detail summary,.game-feedback,.demo-button.light,.lesson-brandline span{color:#0e75aa}.avatar{background:#dff0ff;color:#0b6a9b}.xp-header{position:relative;overflow:hidden;color:#0d669b}.xp-header:after,.button.shimmer:after{content:"";position:absolute;inset:0 auto 0 -55%;width:45%;background:linear-gradient(90deg,transparent,#ffffffa6,transparent);transform:skewX(-20deg);animation:shine 4.2s linear infinite}
.hero-left,.hero-stat,.assessment,.lesson-intro,.lesson-panel,.panel-card,.activity-question,.step-row,.studio,.resource-link,.assess-item,.mini-stat,.lesson-card{position:relative;transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.hero-left{background:linear-gradient(125deg,#eaf7ff 0%,#f8fbff 58%,#fff9e8 100%);border-color:#d7e8f5;box-shadow:0 24px 50px #0d4e7d0d}.hero-left:before{background:radial-gradient(circle,#56b0e485,transparent 70%)}.hero-left:after{border-color:#ffffff70}.hero-orb{position:absolute;border-radius:50%;filter:blur(3px);opacity:.55;pointer-events:none;animation:floaty 8s ease-in-out infinite}.orb-a{width:120px;height:120px;right:12%;top:16%;background:radial-gradient(circle,#ffc743,transparent 70%)}.orb-b{width:85px;height:85px;left:8%;bottom:10%;background:radial-gradient(circle,#ff738f,transparent 70%);animation-delay:-3s}.orb-c{width:62px;height:62px;right:28%;bottom:20%;background:radial-gradient(circle,#2fb2ff,transparent 70%);animation-delay:-5s}
.hero-brandline,.lesson-brandline{display:inline-flex;align-items:center;gap:12px;padding:8px 12px;border-radius:999px;background:#ffffffc9;border:1px solid #d9ebf8;position:relative;z-index:1;margin-bottom:14px;font-size:.8rem;font-weight:850;color:#21557b;backdrop-filter:blur(8px)}.hero-brandline img,.lesson-brandline img{height:36px;width:auto;display:block}.lesson-brandline{margin-bottom:10px}
.hero-tags,.lesson-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0;position:relative;z-index:1}.hero-tags span,.lesson-tag-row span{padding:8px 11px;border-radius:999px;background:#ffffffd8;border:1px solid #d6e9f6;color:#285877;font-size:.78rem;font-weight:800;box-shadow:0 6px 16px #0e5f9310}
.button.primary{background:linear-gradient(135deg,#0f71a6,#2b9dd8);box-shadow:0 12px 24px #0d6ea633}.button.secondary{color:#145f93;border-color:#d6e8f6}.button:hover{transform:translateY(-3px) scale(1.01)}.button.primary:hover{box-shadow:0 16px 32px #0d6ea640}
.hero-stat{background:linear-gradient(160deg,#0d4e7d,#167ab8 66%,#29a8de);box-shadow:0 24px 50px #0d4e7d16}.hero-stat:after{border-color:#ffffff18}.hero-mouse-tip{padding:10px 12px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff1e;font-size:.8rem;color:#d9f0ff;margin-top:16px}.stat-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff3;box-shadow:0 0 0 8px #fff1;animation:blink 4s ease-in-out infinite}.spark-a{right:22%;top:18%}.spark-b{right:9%;bottom:24%;animation-delay:-2s}
.summary-strip .mini-stat,.lesson-card,.assess-item,.panel-card,.activity-question,.step-row,.studio,.resource-link{overflow:hidden}.lesson-card .card-glow{position:absolute;inset:-30% auto auto -20%;width:130px;height:130px;background:radial-gradient(circle,#5cbcff22,transparent 68%);pointer-events:none}.lesson-card:hover,.assess-item:hover,.mini-stat:hover,.panel-card:hover,.activity-question:hover,.step-row:hover,.resource-link:hover{box-shadow:0 18px 36px #0d4e7d17;border-color:#bfd8ea}
.pill{background:#edf6ff;color:#166ea6}.pill.mint{background:#e4fbf2;color:#167f61}.pill.coral{background:#ffeef1;color:#c25574}.pill.grey{background:#eef3f7;color:#5f7282}.mini-stat .art{background:#eaf5ff;color:#116c9d}
.filter{transition:all .2s ease}.filter:not(.active):hover{background:#f2f8ff;color:#156796;border-color:#cfe0ed}
.lesson-intro{background:linear-gradient(135deg,#ebf7ff 0%,#f7fbff 60%,#fff9e8 100%);border-color:#d8e8f3}.lesson-intro .intro-sticker{color:#0b7cb5;text-shadow:0 12px 25px #0d6ea625;animation:floaty 7s ease-in-out infinite}
.lesson-top-xp,.navlesson.active{background:#0f78b0;color:#fff}.navlesson{transition:transform .18s ease,background .18s ease,color .18s ease}.navlesson:hover{transform:translateX(4px);background:#ebf6ff;color:#156797}.meter>i{background:linear-gradient(90deg,#1182c4,#57d4e8 55%,#ffd45f)}.hero-stat .meter>i,.achievement-art .meter>i{background:linear-gradient(90deg,#7de7ff,#ffe080)}
.demo-button{background:linear-gradient(135deg,#0f70a6,#1990ce);transition:transform .18s ease,box-shadow .2s ease}.demo-button:hover{transform:translateY(-2px);box-shadow:0 12px 22px #0d6ea632}.demo-button.light{background:#edf7ff;border-color:#d4e8f8}.option:hover,.resource-link:hover,.navlesson:hover{box-shadow:0 8px 18px #0d4e7d10}
.preview-site{background:linear-gradient(135deg,#1576ae,#4fc2e2)}.mini-page .page-head,.sitemap-root{background:#1576ae}.node,.flow-preview .flow-step,.demo-chip{background:#edf6ff;border-color:#d6e6f8;color:#16689a}
.achievement-art{background:radial-gradient(circle at 98% 8%,#3ba8e2,transparent 42%),linear-gradient(135deg,#0d4e7d,#0f70a6 60%,#2ca1d7)}.achievement-brand{display:flex;align-items:center;gap:14px}.achievement-brand img{width:72px;height:auto;background:#fff;border-radius:14px;padding:8px;box-shadow:0 12px 24px #0c35552e}
.lesson-panel .panel-card,.lesson-panel .activity-question,.lesson-panel .step-row,.lesson-panel .studio{backdrop-filter:blur(8px)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes blink{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.95;transform:scale(1.35)}}
@keyframes shine{0%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(370%) skewX(-20deg)}}
@media(max-width:920px){.hero-brandline img,.lesson-brandline img{height:30px}.tarumt-logo{width:48px}.hero-tags span,.lesson-tag-row span{font-size:.74rem;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.hero-orb,.intro-sticker,.stat-spark,.xp-header:after,.button.shimmer:after{animation:none!important}.hero-left,.hero-stat,.assessment,.lesson-intro,.lesson-panel,.panel-card,.activity-question,.step-row,.studio,.resource-link,.assess-item,.mini-stat,.lesson-card{transform:none!important}}

/* ===== v3 premium interactions ===== */
.sound-toggle{border:1px solid #d6e7f3;background:#fff;color:#0d6ea6;border-radius:12px;padding:10px 12px;font-weight:800;box-shadow:0 6px 16px #0d4e7d0f}.sound-toggle.small{margin-left:auto;padding:8px 12px;border-radius:10px}
.level-chip{display:flex;align-items:center;gap:10px;max-width:280px;margin-top:16px;padding:12px 14px;border-radius:16px;background:#ffffffd9;border:1px solid #d6e7f4;box-shadow:0 10px 25px #0d4e7d12;position:relative;z-index:2}.level-chip span{font-size:1.5rem}.level-chip strong{display:block;font-size:.96rem;color:#184f73}.level-chip small{display:block;color:#6e8091;font-size:.75rem}
.page-curtain{position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,#39aee3,#0b5e8f 65%,#083d60 100%);display:grid;place-items:center;z-index:999;opacity:1;visibility:visible;transition:opacity .38s ease,visibility .38s ease}.page-curtain.hide{opacity:0;visibility:hidden;pointer-events:none}.page-curtain.show{opacity:1;visibility:visible}.curtain-logo{width:78px;height:78px;border-radius:24px;background:#ffffff1e;border:1px solid #ffffff33;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:900;box-shadow:inset 0 1px #ffffff55;animation:floaty 2.6s ease-in-out infinite}.curtain-text{margin-top:16px;color:#fff;font-weight:800;letter-spacing:.02em;text-align:center}
.flashcard-stage,.boss-stage{margin-top:24px}.flash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px}.flip-card{position:relative;min-height:120px;border:1px solid #d8e7f2;border-radius:16px;background:#fff;transform-style:preserve-3d;transition:transform .45s ease,box-shadow .2s ease;padding:0;overflow:hidden}.flip-card:hover{box-shadow:0 14px 28px #0d4e7d15}.flip-card.flipped{transform:rotateY(180deg)}.flip-card.done{border-color:#8fd7bf}.flip-face{position:absolute;inset:0;padding:16px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:.85rem;backface-visibility:hidden}.flip-face.front{background:linear-gradient(135deg,#eef7ff,#fff8ea);color:#135a85}.flip-face.back{background:linear-gradient(135deg,#0f79b1,#29a8de);color:#fff;transform:rotateY(180deg);font-weight:700;line-height:1.45}
.boss-options{display:grid;gap:9px;margin-top:14px}.boss-options .option{justify-content:flex-start}.confetti-burst{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}.confetti-burst span{position:absolute;top:-12px;width:10px;height:18px;border-radius:2px;animation:fall 1.35s ease-in forwards}@keyframes fall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(540deg);opacity:0}}
.badge-mini strong{font-size:1rem}
.hero-left .level-chip,.lesson-intro .level-chip{animation:floaty 7s ease-in-out infinite}
@media(max-width:650px){.flash-grid{grid-template-columns:1fr 1fr}.level-chip{max-width:none}.sound-toggle{padding:8px 10px}}

/* =============== V4 ULTIMATE: MASCOT, BADGES, CERTIFICATE, WEEKLY CASES =============== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-kicker{color:#1677b2;font-weight:900;letter-spacing:.13em;font-size:.73rem;text-transform:uppercase}
.badge-section{background:#ffffff;border:1px solid #d9e8f5;border-radius:27px;padding:27px clamp(16px,2.8vw,30px);margin:24px 0 34px;box-shadow:0 12px 32px #0a4d7e0c;position:relative;overflow:hidden}
.badge-section:before{content:"";position:absolute;inset:-110px -120px auto auto;width:330px;height:330px;background:radial-gradient(circle,#deefff,transparent 70%);pointer-events:none}
.badge-section .badge-title{margin-top:0;position:relative}.badge-section h2{margin:5px 0 8px}.badge-summary{border-radius:99px;background:#e5f5ff;color:#176d9c;border:1px solid #cce6f8;padding:9px 15px;font-size:.82rem;font-weight:850;white-space:nowrap}
.badge-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px;position:relative}.badge-card{border:1px solid #e0e8f1;border-radius:18px;background:linear-gradient(145deg,#f9fcff,#f4f8fc);padding:17px 9px;min-width:0;text-align:center;filter:saturate(.55);transition:transform .24s,border-color .22s,box-shadow .22s,filter .22s}.badge-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #0a4e7c18;filter:saturate(.9)}.badge-card.unlocked{background:linear-gradient(145deg,#fffbea,#ebf9ff);border-color:#f5d886;filter:saturate(1);box-shadow:inset 0 0 0 1px #fff8d3}
.badge-icon{width:56px;height:56px;display:grid;place-items:center;font-size:1.8rem;margin:0 auto 13px;border-radius:19px;background:#e9f2fa;transform:rotate(-5deg);transition:transform .24s}.badge-card:hover .badge-icon{transform:rotate(5deg) scale(1.09)}.badge-card.unlocked .badge-icon{background:#fff0c4;animation:badgePulse 5s ease-in-out infinite}.badge-copy .badge-week{display:block;color:#668097;font-weight:900;letter-spacing:.09em;font-size:.6rem}.badge-copy strong{display:block;font-size:.81rem;line-height:1.25;margin:6px 0;min-height:2.7em}.badge-copy small{display:block;color:#688098;font-size:.67rem;min-height:1.65em}.badge-card.unlocked small{color:#158064;font-weight:800}.badge-meter{height:5px;border-radius:99px;background:#dfe8f1;margin-top:12px;overflow:hidden}.badge-meter>i{display:block;height:100%;background:linear-gradient(90deg,#1f84be,#e9bd4a);border-radius:99px;transition:width .5s}
.certificate-cta{display:flex;align-items:center;justify-content:space-between;gap:17px;border-top:1px solid #e6edf5;margin-top:23px;padding-top:22px}.certificate-cta strong{color:#19527e;font-size:1.07rem}.certificate-cta p{font-size:.79rem;color:#64788c;margin:5px 0 0;max-width:670px}.certificate-cta .button{flex-shrink:0}
.pixel-coach{position:absolute;bottom:23px;right:19px;z-index:2;display:flex;align-items:flex-end;gap:11px;pointer-events:none}.pixel-button,.pixel-bubble{pointer-events:auto}.pixel-button{background:none;border:0;display:block;padding:4px;width:95px;height:142px;transition:transform .2s}.pixel-button:hover{transform:translateY(-8px) rotate(-4deg)}.pixel-button:focus-visible{outline:3px solid #ffc750;border-radius:17px}.pixel-float{position:relative;display:block;width:89px;height:126px;animation:floaty 5s ease-in-out infinite;filter:drop-shadow(0 12px 13px #093e652e)}.pixel-antenna{position:absolute;left:39px;top:4px;width:12px;height:16px;border-radius:5px;background:#0f6094}.pixel-antenna:before{content:"";position:absolute;left:-5px;top:-7px;width:22px;height:14px;background:#ffd35f;border-radius:50%;box-shadow:0 0 12px #ffc54c88}.pixel-head{position:absolute;left:5px;top:18px;width:78px;height:65px;background:linear-gradient(150deg,#fff,#d8f3ff);border:5px solid #166fa2;border-radius:24px 24px 19px 19px;box-shadow:inset 0 -7px #9bdef288}.pixel-head:after{content:"";position:absolute;left:13px;top:12px;width:10px;height:10px;background:#ffffffa0;border-radius:50%}.pixel-eye{position:absolute;top:25px;width:11px;height:16px;border-radius:8px;background:#14567b;animation:blinkEye 6s infinite;transform-origin:center}.pixel-eye:nth-child(1){left:18px}.pixel-eye:nth-child(2){right:17px}.pixel-mouth{position:absolute;bottom:9px;left:31px;width:12px;height:7px;border-radius:0 0 9px 9px;border-bottom:3px solid #1f6d91}.pixel-body{position:absolute;left:16px;top:78px;width:58px;height:45px;border-radius:14px 14px 22px 22px;border:4px solid #126b9e;background:linear-gradient(140deg,#2097d1,#0a69a5)}.pixel-emblem{color:#ffda67;font-weight:900;font-size:1.35rem;line-height:34px}.pixel-arm{position:absolute;top:86px;width:13px;height:27px;border-radius:9px;border:3px solid #126b9e;background:#b8eeff}.pixel-arm.left{left:1px;transform:rotate(24deg)}.pixel-arm.right{right:-2px;transform:rotate(-29deg);animation:waveArm 2.8s ease-in-out infinite;transform-origin:top center}.pixel-bubble{width:191px;background:#ffffffec;border:1px solid #cde9fb;color:#184d72;border-radius:18px;padding:11px 12px;box-shadow:0 9px 23px #09385921;backdrop-filter:blur(7px);position:relative;transition:transform .2s}.pixel-bubble:after{content:"";position:absolute;right:-8px;bottom:21px;width:14px;height:14px;transform:rotate(45deg);background:#fff;border-top:1px solid #cde9fb;border-right:1px solid #cde9fb}.pixel-bubble strong{display:block;font-size:.72rem;color:#0d6da4;letter-spacing:.08em}.pixel-bubble p{font-size:.72rem;line-height:1.38;margin:4px 0 0;overflow-wrap:anywhere}.pixel-coach.talking .pixel-bubble{transform:scale(1.035)}
.hero-stat .pixel-coach{bottom:45px;right:6px;transform:scale(.8);transform-origin:bottom right}.hero-stat .pixel-bubble{display:none}.hero-stat:hover .pixel-bubble,.hero-stat:focus-within .pixel-bubble{display:block}.lesson-intro .pixel-coach{bottom:18px;right:21px;transform:scale(.82);transform-origin:right bottom}.lesson-intro .pixel-bubble{display:none}.lesson-intro:hover .pixel-bubble,.lesson-intro:focus-within .pixel-bubble{display:block}
.v4-scenario{margin-top:27px;background:linear-gradient(145deg,#eefaff,#fff9f0);border:1px solid #cee9f8;padding:22px}.case-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #d9eaf4;padding-bottom:16px}.case-top h3{font-size:1.35rem;margin:6px 0}.case-top p{font-size:.87rem;margin:0;color:#617b91}.case-xp{background:#fff3c9;color:#8a5d13;padding:9px 12px;border-radius:10px;font-weight:900;white-space:nowrap}.case-question{padding:18px 0;border-bottom:1px solid #e2edf4}.case-question strong{display:block;margin-bottom:12px}.case-options{display:grid;gap:9px}.case-option{border:1px solid #cbdfea;border-radius:12px;background:#fff;padding:11px 14px;color:#284b67;text-align:left;font-size:.87rem;font-weight:750;transition:all .15s}.case-option:hover{background:#e8f6ff;border-color:#83c2e6;transform:translateX(3px)}.case-option.right{background:#dbf8e7;border-color:#66c89d;color:#146648}.case-option.wrong{background:#fff0f0;border-color:#eeb5ae;color:#a14747}.case-feedback{font-size:.79rem;margin:11px 0 0;color:#537285}.case-footer{color:#145b86;font-weight:880;padding-top:18px}.award-flash{animation:awardPulse .75s ease-in-out}
.v4-modal{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px}.v4-modal-backdrop{position:absolute;inset:0;background:#0a2b44d9;backdrop-filter:blur(10px)}.v4-sheet{position:relative;width:min(990px,100%);max-height:94dvh;overflow:auto;border-radius:25px;background:#fff;box-shadow:0 35px 80px #061c3290;border:1px solid #dde9f3;padding:clamp(15px,2vw,28px)}.v4-sheet-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.v4-sheet-head h2{margin:6px 0 5px;font-size:clamp(1.4rem,3vw,2rem)}.v4-sheet-head p{font-size:.88rem;color:#627a8e;margin:0 0 17px}.v4-close{font-size:1.9rem;line-height:1;border:1px solid #dbe8f3;background:#f4f9ff;color:#1f5c86;border-radius:12px;width:42px;height:42px;flex-shrink:0}.v4-sheet-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:16px}.certificate-paper{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:385px;padding:28px;background:radial-gradient(circle at 100% 0%,#fff2b8,transparent 32%),linear-gradient(135deg,#effaff,#fffdf7);border:7px solid #0f74a5;outline:2px solid #efd174;outline-offset:-13px;border-radius:12px;color:#173b57;text-align:center}.certificate-mark{display:flex;align-items:center;gap:12px}.certificate-mark img{width:125px;object-fit:contain}.certificate-mark strong{color:#0b6498}.certificate-kicker{letter-spacing:.09em;font-size:.62rem;color:#5d788c;font-weight:800;margin-top:14px}.certificate-paper h3{font-size:clamp(1.2rem,2.6vw,1.9rem);margin:12px 0 6px}.cert-subtitle{font-size:.78rem;color:#5c7287;margin:0}.cert-name{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:900;color:#0b659b;margin:20px 0 12px;overflow-wrap:anywhere}.cert-rule{height:2px;width:74%;background:#dfbc65}.certificate-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0;color:#246084;font-size:.78rem}.cert-disclaimer{font-size:.68rem;line-height:1.5;color:#6c8190;max-width:550px}.certificate-controls{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:15px;background:#f6faff;border:1px solid #e1eef7;border-radius:15px}.certificate-controls label{font-weight:800;font-size:.88rem}.certificate-controls input{border:1px solid #c6dce9;border-radius:11px;background:white;padding:12px;width:100%;min-width:0}.certificate-controls .tiny{margin:0}.certificate-actions{display:flex;flex-wrap:wrap;gap:9px}.certificate-actions .button{width:100%}.certificate-actions .button:disabled{background:#e0e8ee;box-shadow:none;color:#738698}.cert-status{font-size:.78rem;color:#22745a}
@keyframes blinkEye{0%,43%,46%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.1)}}@keyframes waveArm{0%,100%{transform:rotate(-29deg)}45%,65%{transform:rotate(-65deg)}}@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 #ffd77300}50%{box-shadow:0 0 0 6px #ffd77325}}@keyframes awardPulse{0%,100%{box-shadow:0 0 0 #0e9c7e00}40%{box-shadow:0 0 0 8px #0e9c7e20}}
@media(max-width:1200px){.badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:750px){.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.certificate-cta{align-items:flex-start;flex-direction:column}.v4-sheet-body{grid-template-columns:1fr}.v4-modal{padding:8px}.v4-sheet{max-height:98dvh}.pixel-coach{transform:scale(.7);transform-origin:right bottom}.hero-stat .pixel-coach{right:8px;transform:scale(.7)}.badge-card{padding:12px 6px}}@media(max-width:450px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-top{flex-wrap:wrap}.lesson-intro .pixel-coach{display:none}.hero-stat .pixel-coach{opacity:.6;pointer-events:none}.badge-section{padding:16px}.certificate-paper{padding:19px}.certificate-mark img{width:105px}.top-actions .motion-toggle{font-size:.7rem;padding:9px 6px}}
@media(prefers-reduced-motion:reduce){.pixel-float,.pixel-arm,.pixel-eye,.badge-card.unlocked .badge-icon{animation:none!important}.badge-card,.case-option{transition:none!important}}html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation-duration:.00001ms!important;transition-duration:.00001ms!important;scroll-behavior:auto!important}html.motion-off .pixel-float,html.motion-off .pixel-arm{animation:none!important}
@media print{body:has(#v4-certificate) .shell,body:has(#v4-certificate) .app-head,body:has(#v4-certificate) .lesson-shell,body:has(#v4-certificate) .page-curtain{display:none!important}body:has(#v4-certificate) .v4-modal{position:static!important;background:white;padding:0;display:block!important}body:has(#v4-certificate) .v4-modal-backdrop,body:has(#v4-certificate) .v4-sheet-head,body:has(#v4-certificate) .certificate-controls{display:none!important}body:has(#v4-certificate) .v4-sheet{overflow:visible!important;max-height:none!important;width:100%;padding:0;border:0;box-shadow:none}body:has(#v4-certificate) .v4-sheet-body{display:block}body:has(#v4-certificate) .certificate-paper{width:100%;min-height:175mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
@media(max-width:650px){.topbar{width:100%;min-width:0}.top-actions{width:100%;min-width:0;gap:5px;justify-content:space-between}.top-actions .searchbox{flex:1;min-width:0;width:auto;padding:8px 9px}.top-actions .searchbox input{width:100%;min-width:0}.top-actions .avatar{display:none}.top-actions .sound-toggle{flex:0 0 auto;font-size:.7rem;padding:9px 7px}.top-actions .motion-toggle{font-size:.69rem;padding:9px 6px}.xp-header{flex:0 0 auto;font-size:.8rem;padding:9px 8px}.main,.shell{min-width:0}}
.filter.active{background:#0e77ac;border-color:#0e77ac;color:#fff}.hero-left .eyebrow,.card-tag,.card-xp,.panel-kicker{color:#0b6c9f}.screen-toggle button.selected{background:#127db5;color:white}.lesson-nav .navlesson.active{background:#0b77aa;color:#fff}

/* ===== V5 mobile-first live tutorial response companion ===== */
.live-class-root{min-width:0}.live-eyebrow{font-size:.76rem;letter-spacing:.12em;font-weight:900;color:#0b7aa8;margin-bottom:9px}.live-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:17px 0}.live-summary>div{border:1px solid #d6e9f5;border-radius:16px;background:#f2faff;padding:13px;font-weight:850;color:#0b6792}.live-summary strong{display:inline-block;font-size:.86rem}.live-summary small{display:block;font-weight:650;font-size:.73rem;color:#54728b;margin-top:5px}.live-board-note{border:1px solid #f0d7a5;background:#fff9ed;color:#805822;border-radius:14px;padding:14px;font-size:.85rem;line-height:1.6;margin-bottom:16px}.live-board-note.ready{border-color:#addfca;background:#ecfff5;color:#176949}
.live-steps{display:grid;gap:10px;margin:16px 0 22px}.live-step{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid #dceaf5;border-radius:15px;padding:14px 16px;box-shadow:0 6px 19px #0f477609}.live-step>span{flex:none;width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#0f76ae,#41bce2);color:#fff;font-weight:900}.live-step b{display:block;font-size:.92rem;color:#1f4562}.live-step p{font-size:.84rem;color:#566d83;margin:3px 0 0;line-height:1.6}.live-compose{padding:21px!important;margin-bottom:17px}.live-field-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}.live-field-head h3{margin:0;font-size:1.15rem}.live-field-head>span{font-size:.72rem;color:#5b8f80;font-weight:780}.live-label{display:block;font-size:.85rem;font-weight:800;color:#2d5870;margin:13px 0}.live-label small{display:block;font-weight:550;color:#687f90;font-size:.73rem;margin:4px 0 6px}.live-label input,.live-label select,.live-label textarea{display:block;width:100%;min-width:0;margin-top:7px;border-radius:12px;background:#fff;border:1px solid #cfdfed;padding:12px 13px;font:inherit;font-weight:500;font-size:.88rem;color:#203b55;outline-offset:3px}.live-label textarea{resize:vertical;min-height:85px;line-height:1.55}.live-label input:focus,.live-label textarea:focus{border-color:#39a7d3;box-shadow:0 0 0 3px #56c4e528}.live-build-actions,.teacher-actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.live-copy-status{font-size:.85rem;color:#157da0;font-weight:730}.live-example,.live-preview{background:#f4faff;border:1px solid #d3e7f3;padding:13px;border-radius:12px;font-size:.85rem}.live-example p{margin:5px 0 0}.live-preview summary{font-weight:850;cursor:pointer;color:#166d9d}.live-preview pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:.82rem;line-height:1.5;color:#234968}.live-apps{border:1px solid #d7e7f2;background:#f7fbfe;border-radius:19px;padding:20px;margin:19px 0}.live-platform{display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid #ddebf3}.live-platform:first-of-type{border-top:0}.live-platform-icon{font-size:1.6rem;width:42px;height:42px;background:#eef7fd;border-radius:12px;flex:none;display:grid;place-items:center}.live-platform-copy{flex:1;min-width:0}.live-platform-copy strong{font-size:.87rem}.live-platform-copy p{font-size:.77rem;color:#58748a;margin:3px 0;line-height:1.5}.live-not-connected{font-size:.72rem;padding:7px 9px;white-space:nowrap;border-radius:8px;color:#73697e;background:#f0eef2;font-weight:730}.live-peer,.live-canva{margin:17px 0}.live-peer-check{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:780;margin:12px 0}.live-peer small{display:block;color:#627589}.live-peer-check input{width:18px;height:18px;accent-color:#0b80b8}.live-teacher-note{padding:15px 17px;margin:15px 0;border-radius:13px;background:#e9f7ff;border:1px solid #c9e8f7;color:#1c577c;font-size:.86rem}.live-source p{font-size:.85rem}.live-privacy{border:1px solid #efe3b6;background:#fffbea;color:#70542b;border-radius:13px;padding:15px;font-size:.8rem;line-height:1.6;margin:16px 0}.teacher-floating-link{position:fixed;z-index:90;right:18px;bottom:18px;display:flex;gap:8px;flex-wrap:wrap}.teacher-floating-link a{text-decoration:none;border-radius:12px;background:#0c668f;color:white;box-shadow:0 9px 24px #113f5e4d;padding:10px 12px;font-size:.79rem;font-weight:850}.teacher-floating-link a:last-child{background:#fff;color:#166f9b;border:1px solid #d6e6ee}
.teacher-page{font-size:15px;background:linear-gradient(160deg,#f3fbff,#f8f5ff)}.teacher-header{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;padding:15px max(20px,calc((100vw - 1180px)/2));border-bottom:1px solid #d6e9f2;background:#fff;box-shadow:0 4px 16px #0b4b7110}.teacher-header a{font-weight:850;text-decoration:none;color:#0b6d9b}.teacher-header>span{color:#6b7b8a;font-size:.8rem}.teacher-wrap{max-width:1180px;margin:auto;padding:25px 22px 70px}.teacher-hero{display:flex;align-items:center;gap:30px;padding:30px;background:linear-gradient(130deg,#e3f5ff,#fffaf0);border:1px solid #d5e8f3;border-radius:25px;margin-bottom:20px}.teacher-hero>img{width:130px;max-width:22%;height:auto;object-fit:contain;background:#fff;border-radius:18px;padding:13px}.teacher-hero h1{font-size:clamp(2rem,4vw,3.4rem);margin:7px 0 14px}.teacher-hero h1 em{font-style:normal;color:#1380b3}.teacher-hero p{max-width:750px;color:#4c6781;margin:0}.teacher-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}.teacher-benefit,.teacher-sheet,.guide-section,.guide-intro{border:1px solid #dce9f2;border-radius:21px;background:#fff;padding:23px;box-shadow:0 10px 25px #0b4b7109}.teacher-benefit strong{font-size:1.02rem;color:#155374}.teacher-benefit p{color:#587188;font-size:.85rem;margin:10px 0}.teacher-benefit a{display:inline-block;color:#0a7aa8;font-weight:850;font-size:.82rem;margin-bottom:10px}.teacher-benefit small{display:block;font-size:.74rem;color:#71849a}.teacher-sheet{margin:18px 0}.teacher-heading h2{font-size:1.6rem;margin:4px 0}.teacher-heading p{font-size:.85rem;color:#586e81}.teacher-list{padding-left:23px}.teacher-list li{padding:7px 0;line-height:1.65;color:#354f63;font-size:.88rem}.teacher-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px}.teacher-status{color:#0d785d;font-weight:780;font-size:.83rem}.teacher-important{padding:16px;border:1px solid #efd9af;background:#fff8eb;border-radius:15px;font-size:.84rem;color:#75572b;line-height:1.6}.teacher-important code{font-size:.83rem;background:#fff;padding:2px 5px;border-radius:4px}.routine-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0}.routine-grid>div{padding:15px 11px;background:#edf8fe;border-radius:13px}.routine-grid b{color:#086e9c}.routine-grid p{font-size:.78rem;margin:6px 0 0}.guide-intro{background:#e9f7fd;margin-bottom:18px;line-height:1.65}.guide-section{margin:16px 0;page-break-inside:avoid;break-inside:avoid}.guide-kicker{color:#127aa5;font-weight:900;font-size:.76rem;letter-spacing:.12em}.guide-section h2{margin:8px 0;font-size:1.55rem}.guide-section h3{margin:10px 0 5px;font-size:1rem}.guide-section p,.guide-section li{font-size:.86rem;line-height:1.63;color:#3f586c}.guide-ref{font-size:.78rem!important;color:#718295!important}.guide-evidence{background:#fff7e6;border:1px solid #f0dfbd;border-radius:11px;padding:11px 14px;font-size:.83rem;line-height:1.6}
@media(max-width:900px){.routine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-cards{grid-template-columns:1fr}.teacher-header{padding:13px 15px}}
@media(max-width:650px){.live-summary{grid-template-columns:1fr}.live-summary>div{padding:10px}.live-summary small{display:inline;margin-left:10px}.live-platform{flex-wrap:wrap}.live-platform .button{margin-left:auto}.live-build-actions .button{width:100%}.teacher-form-grid{grid-template-columns:1fr}.teacher-hero{padding:19px;gap:15px}.teacher-hero>img{width:75px;max-width:25%}.teacher-hero h1{font-size:1.75rem}.teacher-wrap{padding:17px 12px}.teacher-floating-link{position:static;margin:17px 12px 8px;justify-content:center}.teacher-floating-link a{flex:1;text-align:center}.routine-grid{grid-template-columns:1fr 1fr}.live-step{padding:12px}.live-step>span{width:32px;height:32px}}
@media print{.teacher-page{background:#fff}.teacher-header,.teacher-actions,.teacher-floating-link{display:none!important}.teacher-wrap{padding:0;max-width:none}.guide-section{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}.teacher-hero{padding:14px;box-shadow:none;background:#fff}.teacher-hero>img{width:80px}}
.card-live-tag{background:#e6f6ff;color:#0871a8;border:1px solid #cae9f8;border-radius:999px;font-size:.65rem;font-weight:900;letter-spacing:.03em;padding:4px 7px;margin-left:5px;white-space:nowrap}.lesson-card:hover .card-live-tag{background:#d8f2ff}
.live-embed{margin-top:12px;border:1px solid #cee8f2;border-radius:13px;background:#fff;padding:12px}.live-embed summary{cursor:pointer;font-size:.86rem;font-weight:830;color:#126da0}.live-embed p{font-size:.78rem;color:#677b8d;margin:8px 0}.live-embed iframe{display:block;width:100%;height:490px;min-height:300px;border:1px solid #d6e7ef;border-radius:11px;background:#fff}.live-embed[open]{margin-bottom:6px}
@media(max-width:650px){.live-embed iframe{height:560px}}

/* v6: Tutorial and Canva are one activity; design remains consistent with TAR UMT palette. */
.canva-class-root{min-width:0}.canva-activity-head{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}.canva-activity-head span{padding:7px 10px;background:#edf7ff;border:1px solid #d1e8f6;border-radius:999px;color:#205d83;font-size:.79rem;font-weight:760}
.canva-link-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;background:#eef9ff;border:1px solid #c8e8f6;border-radius:18px;padding:17px 19px;margin-bottom:17px}.canva-link-status.is-ready{background:#effbf6;border-color:#bde2d0}.canva-link-status strong{display:block;color:#155b85}.canva-link-status p{font-size:.84rem;color:#516f85;margin:4px 0 0}.canva-pending{padding:8px 12px;background:#fff9e9;color:#8b6928;border-radius:10px;font-size:.78rem;font-weight:760}
.canva-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0}.canva-steps>div{border-radius:15px;border:1px solid #dce9f5;background:#fff;padding:14px 16px;box-shadow:0 6px 19px #0f477609}.canva-steps b{color:#1b597e}.canva-steps p{font-size:.84rem;margin:6px 0 0;color:#5c7183}
.canva-compose{margin:17px 0;padding:22px!important}.canva-compose .live-label{line-height:1.5}.canva-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.canva-example,.canva-status{padding:12px 14px;border-radius:12px;background:#f2f9fe;border:1px solid #d5e8f5;color:#245c7c;font-size:.86rem;margin:13px 0}.canva-example p{margin:5px 0 0}.canva-layout-row{display:grid;grid-template-columns:1.2fr .8fr;gap:13px;margin:15px 0}.canva-layout-row h3{font-size:1.07rem}.canva-layout-row .panel-card{padding:18px!important;margin:0;overflow:hidden}.canva-layout-row p{font-size:.84rem}
.sample-slide{aspect-ratio:16/9;min-height:170px;width:100%;max-width:100%;background:linear-gradient(135deg,#fff,#eff9ff 72%,#fff8ed);border:1px solid #bfd5ea;border-radius:13px;box-shadow:0 9px 24px #10547d18;padding:14px;color:#214c70;display:flex;flex-direction:column;gap:5px;margin:11px 0 14px;overflow:hidden}.sample-slide-top{font-size:clamp(.64rem,1vw,.8rem);font-weight:900;border-bottom:2px solid #2d90bd;padding-bottom:5px}.sample-slide-name{font-size:.69rem;font-weight:800}.sample-slide-main{display:grid;grid-template-columns:1.6fr 1fr;gap:8px;min-height:0;flex:1;font-size:clamp(.55rem,.95vw,.76rem);line-height:1.7}.sample-slide-visual{background:#dcebf5;border:1px dashed #90b4cb;border-radius:7px;display:grid;place-items:center;text-align:center;font-weight:800;color:#396a8a;padding:4px}
.canva-peer-question{background:#eef8ff;padding:12px 14px;border-radius:10px;border-left:3px solid #1894d0}.canva-teacher-note{background:#edf9ff;border:1px solid #cce8f7;border-radius:12px;padding:14px 16px;color:#235d81;font-size:.84rem;margin:17px 0}.canva-privacy{background:#fff9e8;border:1px solid #f0dfb0;border-radius:12px;padding:14px 16px;color:#765b2e;font-size:.83rem;line-height:1.6;margin:17px 0}.canva-original{padding:15px}.canva-original .live-label{font-weight:730}.canva-original textarea{min-height:74px}.canva-class-root .source-detail{margin:13px 0}
@media(max-width:780px){.canva-layout-row{grid-template-columns:1fr}}
@media(max-width:600px){.canva-steps{grid-template-columns:1fr}.canva-actions .button{flex:1}.canva-link-status .button{width:100%}.sample-slide{min-height:150px}.canva-compose{padding:17px!important}}
@media print{.canva-actions,.teacher-floating-link{display:none!important}}
/* v7: accessible, concise tutorial-and-class submission page */
.canva-class-root{max-width:1020px;margin:auto}.canva-class-root .panel-title{margin-bottom:9px}.tutorial-flow{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.tutorial-flow span{background:#e6f3fc;border:1px solid #d0e6f4;color:#155b87;border-radius:99px;padding:7px 10px;font-size:.77rem;font-weight:800}.session-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.session-meta span{padding:6px 10px;background:#fff7e7;border:1px solid #f0dfbd;color:#745d33;border-radius:9px;font-size:.77rem}.tutorial-section{margin:16px 0;background:#fff;border:1px solid #dae8f2;border-radius:20px;padding:21px;box-shadow:0 10px 24px #173d6410}.tutorial-section-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:13px}.tutorial-section-head h3{font-size:1.23rem;letter-spacing:-.025em;margin:0 0 4px}.tutorial-section-head p{font-size:.84rem;color:#607181;line-height:1.55;margin:0}.step-number{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:13px;color:#fff;background:linear-gradient(140deg,#176da5,#37a8d8);font-size:.95rem;font-weight:900;box-shadow:0 5px 12px #226d9d2b}.recap-chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 12px}.resource-chip{background:#eef7ff;color:#126596;border:1px solid #d4e7f7;border-radius:10px;padding:8px 10px;text-decoration:none;font-size:.8rem;font-weight:800}.resource-chip:hover{text-decoration:underline;background:#e3f2fd}.recap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.recap-card{border:1px solid #dce9f4;border-radius:13px;background:linear-gradient(130deg,#f3f9ff,#fff);padding:12px}.recap-marker{color:#1582b4;font-size:.75rem;font-weight:900;margin-bottom:4px}.recap-card strong{font-size:.88rem}.recap-card p{font-size:.8rem;color:#5b6f82;line-height:1.55;margin:4px 0 0}.knowledge-check{background:#fff9eb;border:1px solid #f0e2c3;border-radius:14px;padding:14px}.knowledge-check>strong{display:block;font-size:.9rem}.knowledge-options{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.knowledge-option{background:#fff;border:1px solid #dfd8cd;border-radius:9px;padding:7px 12px;text-align:left;font-size:.8rem}.knowledge-option:hover{background:#edf7ff}.knowledge-option.correct{background:#e8f8ee;border-color:#94d8ac;color:#17603e}.knowledge-result{color:#526575;font-size:.78rem;margin:0}.observable{border-left:4px solid #4badd9;padding:10px 13px;background:#f1f9ff;border-radius:0 12px 12px 0}.observable strong{font-size:.85rem}.observable p{margin:4px 0 10px;font-size:.89rem}.observable p:last-child{margin-bottom:0}.ai-tools{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0}.ai-prompt-text{font:normal .81rem/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}.answer-card{padding:13px 15px;border:1px solid #d9e9f4;border-radius:13px;background:#fbfdff;margin-bottom:12px}.answer-card .live-label{margin:0}.answer-card .live-label strong{display:block;margin-bottom:8px}.why-note{font-size:.81rem;color:#566a7f;margin:9px 0 0;line-height:1.5}.why-note strong{color:#155c88}.canva-class-root .live-label textarea{font-size:.9rem}.canva-class-root .live-label input{font-size:.9rem}.submit-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:15px;align-items:start;margin-top:14px}.submission-steps{background:#f7fbff;border:1px solid #dbe9f5;border-radius:13px;padding:13px}.submission-steps ol{margin:0;padding-left:20px}.submission-steps li{font-size:.88rem;line-height:1.62;padding:3px 0}.platform-status{display:flex;justify-content:space-between;align-items:center;gap:13px;background:#edf8ff;border:1px solid #d3e7f3;border-radius:14px;padding:13px}.platform-status.not-ready{background:#fff7eb;border-color:#efd8b7}.platform-status strong{display:block}.platform-status p{font-size:.82rem;color:#5a6f81;margin:4px 0 0}.completion-check{margin:15px 0 2px;border:1px solid #d2e9e2;background:#f1fbf6;border-radius:12px;padding:12px}.completion-check label{display:flex;align-items:flex-start;gap:9px;font-weight:800;font-size:.85rem}.completion-check .tiny{margin:8px 0 0}.canva-class-root .sample-slide{max-width:100%;min-width:0;padding:12px}.canva-class-root .sample-slide-main{font-size:.83rem}.canva-class-root .sample-slide-visual{word-break:break-word}.peer-section .canva-teacher-note{margin-top:13px}.source-pre{font-size:.76rem;max-height:360px;overflow:auto;white-space:pre-wrap}.canva-class-root textarea{resize:vertical}
@media(max-width:750px){.recap-grid{grid-template-columns:1fr}.submit-grid{grid-template-columns:1fr}.tutorial-section{padding:15px}.tutorial-flow{gap:4px}.tutorial-flow span{font-size:.72rem;padding:6px 8px}.platform-status{flex-direction:column;align-items:flex-start}.canva-class-root .sample-slide{max-width:420px}.tutorial-section-head h3{font-size:1.13rem}}

/* v8 — clear student instructions, official Canva QR codes, referenced ebook pages */
.first-steps{border:1px solid #b4d5e7;border-left:6px solid #f0b932;background:#f5fbff;border-radius:20px;padding:21px;margin:15px 0 22px;box-shadow:0 9px 25px #13547a0c}
.first-steps-head{margin-bottom:12px}.start-label{font-size:.68rem;letter-spacing:.11em;font-weight:900;color:#0e6699;display:block;margin-bottom:5px}.first-steps-head>strong{font-size:1.28rem;display:block;color:#143b5b}.first-steps-head p{font-size:.9rem;color:#426379;margin:4px 0 0}
.first-steps-grid{list-style:none;padding:0;margin:15px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:startstep}.first-steps-grid li{border:1px solid #d5e6f1;border-radius:13px;background:white;padding:15px;display:flex;flex-direction:column;gap:6px}.first-steps-grid li>b{display:block;font-size:.94rem;color:#0c608f}.first-steps-grid li span{font-size:.84rem;line-height:1.55;color:#40566c}.first-steps-grid li strong{color:#1a496b}
.first-steps-actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center}.first-steps-actions>span{font-size:.8rem;font-weight:800;color:#456b7f}.reading-inline{margin:9px 0 17px;border:1px solid #d4e7f2;background:white;padding:13px 15px;border-radius:13px;font-size:.88rem;line-height:1.65;color:#30465e}.reading-inline a{color:#0a6998;font-weight:850;text-underline-offset:3px}
.tutorial-priority{background:#eff9ff;border:1px solid #b9dcec;border-left:5px solid #157eaa;border-radius:15px;padding:16px 18px;margin:17px 0 22px}.tutorial-priority>strong{display:block;font-size:.77rem;font-weight:900;letter-spacing:.09em;color:#145a85}.tutorial-priority p{font-size:.9rem;color:#344e66;margin:8px 0 0;line-height:1.7}.tutorial-priority p b{color:#095b8a}
.ebook-guide{border:1px solid #d1e5f0;background:linear-gradient(110deg,#eff8ff,#ffffff);border-radius:17px;padding:17px;margin:16px 0 20px}.ebook-guide-top{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:20px;align-items:start}.ebook-guide-content{min-width:0}.ebook-tag{font-size:.72rem;font-weight:900;letter-spacing:.08em;color:#0e6e99}.ebook-guide h4{font-size:1.03rem;letter-spacing:-.015em;color:#173b5b;margin:6px 0 12px}.ebook-guide p{font-size:.83rem;line-height:1.6;color:#3a566d;margin:8px 0}.ebook-guide .ebook-reason{font-size:.86rem;color:#29455e}.ebook-guide .ebook-page-note{font-size:.73rem;color:#61778a;margin:9px 0}.ebook-thumbnail{display:flex;flex-direction:column;gap:7px;text-decoration:none;background:white;border:1px solid #d8e6ef;border-radius:12px;padding:8px;box-shadow:0 6px 16px #0a4d7512}.ebook-thumbnail img{display:block;max-width:100%;width:100%;height:195px;object-fit:contain;object-position:center top;border:1px solid #e7ecf1;background:#fff}.ebook-thumbnail span{font-size:.7rem;color:#0e6898;text-align:center;font-weight:850}.ebook-thumbnail:hover{transform:translateY(-2px);border-color:#9ccbe3}
.qr-class-card{display:grid;grid-template-columns:minmax(0,1fr) 166px;align-items:center;gap:18px;background:#f4fbff;border:1px solid #bcddec;border-radius:17px;padding:17px;margin:15px 0 19px}.qr-class-kicker{font-size:.68rem;font-weight:900;letter-spacing:.08em;color:#0e719b}.qr-class-card h4{font-size:1.1rem;margin:5px 0 10px}.qr-class-card p{font-size:.86rem;margin:5px 0 10px;color:#344f65}.qr-class-card strong{color:#135b85}.qr-image-link{background:white;border:1px solid #cce4f1;border-radius:12px;padding:8px;display:grid;gap:6px;text-align:center;text-decoration:none;box-shadow:0 9px 15px #0b547515}.qr-image-link img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.qr-image-link span{font-size:.77rem;color:#0d6c98;font-weight:900}
.submission-steps ol{padding-left:27px}.submission-steps ol li{margin:12px 0;line-height:1.72;position:relative;padding-left:2px}.submission-steps ol li::marker{color:#0d77a8;font-weight:900}.submission-steps ol li strong{color:#145581}
.answer-card{border-left:4px solid #1893c1}.answer-card label>strong{color:#183a57}.why-note{background:#f0f8fc;border-radius:9px;padding:9px 12px}.why-note strong{color:#0e6699}
.practical-sequence{background:#f6fbff;border:1px solid #c5e0ee;border-radius:14px;padding:15px 18px;margin:12px 0 18px}.practical-sequence>strong{display:block;color:#0f638e;font-size:.77rem;letter-spacing:.065em}.practical-sequence p{font-size:.88rem;color:#355268;margin:7px 0 0}.practical-sequence b{color:#0b6089}.practical-sequence em{font-style:normal;font-weight:800;background:#fff2c7;color:#715011;padding:1px 3px;border-radius:4px}
.canva-ready-mini{display:inline-flex;align-items:center;background:#e8f7ef;color:#116a4a;font-size:.7rem;font-weight:880;border:1px solid #c1e6d3;border-radius:8px;padding:4px 7px;margin:7px 0 0}.card-live-tag{opacity:.8}
.lecturer-qr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:16px 0}.lecturer-qr-item{display:flex;gap:13px;align-items:center;background:#f4faff;border:1px solid #d4e7f1;border-radius:13px;padding:12px}.lecturer-qr-item img{width:90px;height:90px;object-fit:contain;background:white;border-radius:9px;padding:4px}.lecturer-qr-item strong{font-size:.91rem}.lecturer-qr-item p{font-size:.82rem;margin:5px 0}.lecturer-qr-item a{font-weight:800;color:#0e70a1}
@media(max-width:750px){.ebook-guide-top{grid-template-columns:minmax(0,1fr) 130px;gap:10px}.ebook-thumbnail img{height:145px}.qr-class-card{grid-template-columns:minmax(0,1fr) 130px;gap:10px}.first-steps-grid{grid-template-columns:1fr}.lecturer-qr-grid{grid-template-columns:1fr}}
@media(max-width:475px){.qr-class-card{grid-template-columns:1fr}.qr-image-link{max-width:175px;justify-self:center}.ebook-guide-top{grid-template-columns:1fr}.ebook-thumbnail{flex-direction:row;max-width:100%;align-items:center}.ebook-thumbnail img{height:105px;width:75px;flex-shrink:0}.ebook-thumbnail span{max-width:165px;text-align:left}.first-steps{padding:15px}.qr-class-card{padding:13px}.tutorial-priority{padding:14px}}
@media print{.qr-class-card,.ebook-guide,.first-steps,.tutorial-priority{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* Prevent long source URLs or interactive controls from expanding a phone-width lesson. */
.lesson-shell,.lesson-layout,.lesson-panel{min-width:0;max-width:100%}.lesson-panel,.step-row,.practical-sequence{overflow-wrap:anywhere}.step-row>div{min-width:0}
@media(max-width:920px){.lesson-layout{grid-template-columns:minmax(0,1fr)!important}.lesson-nav{max-width:100%;min-width:0;width:100%;overflow-x:auto;overscroll-behavior-x:contain}.lesson-panel{width:100%;min-width:0}}