@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{--navy:#091b35;--navy-2:#123664;--blue:#276bf4;--cyan:#11b9b1;--mint:#dcf8f4;--cloud:#f3f7fc;--ink:#142640;--muted:#6b7d94;--line:#dce7f2;--gold:#f2b33d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cloud)!important;color:var(--ink)!important;font-family:Manrope,system-ui,sans-serif!important;overflow-x:hidden}body:before{content:"";position:fixed;z-index:-2;inset:0;background:radial-gradient(circle at 90% 0,#d9edff 0,transparent 26rem),radial-gradient(circle at 3% 30%,#e3fbf5 0,transparent 24rem)}
main{max-width:1260px!important;padding:18px 20px 72px!important}.top{position:sticky;top:12px;z-index:10;margin-bottom:22px;padding:10px 12px 10px 17px;border:1px solid #ffffffd9!important;border-radius:18px!important;background:#fffffff0!important;box-shadow:0 12px 35px #18375a16;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:9px;color:var(--navy)!important;font-family:"Space Grotesk",sans-serif!important;font-weight:800!important;letter-spacing:.02em}.brand:before{content:"◫";display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;box-shadow:0 8px 16px #276bf447}.nav button,.tabs button{border:1px solid transparent!important;border-radius:10px!important;font-weight:700!important;color:#49607d!important;transition:all .22s ease}.nav button:hover,.tabs button:hover{color:var(--blue)!important;background:#ecf3ff!important;transform:translateY(-1px)}.primary{border:0!important;background:linear-gradient(135deg,#276bf4,#13afa9)!important;color:#fff!important;box-shadow:0 8px 19px #276bf43b;transition:transform .22s ease,box-shadow .22s ease}.primary:hover{transform:translateY(-2px);box-shadow:0 13px 24px #276bf44d}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:58px clamp(28px,6vw,76px)!important;min-height:350px;border:0!important;border-radius:30px!important;background:linear-gradient(127deg,#071a35 0%,#123b72 54%,#0e8d94 100%)!important;box-shadow:0 22px 55px #16375e36;color:white!important;animation:project-rise .7s both}.hero:before{content:"";position:absolute;z-index:-1;width:410px;height:410px;right:-105px;top:-188px;border-radius:50%;border:1px solid #ffffff2c;box-shadow:0 0 0 38px #ffffff0b,0 0 0 78px #ffffff09}.hero:after{content:"";position:absolute;z-index:-1;width:155px;height:155px;left:55%;bottom:-76px;border-radius:50%;background:#2fe0d844;filter:blur(2px);animation:project-float 4s ease-in-out infinite}.hero h1{max-width:760px;font-family:"Space Grotesk",sans-serif!important;font-size:clamp(2.5rem,5vw,4.7rem)!important;letter-spacing:-.06em;line-height:1.02;margin:11px 0!important}.hero h1:before{content:"●  LOYB206 · PM LEARNING HUB";display:block;width:max-content;max-width:100%;margin-bottom:15px;padding:6px 10px;border:1px solid #a0fff02c;border-radius:999px;background:#30d6cf1a;color:#c9fffb;font:800 .7rem/1 Manrope,sans-serif;letter-spacing:.08em}.hero p{max-width:675px;color:#d6e9ff!important;font-size:1.07rem}.hero p:after{content:"Boshlang → Rejalang → Ijro eting → Nazorat qiling";display:block;margin-top:25px;color:#b8f3ec;font-weight:800;font-size:.82rem;letter-spacing:.03em}
.grid{gap:17px!important;margin-top:25px!important}.card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:220px;padding:20px!important;border:1px solid #dfe9f3!important;border-radius:20px!important;background:linear-gradient(145deg,#fff,#f9fbfe)!important;box-shadow:0 9px 24px #173d6d0e!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:project-rise .55s both}.card:before{content:"";position:absolute;right:-40px;top:-42px;width:116px;height:116px;border-radius:50%;background:#ddebff;opacity:.9}.card:nth-child(3n+2):before{background:#d7f6f1}.card:nth-child(3n):before{background:#fff1c9}.card:hover{transform:translateY(-7px);border-color:#91c3ff!important;box-shadow:0 20px 38px #183b6b20!important}.card small{position:relative;display:flex;align-items:center;gap:8px;color:#3672bb!important;font-size:.72rem;font-weight:800}.card small:before{content:"";display:block;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#276bf4,#16b6b1);box-shadow:0 6px 13px #276bf43b}.card h2{position:relative;margin:21px 0 15px!important;font-family:"Space Grotesk",sans-serif;font-size:1.13rem!important;color:var(--navy)}.tag{position:relative;align-self:flex-start;margin-top:auto;background:#eef5ff!important;color:#356aae!important;border-radius:999px!important;font-weight:800!important;letter-spacing:.025em}.card:after{content:"→";position:absolute;right:19px;bottom:13px;color:#276bf4;font-size:1.25rem;font-weight:800;transition:transform .22s}.card:hover:after{transform:translateX(5px)}
.panel{border:1px solid #dce7f1!important;border-radius:26px!important;background:#fffffff2!important;box-shadow:0 18px 50px #183b6717!important;animation:project-rise .45s both}.panel h1{font-family:"Space Grotesk",sans-serif;color:var(--navy);letter-spacing:-.04em}.panel>p{color:#58708b}.back{color:#276bf4!important;font-weight:800!important}.tabs{padding:6px;border:1px solid #e0e9f3;border-radius:15px;background:#f7faff}.tabs button.active{background:#123866!important;color:#fff!important;box-shadow:0 6px 14px #1238662b}.reading h3{color:#123d72}.reading p{color:#405772}.materials,.method,.game{border-color:#dbe7f3!important;border-radius:17px!important;background:#fbfdff!important}.materials a{padding:11px 13px;border:1px solid #dce8f5;border-radius:11px;background:#fff;color:#276bf4!important;text-decoration:none;font-weight:800;transition:.2s}.materials a:before{content:"↗  ";font-weight:900}.materials a:hover{display:block;transform:translateX(4px);background:#f3f8ff;border-color:#8ebdff}.method{border-left:5px solid #16acae!important}.method strong{color:#123866}.game{background:linear-gradient(135deg,#edf9f8,#edf4ff)!important}.result,.notice{font-weight:700}.table th{background:#edf4fc;color:#284562}.table td,.table th{border-bottom-color:#e5edf5!important}input,select,textarea{border-color:#cfddeb!important;border-radius:11px!important}input:focus,select:focus,textarea:focus{border-color:#2b91ea!important;box-shadow:0 0 0 4px #2b91ea14!important}
@keyframes project-rise{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}@keyframes project-float{50%{transform:translateY(-10px) rotate(3deg)}}@media(max-width:560px){main{padding:13px 12px 45px!important}.top{top:7px;border-radius:14px}.brand{font-size:.88rem}.nav button:not(.primary){display:none}.hero{min-height:390px;padding:37px 25px!important;border-radius:24px!important}.hero h1{font-size:2.55rem!important}.grid{grid-template-columns:1fr!important}.card{min-height:190px}.table{display:block;overflow-x:auto}}
.lecture-figure{margin:24px 0;padding:11px;border:1px solid #dce8f5;border-radius:17px;background:#f8fbff;box-shadow:0 9px 20px #183b6710}.lecture-figure img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:10px;background:#fff}.lecture-figure figcaption{padding:10px 4px 2px;color:#506984;font-size:.88rem;font-weight:700}