/* LauPeh joyful homepage. Original CSS geometry, device fonts and the owner's existing mascot. */
.home-skip{position:fixed;top:12px;left:12px;z-index:100;background:#123c51;color:white;padding:14px 20px;border-radius:8px;transform:translateY(-180%)}
.home-skip:focus{transform:none}.site-header{position:relative;z-index:10;min-height:94px;max-width:none;border:0;border-bottom:1px solid #dde7ec;border-image:none;background:#fff;padding:14px max(24px,calc((100% - 1160px)/2));gap:20px}
.site-header .brand.brand-with-mascot{font-size:28px;color:#163d51;gap:10px}.site-header .brand-logo{width:56px;height:56px;flex-basis:56px}.site-header .brand small{font-size:12px;letter-spacing:2.3px;line-height:1.4;color:#5d7684}
.site-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.site-nav>a{display:inline-flex;align-items:center;min-height:46px;text-decoration:none;font-size:14px;font-weight:650;color:#435c6c}.site-nav .nav-parents{background:#0b716a;color:#fff;border:1px solid #0b716a;border-radius:10px;padding:0 20px}.site-nav>a:hover{text-decoration:underline;text-underline-offset:5px}
.header-tools{position:relative}.header-tools summary{cursor:pointer;min-height:46px;display:flex;align-items:center;padding:0 13px;color:#435c6c;border:1px solid #d8e3e8;border-radius:10px;font-size:14px;font-weight:600;list-style:none}.header-tools summary::-webkit-details-marker{display:none}.header-tools summary:focus-visible{outline:3px solid #276ac0;outline-offset:4px}.header-tools[open] summary{background:#ecf6f4;border-color:#6caba4}.header-tools .header-right{position:absolute;right:0;top:54px;min-width:215px;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:white;border:1px solid #d9e5ea;border-radius:14px;box-shadow:0 14px 40px #183c511f}.header-tools .quiet{font-size:14px;min-height:44px;box-shadow:none;border-radius:8px;border-width:1px;text-align:left}
body[data-subject=home]{background-color:#e7f7ff;background-image:radial-gradient(circle,#71bed433 1.5px,transparent 2px);background-size:24px 24px;color:#193c50}
body[data-subject=home] .site-header{border-bottom:5px solid transparent;border-image:linear-gradient(90deg,#ff7967 0 25%,#ffc940 25% 50%,#40cba5 50% 75%,#9c7cf0 75%) 1}
body[data-subject=home] .nav-worlds{color:#087166}
body[data-subject=home] .site-nav .nav-parents{background:#7350b7;border-color:#7350b7;box-shadow:0 3px 0 #51358b;border-radius:14px}
body[data-subject=home] .header-tools summary{background:#fff6d9;border-color:#f3cf68;border-radius:14px}
body[data-subject=home] .learner-strip{max-width:1160px;margin:20px auto 0;background:#fff8d9;border:2px solid white;border-radius:16px;padding:13px 18px;color:#665020;font-size:14px;line-height:1.5;gap:10px;box-shadow:none}
body[data-subject=home] .learner-strip a{color:#086c62;text-decoration:none;border-bottom:1px solid #afd4cd;padding:3px 0}
body[data-subject=home] main{max-width:1200px;padding:24px 20px 10px}
#subjectHub{--hub-ink:#193c50;color:var(--hub-ink)}
#subjectHub .hub-welcome{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:0;background:#ffe783;border:3px solid white;border-radius:30px;box-shadow:0 7px 0 #e8c966,0 14px 30px #24587510;padding:0;min-height:290px;height:auto;overflow:hidden}
#subjectHub .hub-intro{width:auto;min-width:0;padding:34px 40px;z-index:1}
#subjectHub .eyebrow{font-size:12px;font-weight:750;letter-spacing:1.8px;color:#416c79;line-height:1.6}
#subjectHub .hub-welcome h1{font-size:clamp(36px,4.2vw,56px);line-height:1.13;letter-spacing:-1.6px;margin:13px 0 17px;color:#193c50;font-weight:800;max-width:none}
#subjectHub .hub-welcome h1 span{color:#7343ad}
#subjectHub .hub-welcome p{font-size:16px;line-height:1.7;color:#5b501f;margin:0;max-width:none}
.hub-welcome-notes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:14px;font-weight:750;color:#4c4432}.hub-welcome-notes span{background:#fff9dd;border:1px solid #f3cc53;border-radius:30px;padding:7px 12px}.hub-welcome-notes span+span{color:#64399b;background:#f4e7ff;border-color:#d3b1ec;padding:7px 12px}
#subjectHub .hub-companion{position:relative;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:18px 20px 12px;background:#ffd7e4;background-image:radial-gradient(circle at 100% 0,#ffc1d7 0 100px,transparent 101px),radial-gradient(circle at 0 100%,#ffeaf1 0 85px,transparent 86px);border-left:3px solid white}
.companion-greeting{font-size:15px;line-height:1.5;text-align:center;position:relative;z-index:1;color:#643a62}.companion-greeting strong{display:block;font-weight:750}.companion-greeting span{font-size:14px;color:#754561}
#subjectHub .mascot-home{position:relative;inset:auto;align-self:center;width:240px;height:240px;flex:0 0 auto;max-width:100%;margin:-1px 0 -5px;opacity:1}
#subjectHub .mascot-home .mascot-sheet{width:240px;height:240px;left:50%;transform:translateX(-50%)}
#subjectHub .welcome-character{width:240px;height:240px;max-width:100%;position:relative;inset:auto;align-self:center;margin:0;animation:none}
.companion-caption{font-size:13px;color:#754561;line-height:1.5}
#subjectHub .hub-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:31px 0 18px}
#subjectHub .hub-section-heading h2{font-size:25px;line-height:1.3;letter-spacing:-.6px;margin:5px 0 0;color:#193c50}.hub-section-heading>p{font-size:14px;color:#5c7480;margin:0 0 3px;line-height:1.5}
#subjectHub .subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#subjectHub .subject-card{--accent:#a93329;--wash:#fff0e5;--edge:#eeaa91;--banner:#ff906f;--banner-ink:#64251d;display:flex;flex-direction:column;gap:0;min-width:0;background:var(--wash);border:3px solid white;border-radius:25px;padding:0;box-shadow:0 6px 0 var(--edge),0 10px 16px #163b5108;overflow:hidden;text-decoration:none;color:#193c50;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#subjectHub .subject-english{--accent:#155d99;--wash:#e1f3ff;--edge:#83c3e6;--banner:#6bc6f2;--banner-ink:#17496e}#subjectHub .subject-bahasa{--accent:#116c48;--wash:#e5f8dc;--edge:#93cc85;--banner:#8ed878;--banner-ink:#225329}#subjectHub .subject-maths{--accent:#6440a1;--wash:#f0e6ff;--edge:#b79bdf;--banner:#bc9cf2;--banner-ink:#493079}
#subjectHub .subject-card:hover{transform:translateY(-4px);border-color:white;box-shadow:0 9px 0 var(--edge),0 18px 25px #17394e18}#subjectHub .subject-card:focus-visible{outline:3px solid #155e8b;outline-offset:4px}
#subjectHub .subject-top{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--banner);background-image:radial-gradient(circle at 100% 0,#ffffff32 0 60px,transparent 61px);border-bottom:2px solid white;padding:19px 20px;min-height:112px;margin:0}
#subjectHub .subject-symbol{font-size:49px;font-weight:850;letter-spacing:-1.5px;color:var(--banner-ink);line-height:1.15;text-shadow:0 2px 0 #ffffff66}.subject-mandarin .subject-symbol{letter-spacing:0!important}
#subjectHub .subject-badge{font-size:12px;line-height:1.4;color:var(--banner-ink);padding:5px 8px;background:#ffffffb8;border-radius:20px;font-weight:650}
.subject-body{padding:22px 20px 18px;display:flex;flex-direction:column;flex:1;min-width:0}
#subjectHub .subject-native{font-size:14px;line-height:1.5;font-weight:650;color:var(--accent)}
#subjectHub .subject-card h3{font-size:25px;letter-spacing:-.65px;line-height:1.3;margin:5px 0 0;color:#193c50;min-height:0}
#subjectHub .subject-card p{font-size:16px;line-height:1.65;margin:13px 0 16px;color:#425e6b}
#subjectHub .subject-tags{font-size:12px;gap:6px;margin-top:auto;padding:0 0 21px;color:#566f7d;display:flex;flex-wrap:wrap}
#subjectHub .subject-tags span{border:1px solid #ffffff;border-radius:8px;background:#ffffff91;padding:4px 7px;line-height:1.4}
#subjectHub .subject-go{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;border:1px solid var(--accent);border-radius:13px;padding:12px 8px;background:var(--accent);color:white;font-size:14px;font-weight:750;line-height:1.4;text-align:center}
#subjectHub .hub-parent{display:flex;align-items:center;gap:20px;margin:30px 0 0;padding:25px 28px;background:#fff0af;border:3px solid white;border-radius:24px;box-shadow:0 5px 0 #e8ce77}.parent-star{color:#80501b;background:#ffce49;display:grid;place-items:center;border-radius:15px;flex:0 0 58px;height:58px;font-size:30px}
#subjectHub .hub-parent>div{flex:1;min-width:0}#subjectHub .hub-parent .eyebrow{font-size:11px;color:#657b87}#subjectHub .hub-parent h2{font-size:19px;line-height:1.45;margin:4px 0 6px;letter-spacing:-.25px;color:#193c50}#subjectHub .hub-parent p{font-size:14px;line-height:1.7;color:#5d7481;margin:0;max-width:580px}#subjectHub .hub-parent .quiet{background:#fff;border:2px solid #e6c565;box-shadow:0 3px 0 #e6c565;border-radius:13px;min-height:46px;color:#205b66;font-size:14px;white-space:normal;text-align:center;justify-content:center;padding:11px 17px;margin:0}
body[data-subject=home] .bottom-note,body[data-subject=home] .learning-footer,body[data-subject=home] #voiceNotice{display:none!important}
.home-footer{display:none}body[data-subject=home] .home-footer{display:flex;align-items:center;gap:20px;justify-content:space-between;max-width:1160px;margin:24px auto 0;border-top:2px dashed #87c8db;border-radius:0;padding:23px 0 30px;background:none;color:#5c7480}
.home-footer strong{font-size:16px;font-weight:800;color:#254b61}.home-footer strong span{font-weight:400;margin-left:5px;font-size:13px}.home-footer p{font-size:13px;margin:6px 0 0}.home-footer nav{display:flex;gap:22px;flex-wrap:wrap}.home-footer a{font-size:13px;line-height:1.5;color:#526e7e;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}.home-footer a:hover{text-decoration:underline}
@media(max-width:1200px){body[data-subject=home] .learner-strip,body[data-subject=home] .home-footer{margin-left:20px;margin-right:20px}}
@media(max-width:1024px){#subjectHub .subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#subjectHub .subject-top{min-height:95px;padding:19px 23px}.subject-body{padding:22px 23px}#subjectHub .hub-intro{padding:30px}#subjectHub .hub-parent{flex-wrap:wrap}#subjectHub .hub-parent .quiet{margin-left:78px}.site-nav{gap:15px}}
@media(max-width:700px){.site-header{padding:13px 20px;gap:12px;min-height:80px}.site-header .brand.brand-with-mascot{font-size:24px;gap:7px}.site-header .brand-logo{width:46px;height:46px;flex-basis:46px}.site-header .brand small{font-size:10px;letter-spacing:1.6px}.site-nav{gap:9px;margin-left:auto}.site-nav .nav-worlds{display:none}.site-nav .nav-parents{padding:0 12px;font-size:13px}.header-tools summary{font-size:13px;padding:0 10px}body[data-subject=home] main{padding-top:18px}body[data-subject=home] .learner-strip{font-size:13px;margin-top:15px;padding:11px 14px}#subjectHub .hub-welcome{grid-template-columns:minmax(0,1.4fr) minmax(125px,.75fr);min-height:240px;border-radius:19px}#subjectHub .hub-intro{padding:25px 20px}#subjectHub .hub-welcome h1{font-size:32px;letter-spacing:-1px}#subjectHub .hub-welcome p{font-size:15px;line-height:1.65}#subjectHub .hub-welcome p br{display:none}#subjectHub .eyebrow{font-size:11px;letter-spacing:1.3px}.hub-welcome-notes{font-size:12px;gap:8px;margin-top:18px}.hub-welcome-notes span+span{padding-left:8px}#subjectHub .hub-companion{padding:18px 7px;background-size:auto}.companion-greeting{font-size:12px}.companion-greeting span{font-size:12px}.companion-caption{font-size:12px;text-align:center}#subjectHub .mascot-home{width:145px;height:165px;max-width:100%;margin:0}#subjectHub .mascot-home .mascot-sheet{width:165px;height:165px}#subjectHub .welcome-character{width:145px;height:165px}#subjectHub .hub-section-heading{margin:26px 0 15px;align-items:start}#subjectHub .hub-section-heading h2{font-size:23px}#subjectHub .hub-section-heading>p{display:none}#subjectHub .subject-grid{gap:16px}#subjectHub .subject-top{padding:18px;min-height:95px}#subjectHub .subject-symbol{font-size:38px}.subject-body{padding:20px 18px}#subjectHub .subject-card h3{font-size:22px}#subjectHub .subject-card p{font-size:15px}#subjectHub .subject-native{font-size:12px}#subjectHub .subject-tags{font-size:12px}#subjectHub .hub-parent{padding:22px 20px;gap:16px}.parent-star{flex-basis:44px;height:44px;font-size:25px}#subjectHub .hub-parent>div{flex-basis:calc(100% - 60px)}#subjectHub .hub-parent .quiet{margin-left:60px}body[data-subject=home] .home-footer{flex-direction:column;align-items:flex-start;gap:13px;margin-top:19px}.home-footer nav{gap:19px}}
@media(max-width:480px){.site-header{padding:12px 16px}.site-nav{gap:7px}.site-nav .nav-parents{font-size:12px;padding:0 9px}.header-tools summary{font-size:12px;padding:0 8px}.site-header .brand-logo{width:39px;height:39px;flex-basis:39px}.site-header .brand.brand-with-mascot{font-size:22px}.site-header .brand small{font-size:9px;letter-spacing:1.2px}body[data-subject=home] main{padding:16px}body[data-subject=home] .learner-strip,body[data-subject=home] .home-footer{margin-left:16px;margin-right:16px}#subjectHub .hub-welcome{grid-template-columns:minmax(0,1fr) 110px;min-height:245px}#subjectHub .hub-intro{padding:22px 17px}#subjectHub .hub-welcome h1{font-size:29px}#subjectHub .hub-welcome p{font-size:14px}#subjectHub .hub-intro>.eyebrow{font-size:10px;letter-spacing:1px}#subjectHub .hub-companion{padding:18px 4px}.companion-greeting strong{font-size:12px}.companion-greeting span,.companion-caption{display:none}#subjectHub .mascot-home{width:110px;height:145px}#subjectHub .mascot-home .mascot-sheet{width:145px;height:145px}#subjectHub .welcome-character{width:110px;height:145px}.hub-welcome-notes{gap:5px;font-size:12px}.hub-welcome-notes span+span{border:0;padding:0}#subjectHub .subject-grid{grid-template-columns:1fr}#subjectHub .subject-card{display:grid;grid-template-columns:85px minmax(0,1fr);border-radius:16px}#subjectHub .subject-top{padding:19px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;gap:13px;border-bottom:0;border-right:1px solid var(--edge)}#subjectHub .subject-symbol{font-size:32px}#subjectHub .subject-badge{font-size:12px;text-align:center}#subjectHub .subject-body{padding:19px 17px}#subjectHub .subject-card h3{font-size:23px}#subjectHub .subject-card p{font-size:15px;margin:10px 0 12px}#subjectHub .subject-native{font-size:12px}#subjectHub .subject-tags{padding-bottom:16px}#subjectHub .subject-go{font-size:14px}#subjectHub .hub-parent{display:block}#subjectHub .hub-parent .parent-star{display:none}#subjectHub .hub-parent .quiet{margin:17px 0 0}#subjectHub .hub-parent h2{font-size:20px}}
@media(max-width:360px){.site-header .brand.brand-with-mascot{font-size:21px}.site-nav{width:100%;margin:0;justify-content:space-between}.site-nav .nav-worlds{display:inline-flex;font-size:12px}.header-tools .header-right{right:0}#subjectHub .hub-welcome{grid-template-columns:1fr}#subjectHub .hub-companion{display:none}#subjectHub .hub-welcome h1{font-size:32px}.hub-welcome-notes{gap:12px}#subjectHub .subject-card{grid-template-columns:75px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#subjectHub .subject-card{transition:none}#subjectHub .subject-card:hover{transform:none}}

/* Colourful details stay readable on narrow screens. */
@media(max-width:700px){#subjectHub .hub-welcome{border-radius:24px}.hub-welcome-notes span,.hub-welcome-notes span+span{padding:6px 10px;border-width:1px}#subjectHub .subject-native{font-size:13px}#subjectHub .subject-card{border-radius:22px}#subjectHub .subject-top{min-height:105px}#subjectHub .subject-card h3{font-size:24px}}
@media(max-width:480px){#subjectHub .hub-welcome{grid-template-columns:minmax(0,1fr) 115px}#subjectHub .hub-intro{padding:24px 17px}#subjectHub .hub-welcome h1{font-size:34px;letter-spacing:-1px}#subjectHub .hub-welcome p{font-size:15px}.hub-welcome-notes{gap:7px;font-size:12px}#subjectHub .subject-card{grid-template-columns:88px minmax(0,1fr)}#subjectHub .subject-top{border-right:2px solid white;border-bottom:0;min-height:100%}#subjectHub .subject-badge{padding:5px;font-size:12px}#subjectHub .subject-symbol{font-size:33px}#subjectHub .subject-go{min-height:48px}#subjectHub .hub-parent{border-radius:22px}}
@media(max-width:360px){#subjectHub .hub-welcome{grid-template-columns:1fr}#subjectHub .hub-companion{display:flex;flex-direction:row;gap:5px;padding:8px 14px;border-left:0;border-top:3px solid white}#subjectHub .hub-companion .mascot-home{width:105px;height:105px;margin:0}#subjectHub .hub-companion .mascot-sheet{width:105px;height:105px}#subjectHub .hub-companion .welcome-character{width:105px;height:105px}.companion-greeting strong{font-size:14px}.companion-greeting span{display:block;font-size:12px}#subjectHub .subject-card{grid-template-columns:75px minmax(0,1fr)}}