:root{font-family:"Segoe UI",Tahoma,sans-serif;color:#233044;background:#eef4ff;--blue:#1e88e5;--teal:#168d83}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:16px;padding:15px 24px;color:white;background:linear-gradient(120deg,#166ac1,#138e89)}header p{font-size:11px;letter-spacing:1.3px;margin:0 0 4px}h1{font-size:23px;margin:0}header>div{flex:1}.home{font-size:30px;color:white;text-decoration:none}button{font:inherit;cursor:pointer;border:1px solid #cbdcec;border-radius:9px;padding:9px 12px;background:white;color:#23435d}button:hover{background:#eaf4ff}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #edac33;outline-offset:3px}button:disabled{opacity:.55;cursor:default}header button{background:#ffffff18;color:white;border-color:#ffffff60}main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;padding:16px;height:calc(100dvh - 86px)}.lesson,.workspace{background:white;border:1px solid #d9e6f4;border-radius:16px;box-shadow:0 10px 30px #2368ad12}.lesson{padding:20px;overflow:auto}.badge{display:inline-block;color:var(--teal);background:#e8f8f5;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:700}p{line-height:1.55}.intro p{font-size:14px}.progress{font-size:12px;color:#52708d}progress{width:100%;height:7px;accent-color:var(--teal);margin:8px 0 14px}h2{font-size:20px;margin:6px 0 12px}#instruction{font-size:15px}#answers{display:grid;gap:9px}#answers button{text-align:left}#answers button.selected{border:2px solid var(--blue);background:#edf6ff}.primary{background:var(--blue);color:white;border:0;width:100%;margin-top:14px}.primary:hover{background:#1266ba}details{font-size:13px;border-top:1px solid #e2eaf3;padding:13px 0;margin-top:14px}summary{cursor:pointer;font-weight:600}.note{font-size:11px;color:#64778d}#feedback{font-size:14px;min-height:22px}#feedback.ok{color:#13776c}#feedback.error{color:#b32638}.workspace{min-width:0;display:flex;flex-direction:column;overflow:hidden}.workspace-head{display:flex;align-items:center;gap:12px;padding:14px 16px}.workspace-head>div{flex:1}.workspace-head p{font-size:12px;margin:5px 0 0;color:#60758b}nav{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}nav button{font-size:12px}nav button.active{background:#e1f3ff;border-color:var(--blue)}iframe#meca{width:100%;flex:1;min-height:330px;border:0}.legend{padding:10px 14px;background:#f6faff;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11px;color:#526a83}table{width:100%;border-collapse:collapse;font-size:12px}td,th{padding:8px;border:1px solid #d9e4ed;text-align:left}th{background:#f0f6fd}label{font-size:13px}input{font:inherit;padding:8px;border:1px solid #b5c9dc;border-radius:7px;width:100%;margin:5px 0 10px}dialog{border:0;border-radius:16px;max-width:min(1100px,95vw);padding:24px;box-shadow:0 20px 70px #152a4e50}dialog::backdrop{background:#10233c99}dialog img{width:100%;height:auto}dialog form{text-align:right}dialog p{font-size:13px;color:#596f87}[hidden]{display:none!important}@media(max-width:900px){main{grid-template-columns:290px minmax(0,1fr);padding:8px;gap:8px}.lesson{padding:14px}header{padding:12px;gap:8px}h1{font-size:19px}}@media(max-width:650px){header{flex-wrap:wrap}header>div{min-width:75%}main{height:auto;display:flex;flex-direction:column}.lesson{overflow:visible}.workspace{height:70dvh;min-height:530px}.note{font-size:12px}}