.hero{isolation:isolate}.hero-copy{width:49%;z-index:6;transform:translateY(-3vh)}.hero h1{font-size:clamp(54px,7.5vw,108px)}.lab{right:8vw;top:8%;width:min(44vw,650px);height:70%;z-index:5}.moon-orbit{right:0;top:0;width:205px;height:205px;animation:none;border-color:#c7cfcb}.moon{right:auto;top:-21px;left:81px;width:42px;height:42px;background:#c9cfcc;box-shadow:none;transform-origin:21px 123px;animation:moonTravel 8s linear infinite}.compass{right:calc(48% + 336px);top:auto;bottom:calc(12% - 168px)}.pluspop{left:34.5%;bottom:54.5%;transform:translate(-50%,50%);font-size:0;color:var(--coral);animation:gradeBreath 2.2s ease-in-out infinite}.pluspop::before{content:"A";font-size:30px;font-weight:950;line-height:1}.pluspop::after{content:"++";position:absolute;left:100%;top:-.38em;font-size:14px;font-weight:950;line-height:1;white-space:nowrap}.particle.p1{left:18%;bottom:54%}.particle.p2{left:30%;bottom:49%}.particle.p3{left:39%;bottom:60%}.particle.p4{left:51%;bottom:52%}.hero-mascot{position:absolute;z-index:3;pointer-events:none;user-select:none;display:block;height:auto;opacity:1!important}.hero-mascot.head{right:-1px;bottom:1.2vh;width:clamp(330px,32vw,610px)}.hero-mascot.tail{left:-1px;bottom:1.2vh;width:clamp(330px,32vw,610px)}
/* LEARN — current diagonal two-tone layout */
.learn{background:linear-gradient(114deg,#e9e5de 0%,#e9e5de 49.85%,#bd7f79 49.95%,#bd7f79 100%)}.learn .learn-grid{width:min(1180px,88vw);height:78vh;position:relative}.learn .head-row{position:absolute;inset:0;margin:0;z-index:4;pointer-events:none}.learn .head-row>div{position:absolute;left:0;top:0}.learn .head-row h2{margin:0;position:relative;height:calc(clamp(52px,6.2vw,88px)*1.8 + 12px);font-size:clamp(52px,6.2vw,88px);line-height:.9;letter-spacing:-.06em;font-weight:900;color:var(--ink)}.learn .head-row h2 span{position:absolute;left:0;white-space:nowrap}.learn .head-row h2 .learn-title-main{top:12px}.learn .head-row h2 .learn-title-sub{top:calc(12px + .9em);transform:translateX(2em)}.learn .paths{position:absolute;left:0;right:0;top:34%;bottom:0}.learn .path{position:absolute;min-height:0;z-index:3}.learn .path:first-child{left:0;top:7%;width:43%;padding:28px 7% 26px 0;color:#8f554f}.learn .path:first-child .num,.learn .path:first-child h3,.learn .path:first-child p,.learn .path:first-child a{position:relative;top:36px}.learn .path:first-child .num,.learn .path:first-child p{color:#8f554f}.learn .path:nth-child(2){right:0;bottom:0;width:43%;padding:26px 0 22px 7%;color:#f5eee8}.learn .path:nth-child(2) .num,.learn .path:nth-child(2) p{color:#f5eee8}.learn .path .num{display:block;font-size:10px;letter-spacing:.08em}.learn .path h3{font-size:clamp(34px,3.3vw,48px);margin:22px 0 12px;letter-spacing:-.035em}.learn .path p{font-size:14px;line-height:1.75;margin:0 0 20px}.learn .path .mark{font-size:0;position:absolute;display:block;width:clamp(150px,15vw,220px);height:clamp(150px,15vw,220px);opacity:1;pointer-events:none;z-index:-1}.learn .path .mark::before,.learn .path .mark::after{content:"";position:absolute;inset:17%;clip-path:polygon(8% 0,100% 50%,8% 100%);background:currentColor}.learn .path .mark::after{inset:25%;background:inherit;clip-path:polygon(8% 0,100% 50%,8% 100%)}.learn .path:first-child .mark{right:-3%;top:32px;color:rgba(143,85,79,.18);transform:rotate(90deg);animation:examLogoDrop 3.2s ease-in-out infinite}.learn .path:first-child .mark::after{background:#e9e5de}.learn .path:nth-child(2) .mark{left:-2%;right:auto;top:-20%;color:rgba(245,238,232,.25);transform:rotate(-8deg);animation:quickLogoPush 3.2s ease-in-out infinite}.learn .path:nth-child(2) .mark::after{background:#bd7f79}.learn .path a{display:inline-block;position:relative;border-bottom:0;padding:7px 22px 7px 0;text-decoration:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),letter-spacing .28s ease}.learn .path a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform-origin:left center;transform:scaleX(.62);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.learn .path a:hover{transform:translateX(7px);letter-spacing:.035em}.learn .path a:hover::after{transform:scaleX(1)}.learn .path:first-child::before{content:"DOWNLOAD";position:absolute;left:0;top:-50px;font-size:clamp(36px,5vw,72px);font-weight:900;letter-spacing:-.06em;color:rgba(143,85,79,.10);white-space:nowrap;pointer-events:none}.learn .path:nth-child(2)::before{content:"QUICK CHECK";position:absolute;right:0;top:-84px;font-size:clamp(36px,5vw,72px);font-weight:900;letter-spacing:-.06em;color:rgba(245,238,232,.12);white-space:nowrap;pointer-events:none}
/* CLASS — current brand-led layout */
.classroom{background:#dce6d7;position:relative}.classroom::after{content:"";position:absolute;right:13vw;top:3vh;width:clamp(330px,31vw,500px);height:60vh;background:url('titi.png') center/contain no-repeat;z-index:2;pointer-events:none}.classroom .wrap{position:relative;width:min(1180px,88vw);height:76vh;z-index:3}.classroom .section-label{margin:0;color:#5d766c}.classroom h2{margin:0;position:absolute;left:0;top:9%;line-height:.82;letter-spacing:-.075em}.classroom .class-title-main,.classroom .class-title-sub{display:block;font-size:clamp(78px,10vw,150px);font-weight:950;white-space:nowrap}.classroom .class-title-main{color:#18352c}.classroom .class-slash{display:inline-block;font-size:.78em;transform:translateY(-.17em)}.classroom .class-title-sub{color:#5b9c86;transform:translateX(13vw)}.classroom h2 .online-live{position:absolute;left:clamp(455px,39vw,585px);top:clamp(38px,4vw,60px);display:flex;align-items:flex-end;gap:16px;font-size:clamp(38px,5vw,75px);line-height:.9;letter-spacing:-.035em;font-weight:950;color:#18352c;white-space:nowrap;z-index:4}.classroom h2 .online-live::before{content:"";width:.24em;height:.24em;flex:0 0 auto;border-radius:50%;background:#d94b43;box-shadow:0 0 0 .34em rgba(217,75,67,0);animation:onAirGlow 1.8s ease-out infinite;margin-bottom:.08em}.classroom .classes{position:absolute;left:0;right:0;bottom:2%;display:grid;grid-template-columns:minmax(235px,.72fr) minmax(285px,.88fr) 1.4fr;align-items:stretch;overflow:visible}.classroom .course{min-height:145px;padding:22px 24px 18px 0;position:relative;cursor:default;overflow:visible}.classroom .course+.course{padding-left:24px}.classroom .course:nth-child(2){border-left:1px solid rgba(49,94,80,.28)}.classroom .course-kicker{font-size:11px;letter-spacing:.16em;font-weight:850;color:#536c62;margin-bottom:28px}.classroom .course-name{font-size:clamp(20px,1.72vw,27px);font-weight:900;line-height:1.25;letter-spacing:-.035em;color:#18352c;transition:transform .25s ease,color .25s ease}.classroom .course:nth-child(-n+2):hover .course-name{transform:translateY(-3px);color:#5b9c86}.classroom .course-info{position:absolute;left:0;bottom:calc(100% + 8px);width:clamp(430px,35vw,560px);padding:22px 26px 24px;border-top:2px solid #5b9c86;border-bottom:1px solid rgba(49,94,80,.22);background:rgba(239,244,235,.98);color:#18352c;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);z-index:8}.classroom .course:nth-child(2) .course-info{left:24px}.classroom .course-info-label{font-size:11px;letter-spacing:.16em;font-weight:900;color:#5b9c86;margin-bottom:14px;text-transform:uppercase}.classroom .course-info strong{display:block;font-size:19px;line-height:1.3;margin-bottom:13px;color:#18352c}.classroom .course-info ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.classroom .course-info li{position:relative;padding-left:16px;font-size:13px;line-height:1.62;color:#315e50}.classroom .course-info li::before{content:"•";position:absolute;left:0;top:0;color:#5b9c86;font-weight:900}.classroom .course:nth-child(-n+2):hover .course-info,.classroom .course:nth-child(-n+2):focus-within .course-info{opacity:1;transform:translateY(0)}.classroom .course:nth-child(3){display:flex;align-items:flex-start;justify-content:flex-end;padding:22px 0 18px 60px}.classroom .course-actions{display:flex;flex-direction:column;align-items:flex-start;gap:17px;min-width:min(100%,430px)}.classroom .course-actions-label{font-size:11px;letter-spacing:.2em;font-weight:900;color:#536c62}.classroom .course-actions-row{display:flex;align-items:center;gap:32px;width:100%}.classroom .course-action{display:inline-block;white-space:nowrap;font-size:clamp(17px,1.5vw,22px);font-weight:900;letter-spacing:.06em;color:#18352c;text-decoration:none;background:transparent;border-radius:0;padding:7px 0 8px;border-bottom:2px solid #18352c;transition:transform .25s ease,letter-spacing .25s ease,color .25s ease,border-color .25s ease}.classroom .course-action:hover{transform:translateX(6px);letter-spacing:.09em;color:#5b9c86;border-bottom-color:#5b9c86}
/* ABOUT — current static layout */
.last{position:relative;align-items:center;background:var(--white)}.last::before{content:"";position:absolute;left:8vw;bottom:8.5vh;width:clamp(360px,31vw,500px);height:78vh;background:url('me.png') center bottom/contain no-repeat;pointer-events:none;z-index:1}.last .last-grid{position:relative;z-index:2;width:min(1180px,88vw);height:78vh;display:grid;grid-template-columns:38% 1fr;grid-template-rows:minmax(0,1fr) auto;column-gap:8vw;row-gap:0;align-items:start}.last .about{grid-column:2;grid-row:1;position:relative;z-index:3;padding-top:1vh;max-width:650px}.last .about .section-label{margin-bottom:18px}.last .about blockquote{margin:10px 0 18px;font-size:clamp(34px,3.8vw,56px);line-height:1.1;letter-spacing:-.04em;max-width:640px}.last .about blockquote span{display:block}.last .about blockquote .about-green{color:var(--green)}.last .about-copy{max-width:610px}.last .about-intro{font-size:16px;line-height:1.72;margin:0 0 22px;color:var(--muted)}.last .about-intro strong{color:var(--ink);font-size:16px}.last .core-title{font-size:16px;font-weight:900;letter-spacing:.06em;margin-bottom:12px;color:var(--ink)}.last .core-list{display:grid;gap:12px}.last .core{display:grid;grid-template-columns:112px 1fr;align-items:baseline;gap:16px;font-size:16px;line-height:1.6;color:var(--muted)}.last .core span{white-space:nowrap}.last .core b{font-size:16px;white-space:nowrap}.last .core-a b{color:var(--coral)}.last .core-b b{color:var(--green)}.last .core-c b{color:var(--blue)}.last .fixed-foot{grid-column:1/3;grid-row:2;margin:0;padding-top:18px;border-top:1px solid #c7cfcb;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;color:var(--ink)}.last .footer-brand{display:flex;align-items:center;gap:14px;min-width:0}.last .footer-trademark{display:block;height:49px;width:auto;max-width:49px;object-fit:contain;flex:0 0 auto}.last .footer-left{display:grid;gap:10px;font-size:14px;line-height:1.4;letter-spacing:.02em}.last .footer-right{display:grid;justify-items:end;gap:10px}.last .footer-socials{display:flex;gap:12px;align-items:center}.last .footer-social{width:36px;height:36px;border:1px solid rgba(22,35,31,.58);border-radius:50%;display:grid;place-items:center;text-decoration:none;position:relative;transition:.22s ease;background:var(--white)}.last .footer-social>span{font-size:10px;font-weight:950;letter-spacing:-.04em}.last .footer-social.youtube>span{font-size:12px}.last .footer-social.facebook>span{font-size:18px;font-family:Arial,sans-serif}.last .footer-social.instagram>span{font-size:13px;letter-spacing:0}.last .footer-social small{position:absolute;bottom:43px;left:50%;transform:translate(-50%,4px);font-size:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;color:var(--muted)}.last .footer-social:hover{transform:translateY(-2px)}.last .footer-social:hover small{opacity:1;transform:translate(-50%,0)}.last .footer-social.line:hover{border-color:#06c755;color:#06c755}.last .footer-social.youtube:hover{border-color:#ff0033;color:#ff0033}.last .footer-social.facebook:hover{border-color:#1877f2;color:#1877f2}.last .footer-social.instagram:hover{border-color:#c13584;color:#c13584}.last .footer-copyright{font-size:13px;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
@keyframes onAirGlow{0%{opacity:.72;box-shadow:0 0 0 .34em rgba(217,75,67,0)}50%{opacity:1;box-shadow:0 0 .26em .34em rgba(217,75,67,.34)}100%{opacity:.82;box-shadow:0 0 .52em .34em rgba(217,75,67,0)}}@keyframes examLogoDrop{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(12px)}}@keyframes quickLogoPush{0%,100%{transform:rotate(-8deg) translateX(0)}50%{transform:rotate(-8deg) translateX(12px)}}@keyframes moonTravel{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes gradeBreath{0%,100%{opacity:.72;text-shadow:0 0 3px rgba(214,93,71,.28),0 0 8px rgba(214,93,71,.18)}50%{opacity:1;text-shadow:0 0 6px rgba(214,93,71,.9),0 0 15px rgba(214,93,71,.65),0 0 28px rgba(214,93,71,.35)}}
@media(min-width:1101px){.classroom .course-info{width:max-content;max-width:none}.classroom .course-info li{white-space:nowrap}.last::before{left:calc(50% - 585px);bottom:20vh;width:420px;height:78vh;background-position:center bottom}.last .last-grid{width:min(1248px,90vw);height:78vh;grid-template-columns:38% 1fr;column-gap:3vw}.last .about{grid-column:auto;grid-row:auto;position:absolute;left:49%;right:auto;top:5vh;width:49%;max-width:none;padding-top:0}.last .about blockquote{margin:8px 0 24px;font-size:clamp(43px,4.15vw,63px);line-height:1.01;max-width:none;width:100%}.last .about-copy,.last .about-intro{max-width:none;width:100%}.last .fixed-foot{position:absolute;left:0;right:0;bottom:1.2vh;width:100%}}
@media(max-width:1100px) and (min-width:761px){.hero-copy{width:52%;transform:translateY(-2vh)}.lab{right:4vw;width:46vw;opacity:.86}.hero-mascot.head,.hero-mascot.tail{width:34vw;bottom:1vh}.classroom::after{right:8vw;width:34vw}.classroom .classes{grid-template-columns:.8fr 1fr 1.1fr}.classroom h2 .online-live{left:44vw;top:4vw;font-size:5vw}.classroom .course-info{width:clamp(380px,45vw,500px)}.classroom .course-actions-row{gap:20px}.last::before{left:5vw;width:36vw;height:72vh}.last .last-grid{grid-template-columns:36% 1fr;column-gap:6vw}.last .about{grid-column:2}.last .fixed-foot{grid-column:1/3}.last .core{grid-template-columns:100px 1fr}.last .core span{white-space:normal}.last .footer-copyright{white-space:normal;text-align:right}}
@media(max-width:760px){.hero-copy{width:100%;transform:none}.hero-mascot{display:none!important}.lab{right:3vw;top:16%;width:55vw;height:62%;opacity:.28}.learn{background:linear-gradient(165deg,#e9e5de 0%,#e9e5de 49.8%,#bd7f79 50%,#bd7f79 100%)}.learn .learn-grid{height:auto}.learn .head-row,.learn .paths,.learn .path{position:relative!important;inset:auto!important;width:100%!important}.learn .head-row>div{position:relative;inset:auto;width:auto;max-width:none}.learn .head-row h2 .learn-title-sub{transform:none}.learn .path:first-child::before,.learn .path:nth-child(2)::before{display:none}.learn .path:first-child,.learn .path:nth-child(2){padding:28px 0}.learn .path:first-child .num,.learn .path:first-child h3,.learn .path:first-child p,.learn .path:first-child a{top:auto}.learn .path .mark{width:120px;height:120px}.learn .path:first-child .mark{top:10px}.learn .path:nth-child(2) .mark{left:auto;right:8px;top:10px}.classroom::after{width:46vw;height:36vh;right:4vw;top:10vh;opacity:.9}.classroom .wrap{height:auto}.classroom h2{position:relative;top:auto;margin:20px 0 45px}.classroom .class-title-main,.classroom .class-title-sub{font-size:17vw}.classroom .class-title-sub{transform:none}.classroom h2 .online-live{position:relative;left:auto;top:auto;margin-top:14px;width:max-content;font-size:8vw;gap:10px}.classroom .classes{position:relative;inset:auto;grid-template-columns:1fr}.classroom .course,.classroom .course+.course{padding:20px 0;border-left:0!important;min-height:0}.classroom .course-info,.classroom .course:nth-child(2) .course-info{position:relative;left:auto;bottom:auto;margin-top:14px;width:100%;display:none;opacity:1;transform:none;padding:18px}.classroom .course:hover .course-info{display:block}.classroom .course:nth-child(3){justify-content:flex-start;padding:24px 0}.classroom .course-actions{align-items:flex-start;min-width:0;width:100%}.classroom .course-actions-row{gap:22px;flex-wrap:wrap}.classroom .course-action{font-size:18px}.last::before{display:none}.last .last-grid{height:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:34px}.last .about{grid-column:1;grid-row:auto;padding:0;max-width:none}.last .about blockquote{font-size:clamp(36px,11vw,54px)}.last .about-copy{max-width:none}.last .core{grid-template-columns:1fr;gap:4px}.last .core span{white-space:normal}.last .fixed-foot{grid-column:1;grid-row:auto;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:0}.last .footer-right{justify-items:start}.last .footer-copyright{white-space:normal}.last .footer-social small{display:none}}
@media(prefers-reduced-motion:reduce){.learn .path:first-child .mark,.learn .path:nth-child(2) .mark{animation:none}.learn .path a{transition:none}.classroom .course-info{transition:none}.classroom h2 .online-live::before{animation:none}}
/* HERO mobile portrait v1: preserve desktop styles, restore visual storytelling. */
@media(max-width:760px) and (orientation:portrait){
  html{scroll-snap-type:y mandatory;scroll-padding-top:0;overscroll-behavior-y:none}
  .screen{scroll-snap-align:start;scroll-snap-stop:always}
  .screen .scene,.screen.active .scene{opacity:1;transform:none}
  .hero{height:100svh;min-height:100svh;padding:clamp(92px,11svh,112px) 0 0;align-items:flex-start;overflow:hidden}
  .hero .wrap{width:88vw;margin:0 auto;position:relative;z-index:7}
  .hero-copy{width:100%;transform:none}
  .hero .kicker{font-size:clamp(9px,2.5vw,11px);letter-spacing:.14em;margin-bottom:clamp(12px,2.2svh,20px);white-space:nowrap}
  .hero h1{font-size:clamp(39px,10.3vw,52px);line-height:1.02;letter-spacing:-.065em}
  .hero p{font-size:clamp(15px,4vw,18px);margin:clamp(12px,2svh,20px) 0 12px}
  .hero .start{font-size:12px;padding:8px 0;min-height:42px}
  .hero-mascot{display:block!important;pointer-events:none;z-index:4}
  .hero-mascot.tail{left:-7vw;right:auto;bottom:3svh;width:clamp(205px,56vw,300px)}
  .hero-mascot.head{right:-8vw;left:auto;bottom:3svh;width:clamp(225px,65vw,350px)}
  .lab{left:auto;right:4vw;top:auto;bottom:12svh;width:69vw;height:31svh;opacity:.78;z-index:2;pointer-events:none}
  .moon-orbit{right:6%;top:0;width:clamp(140px,42vw,195px);height:clamp(140px,42vw,195px)}
  .moon{left:calc(50% - 21px)}
  .compass{right:12%;top:32%;bottom:auto;width:clamp(78px,23vw,112px);height:clamp(78px,23vw,112px)}
  .needle{height:72%}
  .pluspop{left:12%;bottom:62%;opacity:.8}
  .pluspop::before{font-size:21px}.pluspop::after{font-size:11px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero{padding-top:84px}
  .hero .kicker{margin-bottom:10px}
  .hero h1{font-size:clamp(36px,9.3vw,46px)}
  .hero p{margin:10px 0 5px}
  .hero-mascot.tail,.hero-mascot.head{bottom:1svh}
  .lab{bottom:9svh;height:29svh}
}

/* HERO mobile portrait v2: user's five layout adjustments; desktop unchanged. */
@media(max-width:760px) and (orientation:portrait){
  .hero .wrap{height:100%;min-height:0}
  .hero-copy{height:100%;display:flex;flex-direction:column;align-items:flex-start}
  .hero .kicker{display:none}
  .hero p{order:-1;margin:0 0 clamp(13px,2svh,19px);font-size:clamp(16px,4.1vw,19px)}
  .hero h1{order:0;font-size:clamp(42px,11.1vw,56px);line-height:1.015}
  .hero .start{order:1;margin-top:auto;margin-bottom:max(3.2svh,env(safe-area-inset-bottom));align-self:center;z-index:9}
  .hero-mascot.tail{bottom:12svh;width:clamp(200px,54vw,290px)}
  .hero-mascot.head{bottom:12svh;width:clamp(220px,61vw,330px)}
  .lab{bottom:23svh;height:29svh;width:68vw;opacity:.78}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero h1{font-size:clamp(39px,10.4vw,49px)}
  .hero p{margin-bottom:9px}
  .hero-mascot.tail,.hero-mascot.head{bottom:11svh}
  .lab{bottom:21svh;height:27svh}
}

/* HERO mobile portrait v3: breathing room, one mascot and aligned telescope target. */
@media(max-width:760px) and (orientation:portrait){
  .hero{padding-top:clamp(119px,15svh,145px)}
  .hero-mascot.tail{display:none!important}
  .hero-mascot.head{display:block!important;right:-8vw;bottom:12svh;width:clamp(220px,61vw,330px)}
  /* Lab occupies HERO as positioning canvas; ring and compass share an exact center. */
  .hero .lab{
    --orbit-d:clamp(166px,49vw,208px);
    --compass-d:clamp(82px,25vw,108px);
    --ring-x:8vw;
    --ring-bottom:26svh;
    inset:0;width:100%;height:100%;opacity:1;z-index:2;pointer-events:none;
  }
  .hero .moon-orbit{
    top:auto;right:auto;left:var(--ring-x);bottom:var(--ring-bottom);
    width:var(--orbit-d);height:var(--orbit-d);
    border-color:rgba(146,167,156,.65);
  }
  .hero .compass{
    top:auto;right:auto;
    left:calc(var(--ring-x) + (var(--orbit-d) - var(--compass-d))/2);
    bottom:calc(var(--ring-bottom) + (var(--orbit-d) - var(--compass-d))/2);
    width:var(--compass-d);height:var(--compass-d);
    background:rgba(255,253,248,.45);border-color:rgba(117,147,132,.78);
  }
  .hero .moon{left:calc(50% - 17px);top:-17px;width:34px;height:34px;transform-origin:17px calc(var(--orbit-d)/2 + 17px)}
  .hero .pluspop{
    top:44%;bottom:auto;left:57%;right:auto;transform:none;opacity:.9;
  }
  .hero .particle.p1{top:46%;bottom:auto;left:74%}
  .hero .particle.p2{top:52%;bottom:auto;left:66%}
  .hero .particle.p3{top:49%;bottom:auto;left:84%}
  .hero .particle.p4{top:54%;bottom:auto;left:79%}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero{padding-top:clamp(100px,14svh,120px)}
  .hero .lab{--ring-bottom:24svh;--orbit-d:clamp(150px,45vw,180px)}
  .hero-mascot.head{bottom:11svh}
}

/* HERO mobile portrait v4: exchange the two decorative groups. */
@media(max-width:760px) and (orientation:portrait){
  /* Large concentric orbital target, centered upper-right and intentionally cropped. */
  .hero .lab{
    --orbit-d:clamp(270px,77vw,365px);
    --compass-d:clamp(114px,35vw,156px);
    --ring-x:calc(83% - var(--orbit-d)/2);
    --ring-bottom:34svh;
  }
  .hero .moon-orbit{
    left:var(--ring-x);bottom:var(--ring-bottom);
    width:var(--orbit-d);height:var(--orbit-d);
    border-color:rgba(146,167,156,.62);
  }
  .hero .compass{
    left:calc(var(--ring-x) + (var(--orbit-d) - var(--compass-d))/2);
    bottom:calc(var(--ring-bottom) + (var(--orbit-d) - var(--compass-d))/2);
    width:var(--compass-d);height:var(--compass-d);
  }
  .hero .moon{animation:moonTravel 8s linear infinite}
  /* Four colored points frame the A++ cluster near the telescope's sightline. */
  .hero .pluspop{
    left:34%;top:71%;bottom:auto;transform:translate(-50%,-50%);
    opacity:1;text-align:center;
  }
  .hero .particle.p1{left:24%;top:67%;bottom:auto}
  .hero .particle.p2{left:46%;top:70%;bottom:auto}
  .hero .particle.p3{left:26%;top:77%;bottom:auto}
  .hero .particle.p4{left:47%;top:76%;bottom:auto}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero .lab{--orbit-d:clamp(245px,73vw,330px);--ring-bottom:33svh}
  .hero .pluspop{top:70%}
  .hero .particle.p1{top:66%}
  .hero .particle.p2{top:69%}
  .hero .particle.p3{top:76%}
  .hero .particle.p4{top:75%}
}

/* HERO mobile portrait v5: larger higher orbit; A++ centered in sightline cluster. */
@media(max-width:760px) and (orientation:portrait){
  .hero .lab{
    --orbit-d:clamp(325px,94vw,450px);
    --compass-d:clamp(135px,42vw,188px);
    --ring-x:calc(82% - var(--orbit-d)/2);
    --ring-bottom:39svh;
  }
  .hero .pluspop{
    left:28%;top:75%;bottom:auto;
    transform:translate(-50%,-50%);
  }
  .hero .particle.p1{left:21%;top:71%;bottom:auto}
  .hero .particle.p2{left:35%;top:71%;bottom:auto}
  .hero .particle.p3{left:21%;top:79%;bottom:auto}
  .hero .particle.p4{left:35%;top:79%;bottom:auto}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero .lab{--orbit-d:clamp(290px,88vw,390px);--ring-bottom:38svh}
  .hero .pluspop{top:74%}
  .hero .particle.p1,.hero .particle.p2{top:70%}
  .hero .particle.p3,.hero .particle.p4{top:78%}
}

/* HERO mobile portrait v6: orbit shift, living compass and organic particles. */
@keyframes heroMobileNeedleSeek{
  0%,100%{transform:rotate(-16deg)}
  38%{transform:rotate(15deg)}
  62%{transform:rotate(9deg)}
  82%{transform:rotate(-10deg)}
}
@media(max-width:760px) and (orientation:portrait){
  /* Move both concentric rings together; retain v5 diameters. */
  .hero .lab{--ring-x:calc(90% - var(--orbit-d)/2)}
  /* The desktop pointer-following behavior remains unchanged. */
  .hero .compass .needle{
    animation:heroMobileNeedleSeek 5.8s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  /* Keep A++ fixed; loosen the four surrounding points. */
  .hero .particle.p1{left:18%;top:70%}
  .hero .particle.p2{left:39%;top:73%}
  .hero .particle.p3{left:23%;top:81%}
  .hero .particle.p4{left:41%;top:78%}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .hero .particle.p1{top:69%}
  .hero .particle.p2{top:72%}
  .hero .particle.p3{top:80%}
  .hero .particle.p4{top:77%}
}
@media(prefers-reduced-motion:reduce){
  .hero .compass .needle{animation:none}
}

/* HERO mobile portrait v7: subtle warm-white text outline for legibility. */
@media(max-width:760px) and (orientation:portrait){
  .hero h1{
    -webkit-text-stroke:4px #fffdf8;
    paint-order:stroke fill;
  }
}

/* WHY / PLAY mobile portrait v1: shorter three-line WHY, expanded PLAY. */
.whyplay .why-mobile,.whyplay .play-desc-mobile{display:none}
@media(max-width:760px) and (orientation:portrait){
  .whyplay .why-desktop,.whyplay .play-desc-desktop{display:none}
  .whyplay .why-mobile,.whyplay .play-desc-mobile{display:block}
  .whyplay .whyplay-grid{width:88vw;gap:clamp(22px,4svh,36px)}
  .whyplay .why h2.why-mobile{
    font-size:clamp(27px,7.9vw,34px);
    line-height:1.19;
    margin:16px 0 0;
    letter-spacing:-.045em;
  }
  .whyplay .why-mobile .why-line{white-space:nowrap}
  .whyplay .playbox{padding:0;border-left:0}
  .whyplay .playbox h2{
    font-size:clamp(63px,17vw,78px);
    line-height:.82;
    margin:16px 0 24px;
  }
  .whyplay .play-desc-mobile{
    font-size:clamp(12px,3.35vw,14px);
    line-height:1.9;
    margin:0 0 18px;
  }
  .whyplay .play-desc-mobile span{display:block;white-space:nowrap}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .whyplay .whyplay-grid{gap:18px}
  .whyplay .why h2.why-mobile{font-size:clamp(26px,7.3vw,32px);margin-top:10px}
  .whyplay .playbox h2{font-size:clamp(58px,16vw,70px);margin:12px 0 16px}
  .whyplay .play-desc-mobile{line-height:1.65;margin-bottom:12px}
}

/* WHY/PLAY mobile portrait v2 — circuit diagram with subtle moving current. */
.play-circuit-art{display:none}
@keyframes playCircuitFlow{to{stroke-dashoffset:-180}}
@media(max-width:760px) and (orientation:portrait){
  .whyplay{isolation:isolate}
  .whyplay .play-circuit-art{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;overflow:hidden;
  }
  .whyplay .whyplay-grid{position:relative;z-index:2}
  .play-circuit-art .circuit-wires path{
    fill:none;stroke:#719589;stroke-width:1.25;opacity:.38;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .play-circuit-art .circuit-current path{
    fill:none;stroke:url(#play-current);stroke-width:2.2;
    stroke-dasharray:3 175;stroke-dashoffset:0;
    stroke-linecap:round;opacity:.88;
    animation:playCircuitFlow 9s linear infinite;
  }
  .play-circuit-art .circuit-current path:nth-child(2){animation-delay:-3s}
  .play-circuit-art .circuit-current path:nth-child(3){animation-delay:-5s}
  .play-circuit-art .circuit-nodes circle{fill:#9abcaa;opacity:.55}
  .play-circuit-art .circuit-symbols{fill:none;stroke:#a7c3b2;stroke-width:1.4;opacity:.54}
  /* This extension grows directly from the CTA underline, so it stays connected across widths. */
  .whyplay .playbox .btn{
    position:relative;z-index:3;
  }
  .whyplay .playbox .btn::after{
    content:"";position:absolute;left:100%;bottom:-1px;
    width:clamp(72px,31vw,125px);height:clamp(40px,7svh,67px);
    border-bottom:1px solid rgba(0,210,255,.62);
    border-right:1px solid rgba(0,210,255,.40);
    border-bottom-right-radius:26px;
    pointer-events:none;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-width:360px){
  .whyplay .playbox .btn::after{width:22vw}
}
@media(prefers-reduced-motion:reduce){
  .play-circuit-art .circuit-current path{animation:none;stroke-dasharray:none;opacity:.4}
}

/* WHY/PLAY mobile portrait v3 — one coherent closed circuit with familiar symbols. */
@media(max-width:760px) and (orientation:portrait){
  .play-circuit-art .circuit-wires path{opacity:.47;stroke:#7c9f92}
  .play-circuit-art .circuit-current path{stroke-width:2;stroke-dasharray:3 175;opacity:.75}
  .play-circuit-art .circuit-current path:nth-child(4){animation-delay:-6.5s}
  .play-circuit-art .circuit-nodes circle{opacity:.48}
  .play-circuit-art .circuit-symbols{stroke:#b6cbbb;stroke-width:1.5;opacity:.7}
  .play-circuit-art .circuit-bulb{stroke:#dce9a9}
  .play-circuit-art .circuit-battery{stroke:#a8c5b6}
  .play-circuit-art .circuit-cta-bridge{stroke:#00d2ff;opacity:.58}
}

/* LEARN mobile portrait v1: steeper lower diagonal, staggered learning routes. */
@media(max-width:760px) and (orientation:portrait){
  .learn{height:100svh;min-height:100svh;background:#e9e5de;isolation:isolate}
  .learn::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:#bd7f79;
    clip-path:polygon(0 66%,100% 47%,100% 100%,0 100%);
    z-index:0;
  }
  .learn .learn-grid{
    position:relative;width:88vw;height:100svh;z-index:1;
  }
  .learn .head-row{
    position:absolute!important;inset:auto!important;
    left:0!important;top:15%!important;width:100%!important;
  }
  .learn .head-row>div{position:relative;inset:auto}
  .learn .head-row h2{
    font-size:clamp(44px,12vw,54px);height:calc(2em + 4px);
    margin:0;line-height:.94;
  }
  .learn .head-row h2 .learn-title-main{top:4px}
  .learn .head-row h2 .learn-title-sub{top:calc(4px + .94em);transform:none}
  .learn .paths{
    position:absolute!important;inset:0!important;
    height:100%!important;width:100%!important;
  }
  .learn .path:first-child{
    position:absolute!important;inset:auto!important;
    left:0!important;top:37%!important;width:100%!important;
    padding:0!important;text-align:left;
  }
  .learn .path:nth-child(2){
    position:absolute!important;inset:auto!important;
    right:0!important;top:68%!important;width:100%!important;
    padding:0!important;text-align:right;
  }
  .learn .path .num{font-size:10px;letter-spacing:.09em}
  .learn .path h3{font-size:clamp(28px,8vw,35px);line-height:1.12;margin:20px 0 12px}
  .learn .path p{font-size:clamp(12px,3.4vw,14px);line-height:1.55;margin:0 0 17px}
  .learn .path a{font-size:clamp(13px,3.6vw,15px);padding:5px 0 8px}
  .learn .path:first-child .mark{right:2%;left:auto;top:8px}
  .learn .path:nth-child(2) .mark{right:0;left:auto;top:-12px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .learn .head-row{top:13%!important}
  .learn .path:first-child{top:35%!important}
  .learn .path:nth-child(2){top:66%!important}
  .learn .path h3{margin:14px 0 9px}
  .learn .path p{margin-bottom:11px}
}

/* LEARN mobile portrait v2 — B+C: bold diagonal composition + larger system titles. */
@media(max-width:760px) and (orientation:portrait){
  .learn::before{
    clip-path:polygon(0 77%,100% 43%,100% 100%,0 100%);
  }
  .learn .head-row{top:14%!important}
  .learn .path:first-child{
    top:34%!important;
    max-width:100%;
  }
  .learn .path:nth-child(2){
    top:62%!important;
    max-width:100%;
  }
  .learn .path h3{
    font-size:clamp(36px,10vw,43px);
    line-height:1.08;
    margin:17px 0 13px;
    letter-spacing:-.025em;
  }
  .learn .path:first-child p{max-width:min(78vw,330px)}
  .learn .path:nth-child(2) p{
    max-width:min(78vw,320px);
    margin-left:auto;
  }
  .learn .path .num{letter-spacing:.11em}
  .learn .path a{font-size:clamp(14px,3.8vw,16px)}
  .learn .path:first-child .mark{right:4%;top:10px}
  .learn .path:nth-child(2) .mark{right:1%;top:4px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .learn .head-row{top:12%!important}
  .learn .path:first-child{top:33%!important}
  .learn .path:nth-child(2){top:61%!important}
  .learn .path h3{font-size:clamp(32px,9.5vw,39px);margin:12px 0 9px}
  .learn .path p{font-size:clamp(11px,3.2vw,13px);margin-bottom:10px}
}

/* LEARN mobile portrait v3: stronger titles, intentional copy breaks and balanced animated marks.
   Do not change the approved header, headline or diagonal. */
.learn .learn-desc-mobile{display:none}
@media(max-width:760px) and (orientation:portrait){
  .learn .path .learn-desc-desktop{display:none}
  .learn .path .learn-desc-mobile{
    display:block;
    max-width:none;
    font-size:clamp(13px,3.55vw,15px);
    line-height:1.65;
    margin:0 0 14px;
    white-space:normal;
  }
  .learn .path .learn-desc-mobile span{display:block;white-space:nowrap}
  .learn .path h3{
    font-size:clamp(42px,11.7vw,50px);
    line-height:1.08;
    letter-spacing:-.045em;
    white-space:nowrap;
    margin:18px 0 13px;
  }
  .learn .path:first-child{top:33%!important}
  .learn .path:nth-child(2){top:61%!important}
  .learn .path:first-child .mark{
    width:clamp(148px,42vw,192px);
    height:clamp(148px,42vw,192px);
    right:-9%;left:auto;top:68px;
  }
  .learn .path:nth-child(2) .mark{
    width:clamp(150px,44vw,195px);
    height:clamp(150px,44vw,195px);
    left:-8%;right:auto;top:63px;
  }
  .learn .path a{font-size:clamp(15px,4vw,17px)}
}
@media(max-width:760px) and (orientation:portrait) and (max-width:370px){
  .learn .path h3{font-size:clamp(38px,11.2vw,43px)}
  .learn .path .learn-desc-mobile{font-size:12px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .learn .path:first-child{top:32%!important}
  .learn .path:nth-child(2){top:59%!important}
  .learn .path h3{font-size:clamp(35px,10.5vw,44px);margin:11px 0 8px}
  .learn .path .learn-desc-mobile{font-size:clamp(11px,3.15vw,13px);line-height:1.45;margin-bottom:8px}
  .learn .path:first-child .mark{top:45px}
  .learn .path:nth-child(2) .mark{top:45px}
}

/* LEARN mobile portrait v4 — lift only the left end of the dividing diagonal,
   so the large QUICK TEST heading stays entirely on the rose field. */
@media(max-width:760px) and (orientation:portrait){
  .learn::before{
    clip-path:polygon(0 69%,100% 43%,100% 100%,0 100%);
  }
}

/* LEARN mobile portrait v5 — longer balanced CTA underlines. */
@media(max-width:760px) and (orientation:portrait){
  .learn .path a::after{
    width:clamp(110px,31vw,140px);
    left:0;right:auto;
    transform:scaleX(1);
  }
  .learn .path:nth-child(2) a::after{
    left:auto;right:0;
    transform-origin:right center;
  }
}

/* LEARN mobile portrait v6 — keep CTA underline only slightly longer than label. */
@media(max-width:760px) and (orientation:portrait){
  .learn .path a::after{
    width:calc(100% - 10px);
    transform:scaleX(1);
  }
}

/* CLASS mobile portrait v1 — single screen, compact courses, mascot/action zone and scroll-contained modal. */
.class-course-modal{display:none}
@media(max-width:760px) and (orientation:portrait){
  .classroom{height:100svh;min-height:100svh;overflow:hidden;align-items:stretch}
  .classroom .wrap{position:relative;width:88vw;height:100svh;margin:auto;z-index:3}
  .classroom .section-label{position:absolute;left:0;top:14%;font-size:11px}
  .classroom h2{position:absolute;left:0;top:18.8%;margin:0;line-height:.85}
  .classroom .class-title-main,.classroom .class-title-sub{
    display:block;font-size:clamp(57px,16.3vw,76px);line-height:.86;
  }
  .classroom .class-title-sub{transform:none}
  .classroom .class-slash{display:none}
  .classroom h2 .online-live{
    position:relative;left:auto;top:auto;margin-top:14px;width:max-content;
    font-size:clamp(14px,4vw,17px);font-weight:800;letter-spacing:.16em;
    line-height:1.2;gap:9px;align-items:center;padding:5px 10px 5px 2px;
    color:#315e50;
  }
  .classroom h2 .online-live::before{
    width:7px;height:7px;flex:0 0 7px;margin:0;
    box-shadow:none;animation:none;background:#d94b43;
  }
  .classroom .classes{position:static;display:block;inset:auto;width:100%;height:100%}
  .classroom .course,.classroom .course+.course{
    position:absolute;left:0;right:0;width:100%;padding:0!important;
    margin:0;min-height:0;border:0!important;overflow:visible;
  }
  .classroom .course-core{top:41%}
  .classroom .course-advanced{top:53%}
  .classroom .course-kicker{margin:0 0 12px;font-size:10px}
  .classroom .course-name{
    display:block;position:relative;top:auto;max-width:100%;
    width:max-content;font-size:clamp(15px,4.2vw,18px);
    line-height:1.35;letter-spacing:-.045em;font-weight:900;
    white-space:nowrap;cursor:pointer;
    padding:4px 0 7px;border-bottom:1px dashed rgba(49,94,80,.52);
  }
  .classroom .course-name br,.classroom .course-name-arrow{display:none}
  .classroom .course-name:focus-visible{outline:2px solid #315e50;outline-offset:4px}
  .classroom .course-name::after{
    content:"點選查看介紹";font-size:10px;font-weight:500;
    color:#5d766c;letter-spacing:.02em;
    position:absolute;right:0;top:100%;white-space:nowrap;
  }
  .classroom .course-info,.classroom .course:nth-child(2) .course-info,
  .classroom .course:hover .course-info,.classroom .course:focus-within .course-info{
    display:none!important;
  }
  .classroom .course-online{top:auto;bottom:13%;left:auto;right:0;width:61%!important}
  .classroom .course-actions{gap:15px;min-width:0;width:100%;align-items:flex-start}
  .classroom .course-actions-label{font-size:10px}
  .classroom .course-actions-row{display:flex;flex-wrap:wrap;gap:12px 18px;width:100%}
  .classroom .course-action{font-size:clamp(14px,3.8vw,17px);padding-bottom:6px}
  .classroom::after{
    right:auto;left:1.8vw;top:auto;bottom:9%;
    width:36vw;height:28svh;opacity:1;
    background-position:center bottom;
  }
  .class-course-modal[open]{
    display:block;position:fixed;inset:0;
    width:min(90vw,460px);max-width:90vw;
    max-height:min(78svh,690px);height:auto;
    margin:auto;padding:22px 22px 26px;
    background:#eff4eb;color:#18352c;border:1px solid #99b7a8;
    border-top:4px solid #5b9c86;border-radius:12px;
    box-shadow:0 18px 60px rgba(10,35,24,.25);
    overflow-y:auto;overscroll-behavior:contain;z-index:999;
  }
  .class-course-modal::backdrop{background:rgba(12,34,26,.53)}
  .class-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
  .class-modal-head>span{font-size:10px;letter-spacing:.15em;font-weight:800;color:#597967}
  .class-modal-close{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid #8cae9b;border-radius:50%;background:transparent;color:#18352c;font-size:26px;line-height:1;cursor:pointer}
  .class-course-modal #class-course-modal-content strong{display:block;font-size:20px;line-height:1.4;margin-bottom:16px}
  .class-course-modal #class-course-modal-content>.course-info-label{display:none}
  .class-course-modal ul{list-style:none;display:grid;gap:12px;padding:0;margin:0}
  .class-course-modal li{position:relative;padding-left:17px;font-size:14px;line-height:1.7;color:#315e50}
  .class-course-modal li::before{content:"•";position:absolute;left:0;color:#5b9c86}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom .section-label{top:12%}
  .classroom h2{top:17%}
  .classroom .course-core{top:40%}
  .classroom .course-advanced{top:52%}
  .classroom .course-online{bottom:10%}
  .classroom::after{bottom:7%;height:26svh}
}

/* CLASS mobile portrait v2 — expressive course hierarchy and balanced action/mascot pairing. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-core{top:40%}
  .classroom .course-advanced{top:51.8%}
  .classroom .course-kicker{margin-bottom:9px;font-size:10px}
  .classroom .course-name{
    width:max-content;max-width:100%;
    font-size:clamp(20px,5.6vw,24px);
    line-height:1.3;
    padding:3px 0 7px;
    border-bottom:1px solid rgba(49,94,80,.32);
    white-space:nowrap;
  }
  .classroom .course-core .course-name br{display:none}
  .classroom .course-advanced .course-name br{display:initial}
  .classroom .course-name::after{
    content:"☝";display:inline-block;position:relative;
    left:auto;right:auto;top:-1px;
    margin-left:9px;font-size:19px;line-height:1;
    color:#315e50;vertical-align:middle;
    animation:classTapNudge 2.7s ease-in-out infinite;
  }
  .classroom .course-advanced .course-name::after{animation-delay:-1.2s}
  .classroom .course-online{
    left:0!important;right:auto!important;
    width:52%!important;bottom:12%;
  }
  .classroom .course-actions{gap:13px;align-items:flex-start}
  .classroom .course-actions-row{
    display:flex;flex-direction:column;
    align-items:flex-start;flex-wrap:nowrap;
    gap:14px;
  }
  .classroom .course-action{
    font-size:clamp(16px,4.4vw,19px);
    padding:6px 0 8px;
    min-width:0;
  }
  .classroom::after{
    left:auto;right:2.5vw;top:auto;bottom:6.5%;
    width:47vw;height:32svh;
    background-size:contain;background-position:center bottom;
  }
}
@keyframes classTapNudge{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom .course-core{top:38.5%}
  .classroom .course-advanced{top:50%}
  .classroom .course-name{font-size:clamp(19px,5.25vw,22px)}
  .classroom .course-online{bottom:10%}
  .classroom::after{bottom:5%;height:30svh}
}
@media(prefers-reduced-motion:reduce){
  .classroom .course-name::after{animation:none}
}

/* CLASS mobile portrait v3 — identifiable online-course label, triangle click cue and larger Titi. */
@media(max-width:760px) and (orientation:portrait){
  /* ONLINE means the course delivery format, not a live broadcast. */
  .classroom h2 .online-live{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:15px;padding:8px 11px;
    border:1px solid rgba(49,94,80,.45);border-radius:3px;
    background:rgba(255,253,248,.34);
    color:#18352c;font-size:clamp(16px,4.4vw,19px);
    font-weight:900;letter-spacing:.13em;line-height:1;
  }
  .classroom h2 .online-live::before{
    content:"";width:8px;height:8px;flex:0 0 8px;
    background:#d94b43;border-radius:50%;box-shadow:none;
    animation:none;margin:0;
  }
  .classroom h2 .online-live::after{
    content:"線上課程";font-size:10px;font-weight:700;
    letter-spacing:.1em;margin-left:1px;
    color:#5d766c;border-left:1px solid rgba(49,94,80,.32);
    padding-left:10px;
  }
  /* Use a simple monochrome play triangle; no emoji/font-dependent hand. */
  .classroom .course-name::after{
    content:"▶";position:relative;display:inline-block;
    font-family:Arial,sans-serif;font-size:12px;
    line-height:1;color:#5b9c86;vertical-align:middle;
    margin-left:9px;top:-2px;right:auto;left:auto;
    animation:classTriangleNudge 2.8s ease-in-out infinite;
  }
  .classroom .course-advanced .course-name::after{animation-delay:-1.2s}
  .classroom .course-name:focus:not(:focus-visible){outline:none}
  .classroom .course-online{
    left:7%!important;right:auto!important;
    width:43%!important;bottom:11%;
  }
  .classroom .course-actions{gap:13px;width:100%}
  .classroom .course-actions-row{gap:14px;align-items:flex-start}
  .classroom::after{
    left:auto;right:0;top:auto;bottom:3%;
    width:61vw;height:39svh;
    background-position:center bottom;
    opacity:1;
  }
}
@keyframes classTriangleNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom h2 .online-live{padding:7px 10px;margin-top:11px}
  .classroom .course-online{bottom:8%}
  .classroom::after{bottom:2%;height:36svh;width:58vw}
}
@media(prefers-reduced-motion:reduce){
  .classroom .course-name::after{animation:none}
}

/* CLASS mobile portrait v4 — borderless tapped course names, mirror Titi and swap with information. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-name:focus,
  .classroom .course-name:focus-visible{
    outline:0!important;
    box-shadow:none!important;
  }
  .classroom .course-name:focus-visible{
    border-bottom-color:#315e50;
    border-bottom-width:2px;
  }
  .classroom::after{
    left:0;right:auto;bottom:2%;
    width:67vw;height:43svh;
    transform:scaleX(-1);
    transform-origin:center center;
  }
  .classroom .course-online{
    left:auto!important;right:0!important;
    width:42%!important;bottom:12%;
  }
  .classroom .course-actions{align-items:flex-start}
  .classroom .course-actions-row{align-items:flex-start}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom::after{left:0;right:auto;bottom:1%;width:64vw;height:39svh}
  .classroom .course-online{left:auto!important;right:0!important;bottom:9%}
}

/* CLASS mobile portrait v5 — advanced course on one line; extra space beside Titi. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-advanced .course-name br{display:none}
  .classroom .course-advanced .course-name{
    font-size:clamp(17px,4.8vw,20px);
    letter-spacing:-.055em;
    white-space:nowrap;
  }
  .classroom::after{
    left:-16px;right:auto;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-width:360px){
  .classroom .course-advanced .course-name{font-size:clamp(16px,4.65vw,17px)}
  .classroom::after{left:-12px}
}

/* CLASS mobile portrait v6 — stronger single-line advanced heading; lift paired bottom elements. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-advanced .course-name{
    font-size:clamp(19px,5.35vw,22px);
    letter-spacing:-.055em;
  }
  .classroom::after{bottom:5%}
  .classroom .course-online{bottom:15%}
}
@media(max-width:760px) and (orientation:portrait) and (max-width:360px){
  .classroom .course-advanced .course-name{font-size:clamp(17px,4.95vw,19px)}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom::after{bottom:4%}
  .classroom .course-online{bottom:12%}
}

/* CLASS mobile portrait v7 — separate CORE from header, tighten spacing to ADVANCED. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-core{top:42%!important}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .classroom .course-core{top:40.5%!important}
}

/* CLASS mobile portrait v8 — subtly enlarge only the ADVANCED course title. */
@media(max-width:760px) and (orientation:portrait){
  .classroom .course-advanced .course-name{
    font-size:clamp(20px,5.65vw,23px);
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-width:360px){
  .classroom .course-advanced .course-name{
    font-size:clamp(18px,5.2vw,20px);
  }
}

/* ABOUT mobile portrait v1 — compact story, tappable details and three-tier footer. */
.about-mobile-panel,.about-mobile-dialog{display:none}
@media(max-width:760px) and (orientation:portrait){
  .last{height:100svh;min-height:100svh;align-items:stretch;overflow:hidden}
  .last::before{display:none}
  .last .last-grid{display:block;position:relative;width:88vw;height:100svh;margin:auto}
  .last .about{position:absolute;left:0;right:0;top:13.3%;width:100%;max-width:none;padding:0}
  .last .about .section-label{margin:0 0 13px;font-size:10px}
  .last .about blockquote{
    font-size:clamp(28px,8.6vw,37px);
    line-height:1.08;letter-spacing:-.04em;
    margin:0 0 17px;max-width:100%;
  }
  .last .about-copy{display:none}
  .last .about-mobile-panel{display:block}
  .last .about-mobile-summary{margin:0;font-size:clamp(12px,3.55vw,15px);line-height:1.6;color:#6b7771}
  .last .about-mobile-summary strong{display:block;font-weight:800;color:#16231f}
  .last .about-mobile-summary span{display:block}
  .last .about-read-more{
    margin:9px 0 15px;padding:2px 0 5px;
    border:0;border-bottom:1px solid #618f7d;
    border-radius:0;background:transparent;color:#315e50;
    font:700 13px/1.4 inherit;cursor:pointer;
  }
  .last .about-mobile-core-title{
    font-size:14px;font-weight:900;letter-spacing:.04em;
    color:#16231f;margin:0 0 10px;
  }
  .last .about-mobile-core-links{display:flex;justify-content:space-between;gap:5px}
  .last .about-core-link{
    min-width:0;flex:1;border:0;background:transparent;
    font-size:clamp(13px,3.75vw,16px);font-weight:900;
    letter-spacing:-.02em;padding:6px 0 8px;cursor:pointer;
    border-bottom:1px solid #c7cfcb;white-space:nowrap;
  }
  .last .about-core-link.core-a{color:#d65d47}
  .last .about-core-link.core-b{color:#59a98e}
  .last .about-core-link.core-c{color:#69a9d0}
  .last .about-core-link:focus-visible,.last .about-read-more:focus-visible{outline:2px solid #315e50;outline-offset:3px}
  .last .fixed-foot{
    position:absolute;left:0;right:0;bottom:2.6%;
    margin:0;width:100%;padding:11px 0 0;
    border-top:1px solid #c7cfcb;
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;
  }
  .last .footer-right{display:contents}
  .last .footer-socials{order:1;display:flex;justify-content:center;gap:15px}
  .last .footer-social{width:34px;height:34px}
  .last .footer-brand{order:2;width:100%;justify-content:center;gap:0}
  .last .footer-trademark{display:none}
  .last .footer-left{font-size:clamp(10px,2.8vw,12px);line-height:1.5;gap:2px;text-align:center;letter-spacing:0}
  .last .footer-copyright{
    order:3;font-size:10px;line-height:1.3;
    white-space:normal;text-align:center;
    color:#67756d;
  }
  .about-mobile-dialog[open]{
    display:block;position:fixed;inset:0;margin:auto;
    width:min(90vw,460px);max-width:90vw;
    max-height:75svh;height:auto;
    padding:22px 22px 25px;border-radius:12px;
    background:#fffdf8;color:#16231f;
    border:1px solid #b7cbc0;border-top:4px solid #59a98e;
    box-shadow:0 18px 60px rgba(12,34,26,.22);
    overflow-y:auto;overscroll-behavior:contain;z-index:999;
  }
  .about-mobile-dialog::backdrop{background:rgba(12,34,26,.50)}
  .about-mobile-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  .about-mobile-dialog-head span{font-size:10px;letter-spacing:.14em;font-weight:800;color:#618b78}
  .about-mobile-dialog-close{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:1px solid #9ebbae;border-radius:50%;color:#16231f;font-size:26px;cursor:pointer}
  .about-mobile-dialog h3{font-size:23px;line-height:1.3;margin:0 0 14px}
  .about-mobile-dialog #about-mobile-dialog-body{font-size:15px;line-height:1.8;color:#536a5e}
  .about-mobile-dialog #about-mobile-dialog-body p{margin:0}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about{top:12.5%}
  .last .about blockquote{font-size:clamp(25px,7.75vw,32px);margin-bottom:11px}
  .last .about-read-more{margin:6px 0 9px}
  .last .about-mobile-core-title{margin-bottom:5px}
  .last .fixed-foot{bottom:1.5%;gap:5px}
}

/* ABOUT mobile portrait v2 — brand portrait, stacked core actions, lighter compact dialogs. */
@media(max-width:760px) and (orientation:portrait){
  .last .about blockquote{margin-bottom:26px}
  .last .about-mobile-summary{line-height:1.58}
  .last .about-read-more{margin:10px 0 20px}
  .last .about-mobile-core-title{
    display:block;font-size:15px;margin-bottom:10px;
    letter-spacing:.025em;
  }
  .last .about-mobile-feature{
    display:grid;grid-template-columns:55% 45%;
    align-items:center;position:relative;width:100%;
    height:clamp(164px,22svh,204px);
  }
  .last .about-mobile-core-links{
    position:relative;z-index:2;display:flex;
    flex-direction:column;justify-content:center;
    gap:11px;align-items:stretch;
  }
  .last .about-core-link{
    display:flex;align-items:center;justify-content:space-between;
    flex:none;width:100%;min-height:42px;
    border:1px solid #ccdbd2;border-radius:5px;
    background:rgba(255,253,248,.9);
    padding:9px 12px 9px 13px;
    font-size:clamp(14px,3.9vw,16px);line-height:1.2;
    letter-spacing:.01em;text-align:left;
    transition:border-color .2s,background .2s;
  }
  .last .about-core-link span{font-size:22px;font-weight:400;line-height:.7;opacity:.7}
  .last .about-core-link:active{background:#edf4ef}
  .last .about-mobile-portrait{
    position:relative;z-index:1;align-self:stretch;
    width:122%;margin-left:-7%;
    background:url('me.png') center bottom/contain no-repeat;
    pointer-events:none;
  }
  .about-mobile-dialog[open]{
    width:min(82vw,345px);max-width:82vw;
    max-height:min(62svh,500px);
    padding:17px 20px 21px;border-radius:9px;
    border:1px solid #d5ded7;
    box-shadow:0 12px 35px rgba(12,34,26,.16);
  }
  .about-mobile-dialog::backdrop{background:rgba(12,34,26,.27)}
  .about-mobile-dialog-head{margin-bottom:8px}
  .about-mobile-dialog-head span{font-size:10px}
  .about-mobile-dialog-close{
    width:28px;height:28px;display:grid;place-items:center;
    border:none;border-radius:0;font-size:24px;font-weight:300;
    line-height:1;
  }
  .about-mobile-dialog h3{
    font-size:clamp(19px,5.1vw,23px);
    margin:0 0 10px;line-height:1.25;
    color:#18352c;
  }
  .about-mobile-dialog[data-kind="core-a"] h3{color:#d65d47}
  .about-mobile-dialog[data-kind="core-b"] h3{color:#399b7b}
  .about-mobile-dialog[data-kind="core-c"] h3{color:#5c9fc6}
  .about-mobile-dialog #about-mobile-dialog-body{
    font-size:14px;line-height:1.7;color:#52675d;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about blockquote{margin-bottom:13px}
  .last .about-read-more{margin:6px 0 10px}
  .last .about-mobile-core-title{margin-bottom:6px}
  .last .about-mobile-feature{height:clamp(141px,21svh,176px)}
  .last .about-mobile-core-links{gap:7px}
  .last .about-core-link{min-height:37px;padding:7px 10px}
}

/* ABOUT mobile portrait v3 — social links become the main contact rail; teacher + core in one dialog. */
@media(max-width:760px) and (orientation:portrait){
  .last .about-mobile-feature{
    display:grid;grid-template-columns:49% 51%;
    position:relative;align-items:stretch;
    width:100%;height:clamp(220px,31svh,280px);
    margin-top:3px;
  }
  .last .about-mobile-social{
    display:flex;flex-direction:column;
    justify-content:center;gap:0;z-index:2;min-width:0;
  }
  .last .about-social-row{
    display:flex;align-items:center;gap:9px;
    min-height:51px;padding:7px 4px 7px 0;
    border-bottom:1px solid #d6dfd8;
    text-decoration:none;color:#20372c;
    background:transparent;
    transition:color .2s,border-color .2s,transform .2s;
  }
  .last .about-social-row:first-child{border-top:1px solid #d6dfd8}
  .last .about-social-mark{
    flex:0 0 33px;width:33px;height:33px;
    display:grid;place-items:center;
    border:1px solid #c7d3cb;border-radius:7px;
    background:#fffdf8;color:#315e50;
    font-size:15px;font-weight:900;line-height:1;
    letter-spacing:-.05em;
  }
  .last .about-social-row.line .about-social-mark{font-size:8px;letter-spacing:-.07em}
  .last .about-social-row.youtube .about-social-mark{font-size:14px}
  .last .about-social-row.facebook .about-social-mark{font:bold 20px Arial,sans-serif}
  .last .about-social-row.instagram .about-social-mark{font-size:26px;font-weight:400}
  .last .about-social-name{font-size:clamp(13px,3.55vw,15px);font-weight:800;white-space:nowrap}
  .last .about-social-arrow{font-size:14px;line-height:1;margin-left:auto;color:#6b9985}
  .last .about-social-row:active{transform:translateX(3px)}
  .last .about-social-row:focus-visible{outline:2px solid #315e50;outline-offset:3px}
  .last .about-mobile-portrait{
    width:140%;height:100%;margin-left:-11%;
    background:url('me.png') center bottom/contain no-repeat;
    align-self:end;pointer-events:none;
  }
  /* These social links now appear in the content; avoid showing them twice. */
  .last .footer-socials{display:none}
  .last .fixed-foot{gap:6px;padding-top:10px}
  .last .about-mobile-dialog .about-dialog-core-heading{
    margin:18px 0 10px;padding-top:14px;
    border-top:1px solid #dce5df;
    color:#18352c;font-size:15px;font-weight:900;
  }
  .last .about-mobile-dialog .about-dialog-core-list{
    display:grid;gap:13px;
  }
  .last .about-mobile-dialog .about-dialog-core-list .core{
    display:block;color:#52675d;font-size:13px;line-height:1.6;
  }
  .last .about-mobile-dialog .about-dialog-core-list b{
    display:block;font-size:14px;margin-bottom:3px;
  }
  .last .about-mobile-dialog .about-dialog-core-list span{
    display:block;white-space:normal;
  }
  .last .about-mobile-dialog .about-dialog-core-list .core-a b{color:#d65d47}
  .last .about-mobile-dialog .about-dialog-core-list .core-b b{color:#399b7b}
  .last .about-mobile-dialog .about-dialog-core-list .core-c b{color:#5c9fc6}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about-mobile-feature{height:clamp(185px,29svh,225px)}
  .last .about-social-row{min-height:44px;padding:5px 3px 5px 0}
  .last .about-social-mark{width:30px;height:30px;flex-basis:30px}
}

/* ABOUT mobile portrait v4 — unframed compact social rail, larger portrait, tagline above footer rule, justified reading. */
.about-mobile-tagline{display:none}
@media(max-width:760px) and (orientation:portrait){
  .last .about-read-more,
  .last .about-read-more:focus,
  .last .about-read-more:focus-visible{
    outline:0!important;box-shadow:none!important;
    border:0!important;border-bottom:1px solid #618f7d!important;
    border-radius:0;background:transparent;
    -webkit-tap-highlight-color:transparent;
  }
  .last .about-read-more:focus-visible{border-bottom-width:2px!important}
  /* A compact, clean editorial contact list — not boxed cards. */
  .last .about-mobile-feature{
    grid-template-columns:42% 58%;
    height:clamp(245px,35svh,320px);
    margin-top:0;
  }
  .last .about-mobile-social{
    justify-content:center;gap:10px;
    padding-left:0;
  }
  .last .about-social-row,
  .last .about-social-row:first-child{
    gap:8px;width:100%;min-height:43px;
    border:0!important;padding:6px 0;
    background:transparent;
    color:#1d382c;
  }
  .last .about-social-mark{
    flex:0 0 27px;width:27px;height:27px;
    border:0!important;border-radius:50%;
    background:#eaf2eb;color:#315e50;
    font-size:13px;
  }
  .last .about-social-row.line .about-social-mark{
    color:#167a50;background:#e2f1e7;font-size:8px;
  }
  .last .about-social-row.youtube .about-social-mark{
    color:#bc4c42;background:#f8e9e5;font-size:11px;
  }
  .last .about-social-row.facebook .about-social-mark{
    color:#476d9a;background:#e8edf6;font:bold 18px Arial,sans-serif;
  }
  .last .about-social-row.instagram .about-social-mark{
    color:#a36b8d;background:#f4eaf1;font-size:23px;font-weight:400;
  }
  .last .about-social-name{
    font-size:clamp(12px,3.25vw,14px);
    letter-spacing:-.025em;font-weight:750;
  }
  .last .about-social-arrow{
    margin-left:auto;font-size:13px;color:#789184;
  }
  .last .about-mobile-portrait{
    width:163%;height:100%;margin-left:-17%;
    background-position:center bottom;
    background-size:contain;
  }
  .last .fixed-foot{
    border-top:0!important;
    padding-top:0!important;gap:0!important;
    bottom:2.5%;
  }
  .last .about-mobile-tagline{
    display:block;order:0;
    width:100%;text-align:center;
    font-size:clamp(11px,3vw,13px);
    font-weight:650;letter-spacing:.015em;
    line-height:1.5;color:#315e50;
    padding-bottom:10px;
  }
  .last .footer-brand{
    order:1;border-top:1px solid #c7cfcb;
    padding-top:11px;width:100%;
  }
  .last .footer-left>div:first-child{display:none}
  .last .footer-left{gap:0}
  .last .footer-copyright{
    order:2;margin-top:6px;
  }
  /* Make the teacher story and the three core explanations read in even CJK columns. */
  .about-mobile-dialog[data-kind="teacher"]{
    width:min(86vw,360px);max-width:86vw;
  }
  .about-mobile-dialog #about-mobile-dialog-body .about-intro{
    text-align:justify;text-justify:inter-ideograph;
    letter-spacing:.008em;line-height:1.85;
    overflow-wrap:anywhere;
  }
  .about-mobile-dialog .about-dialog-core-list .core span{
    text-align:justify;text-justify:inter-ideograph;
    line-height:1.8;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about-mobile-feature{height:clamp(210px,32svh,265px)}
  .last .about-mobile-social{gap:6px}
  .last .about-social-row{min-height:39px}
  .last .about-mobile-tagline{padding-bottom:7px}
  .last .footer-brand{padding-top:7px}
  .last .fixed-foot{bottom:1.5%}
}

/* ABOUT mobile portrait v5 — taller, slightly raised portrait and closer arrowless social links. */
@media(max-width:760px) and (orientation:portrait){
  .last .about-mobile-social{
    transform:translateX(12px);
    width:calc(100% - 12px);
  }
  .last .about-social-row{justify-content:flex-start}
  .last .about-social-arrow{display:none!important}
  .last .about-mobile-portrait{
    width:167%;
    height:calc(100% + 34px);
    transform:translateY(-30px);
    background-position:center bottom;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about-mobile-portrait{
    height:calc(100% + 24px);
    transform:translateY(-21px);
  }
}

/* ABOUT mobile portrait v6 — move social links up/right, enlarge teacher link. */
@media(max-width:760px) and (orientation:portrait){
  .last .about-mobile-social{
    transform:translate(28px,-24px);
    width:calc(100% - 28px);
  }
  .last .about-read-more{
    font-size:clamp(15px,4vw,17px);
    font-weight:750;
    line-height:1.4;
  }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:540px){
  .last .about-mobile-social{transform:translate(24px,-18px);width:calc(100% - 24px)}
}

/* WHY/PLAY mobile portrait v4 — responsive connected circuit without text flashes. */
@media(max-width:760px) and (orientation:portrait){
  .whyplay .play-circuit-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
  .whyplay .whyplay-grid{position:relative;z-index:2}
  .whyplay .playbox .btn::after{content:none!important;display:none!important}
  .play-circuit-art .circuit-loop,.play-circuit-art #play-cta-wire{
    stroke:#7c9f92;stroke-width:1.35;opacity:.57;fill:none;stroke-linecap:round;stroke-linejoin:round;
  }
  .play-circuit-art .circuit-loop-flow,.play-circuit-art .circuit-cta-flow{
    fill:none;stroke:#00d2ff;stroke-width:2.4;
    stroke-dasharray:18 420;stroke-dashoffset:0;opacity:.8;
    stroke-linecap:round;animation:playCircuitFlow 9s linear infinite;
  }
  .play-circuit-art .circuit-cta-flow{animation-delay:-2.5s}
}
@media(prefers-reduced-motion:reduce){
  .play-circuit-art .circuit-loop-flow,.play-circuit-art .circuit-cta-flow{animation:none;opacity:.18}
}

/* CLASS mobile portrait v3 — show both course introductions in either modal entry. */
@media(max-width:760px) and (orientation:portrait){
  .class-course-modal #class-course-modal-content{
    display:grid;
    gap:20px;
  }
  .class-course-modal .class-modal-course{
    min-width:0;
  }
  .class-course-modal .class-modal-course + .class-modal-course{
    border-top:1px solid rgba(49,94,80,.22);
    padding-top:20px;
  }
  .class-course-modal #class-course-modal-content .class-modal-course>.course-info-label{
    display:none;
  }
  .class-course-modal #class-course-modal-content .class-modal-course strong{
    display:block;
    font-size:clamp(17px,4.6vw,20px);
    line-height:1.4;
    margin-bottom:12px;
  }
  .class-course-modal #class-course-modal-content .class-modal-course ul{
    gap:9px;
  }
  .class-course-modal #class-course-modal-content .class-modal-course li{
    font-size:clamp(12px,3.5vw,14px);
    line-height:1.62;
  }
}

/* CLASS mobile portrait v4 — clearer, larger and consistently aligned course descriptions. */
@media(max-width:760px) and (orientation:portrait){
  .class-course-modal[open]{
    width:min(92vw,460px);max-width:92vw;
    padding:19px 20px 24px;
  }
  .class-course-modal #class-course-modal-content{
    gap:21px;
  }
  .class-course-modal #class-course-modal-content .class-modal-course strong{
    font-size:clamp(19px,5.1vw,22px);
    line-height:1.43;
    letter-spacing:.005em;
    margin-bottom:13px;
  }
  .class-course-modal #class-course-modal-content .class-modal-course ul{
    display:grid;gap:12px;
    padding:0;margin:0;
  }
  .class-course-modal #class-course-modal-content .class-modal-course li{
    position:relative;
    padding-left:17px;
    font-size:clamp(15px,3.9vw,16px);
    line-height:1.78;
    letter-spacing:.008em;
    text-align:justify;
    text-justify:inter-ideograph;
    overflow-wrap:break-word;
  }
  .class-course-modal #class-course-modal-content .class-modal-course li::before{
    left:0;top:0;
    font-size:15px;
    line-height:1.78;
  }
  .class-course-modal .class-modal-course + .class-modal-course{
    padding-top:21px;
  }
}

/* LEARN mobile portrait v7 — underline follows the text width, not padded link width. */
@media(max-width:760px) and (orientation:portrait){
  .learn .path a{
    display:inline-block;
    width:max-content;
    max-width:100%;
    padding:5px 0 8px;
    white-space:nowrap;
  }
  .learn .path a::after,
  .learn .path:nth-child(2) a::after{
    left:0;right:auto;
    width:100%;
    bottom:2px;
    transform:scaleX(1);
    transform-origin:left center;
  }
}

/* MOBILE PAGE NAVIGATION v1 — the site uses a transformed five-screen track, not native page scroll. */
@media(max-width:760px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  html{scroll-snap-type:none;scroll-padding-top:0}
  .viewport{height:100svh;overflow:hidden;overscroll-behavior:none}
  .track{height:100%;transition:transform .72s cubic-bezier(.22,.78,.2,1)}
  .screen{height:100svh;min-height:100svh;scroll-snap-align:none}
}
@media(max-width:760px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  .track{transition-duration:.01ms}
}

/* MOBILE PAGE NAVIGATION v2 — handle live touch motion on iOS/Android; keep dialogs scrollable. */
@media(max-width:760px) and (orientation:portrait){
  .viewport,.track,.screen{touch-action:pan-x}
  .class-course-modal[open],.about-mobile-dialog[open]{touch-action:pan-y}
}

/* MOBILE SCROLL v1 — abandon swipe paging; restore reliable native vertical scrolling. */
@media(max-width:760px) and (orientation:portrait){
  html,body{
    height:auto!important;min-height:100%;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
  }
  html{scroll-snap-type:none!important;scroll-behavior:auto}
  .viewport{
    height:auto!important;min-height:100svh;
    overflow:visible!important;touch-action:pan-y!important;
  }
  .track{
    height:auto!important;
    transform:none!important;
    transition:none!important;
    will-change:auto!important;
    touch-action:pan-y!important;
  }
  .screen{
    height:100svh;min-height:100svh;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
    touch-action:pan-y!important;
  }
  .class-course-modal[open],.about-mobile-dialog[open]{
    touch-action:pan-y!important;
    overscroll-behavior:contain;
  }
}

/* SAFARI LEARN v56 — move both learning routes down equally; preserve standalone PWA and desktop. */
@supports (-webkit-touch-callout: none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .learn .path:first-child{top:35%!important}
    .learn .path:nth-child(2){top:63%!important}
  }
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser) and (max-height:540px){
    .learn .path:first-child{top:34%!important}
    .learn .path:nth-child(2){top:61%!important}
  }
}

/* SAFARI CLASS TITI v57 — reduce mascot dimensions 5% only in iPhone browser mode. */
@supports (-webkit-touch-callout: none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .classroom::after{width:63.65vw;height:40.85svh}
  }
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser) and (max-height:540px){
    .classroom::after{width:60.8vw;height:37.05svh}
  }
}

/* SAFARI ABOUT v58 — preserve approved PWA; reduce portrait 8%, add foot clearance, shift social rail 10px right. */
@supports (-webkit-touch-callout: none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .last .about-mobile-portrait{
      transform:translateY(-35px) scale(.92);
      transform-origin:center bottom;
    }
    .last .about-mobile-social{
      transform:translate(38px,-24px);
      width:calc(100% - 38px);
    }
  }
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser) and (max-height:540px){
    .last .about-mobile-portrait{transform:translateY(-26px) scale(.92)}
    .last .about-mobile-social{
      transform:translate(34px,-18px);
      width:calc(100% - 34px);
    }
  }
}

/* SAFARI ABOUT v59 — horizontal-only refinements; leave PWA and desktop untouched. */
@supports (-webkit-touch-callout: none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .last .about-mobile-portrait{transform:translate(-12px,-35px) scale(.92)}
    .last .about-mobile-social{
      transform:translate(48px,-24px);
      width:calc(100% - 48px);
    }
  }
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser) and (max-height:540px){
    .last .about-mobile-portrait{transform:translate(-12px,-26px) scale(.92)}
    .last .about-mobile-social{
      transform:translate(44px,-18px);
      width:calc(100% - 44px);
    }
  }
}

/* UNIFIED MOBILE RESPONSIVE v60
   One fluid portrait layout shared by Safari and standalone PWA.
   Maintain a safe design canvas on short viewports; allow native page scrolling.
   Reserve <=540px viewport heights for exceptional compact-mode rules. */
@media (max-width:760px) and (orientation:portrait){
  :root{--mobile-design-height:max(100svh,790px)}
  .hero,.learn,.classroom{
    height:var(--mobile-design-height)!important;
    min-height:var(--mobile-design-height)!important;
  }
  .whyplay{
    height:auto!important;
    min-height:var(--mobile-design-height)!important;
    padding-block:clamp(32px,5svh,58px);
  }
  .hero{
    padding-top:clamp(116px,calc(var(--mobile-design-height) * .15),148px);
  }
  .hero .lab{
    --ring-bottom:calc(var(--mobile-design-height) * .39);
  }
  .hero-mascot.head{bottom:calc(var(--mobile-design-height) * .12)}
  .whyplay .whyplay-grid{
    gap:clamp(22px,calc(var(--mobile-design-height) * .04),36px);
  }
  .learn .learn-grid{
    height:var(--mobile-design-height)!important;
  }
  .learn .head-row{top:14%!important}
  .learn .path:first-child{top:35%!important}
  .learn .path:nth-child(2){top:63%!important}
  .classroom .wrap{
    height:var(--mobile-design-height)!important;
  }
  .classroom::after{
    width:min(63vw,270px);
    height:calc(var(--mobile-design-height) * .40);
    bottom:5%;
  }
  /* Content-first footer positioning prevents the portrait from crossing the tagline. */
  .last{
    height:auto!important;min-height:var(--mobile-design-height)!important;
    overflow:visible!important;
  }
  .last .last-grid{
    display:flex!important;flex-direction:column;justify-content:space-between;
    width:88vw;height:auto!important;min-height:var(--mobile-design-height)!important;
    padding-top:clamp(102px,calc(var(--mobile-design-height) * .13),128px);
    padding-bottom:18px;gap:20px;
  }
  .last .about{
    position:relative!important;inset:auto!important;
    width:100%;max-width:none;flex:0 0 auto;
  }
  .last .about-mobile-feature{
    height:clamp(235px,calc(var(--mobile-design-height) * .34),310px);
  }
  .last .about-mobile-portrait{
    width:154%;height:calc(100% + 12px);margin-left:-17%;
    transform:translate(-12px,-10px) scale(.92);
    transform-origin:center bottom;
  }
  .last .about-mobile-social{
    transform:translate(38px,-12px);
    width:calc(100% - 38px);
  }
  .last .fixed-foot{
    position:relative!important;inset:auto!important;
    flex:0 0 auto;width:100%;margin-top:auto;
  }
  .class-course-modal[open],.about-mobile-dialog[open]{
    max-height:min(78dvh,690px);
  }
}
@media (max-width:360px) and (orientation:portrait){
  :root{--mobile-design-height:max(100svh,820px)}
  .last .about-mobile-feature{height:235px}
  .last .about-mobile-social{transform:translate(28px,-8px);width:calc(100% - 28px)}
}

/* PWA CONTENT FLOW v61 — first structural pass, standalone portrait ONLY.
   Remove screen-sized section locks, keep normal document scrolling.
   Do not apply to browser mode or desktop. Further visual refinements follow testing. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  html{scroll-snap-type:none!important;scroll-behavior:auto!important}
  body,.viewport,.track{height:auto!important;min-height:0!important}
  .viewport,.track{overflow:visible!important}
  .track{transform:none!important}
  .screen,
  .hero,.whyplay,.learn,.classroom,.last{
    height:auto!important;min-height:0!important;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
  /* HERO: retain composition and an intentional spacious bottom, not viewport height. */
  .hero{
    display:block!important;
    padding-top:clamp(116px,15vw,148px)!important;
    padding-bottom:clamp(420px,112vw,520px)!important;
  }
  .hero .lab{--ring-bottom:clamp(280px,78vw,350px)}
  .hero-mascot.head{bottom:clamp(65px,18vw,110px)}
  /* WHY/PLAY: natural content determines section height. */
  .whyplay{
    padding-block:clamp(110px,24vw,160px) clamp(90px,20vw,135px)!important;
    overflow:hidden;
  }
  .whyplay .whyplay-grid{height:auto!important}
  /* LEARN: replace height-based absolute placement with a content-flow stack. */
  .learn{
    display:block!important;
    padding-block:clamp(104px,25vw,140px) clamp(105px,26vw,145px)!important;
  }
  .learn .learn-grid{
    height:auto!important;min-height:0!important;
    display:block!important;
  }
  .learn .head-row{
    position:relative!important;inset:auto!important;
    top:auto!important;left:auto!important;width:100%!important;
    margin-bottom:clamp(55px,14vw,78px)!important;
  }
  .learn .paths{
    display:flex!important;flex-direction:column!important;
    align-items:stretch;gap:clamp(58px,16vw,85px);
    position:relative!important;inset:auto!important;
    width:100%!important;height:auto!important;
  }
  .learn .path:first-child,.learn .path:nth-child(2){
    position:relative!important;inset:auto!important;
    top:auto!important;bottom:auto!important;
    left:auto!important;right:auto!important;
    width:100%!important;
  }
  /* CLASS: put headings, both courses, and action links back into document flow. */
  .classroom{
    display:block!important;overflow:hidden;
    padding-block:clamp(105px,25vw,140px) 275px!important;
  }
  .classroom .wrap{
    width:88vw;height:auto!important;min-height:0!important;
    position:relative;
  }
  .classroom .section-label,.classroom h2{
    position:relative!important;inset:auto!important;
    left:auto!important;top:auto!important;
  }
  .classroom h2{margin:24px 0 70px!important}
  .classroom .classes{
    display:flex!important;flex-direction:column;
    gap:clamp(44px,11vw,62px);
    height:auto!important;width:100%!important;
  }
  .classroom .course,.classroom .course+.course{
    position:relative!important;inset:auto!important;
    top:auto!important;bottom:auto!important;
    left:auto!important;right:auto!important;
    width:100%!important;height:auto!important;
  }
  .classroom .course-online{
    width:100%!important;margin-top:15px!important;
    padding-left:45%!important;
  }
  .classroom::after{
    bottom:28px!important;height:235px;width:min(58vw,250px);
  }
  /* ABOUT: footer follows content instead of occupying a fixed screen edge. */
  .last{display:block!important;overflow:visible!important}
  .last .last-grid{
    height:auto!important;min-height:0!important;
    padding-top:clamp(102px,24vw,132px);
    padding-bottom:26px;gap:clamp(28px,7vw,42px);
  }
  .last .fixed-foot{margin-top:0!important}
}

/* Mobile version indicator v62 — utilities only; no changes to page layouts. */
.site-version-widget{display:none}
@media (max-width:760px) and (orientation:portrait){
  .site-version-widget{display:block;position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:800;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif}
  .site-version-trigger{appearance:none;border:1px solid rgba(49,94,80,.25);border-radius:999px;background:rgba(255,253,248,.92);color:#315e50;box-shadow:0 2px 9px rgba(0,0,0,.08);font:700 10px/1.1 system-ui,sans-serif;padding:7px 10px;min-height:29px;cursor:pointer}
  .site-version-trigger.outdated{background:#f6e8cb;border-color:#b69052}
  .site-version-panel[hidden]{display:none!important}
  .site-version-panel{position:absolute;right:0;bottom:calc(100% + 9px);width:min(285px,calc(100vw - 24px));background:#fffdf8;color:#16231f;border:1px solid #c7d3cb;border-radius:10px;box-shadow:0 10px 32px rgba(0,0,0,.16);padding:16px;font-size:13px;line-height:1.5}
  .site-version-panel strong{font-size:15px;display:block;margin-bottom:8px}
  .site-version-row{display:flex;justify-content:space-between;gap:12px;margin:5px 0}
  .site-version-panel p{font-size:12px;color:#53685d;margin:9px 0}
  .site-version-actions{display:flex;flex-wrap:wrap;gap:7px}
  .site-version-actions button{border:1px solid #a8bdb0;background:#edf4ef;color:#234c39;border-radius:6px;padding:8px 9px;font:700 12px/1.3 inherit;cursor:pointer}
  .site-version-actions button[hidden]{display:none!important}
  .site-version-actions button:disabled{opacity:.55}
}

/* PWA HERO PLAY POSITION v63 — restore lower CTA without viewport-height locking. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .hero{padding-bottom:clamp(65px,16vw,92px)!important}
  .hero .start{
    margin-top:clamp(335px,94vw,430px)!important;
    margin-bottom:0!important;
    position:relative;z-index:9;
  }
}

/* PWA HERO v64 — lower PLAY by 55px without lengthening the section; fixed logo shortcut. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .hero{padding-bottom:clamp(10px,calc(16vw - 55px),37px)!important}
  .hero .start{margin-top:calc(clamp(335px,94vw,430px) + 55px)!important}
  .nav .logo{cursor:pointer;touch-action:manipulation}
  .nav{position:fixed!important}
}

/* PWA HERO BACKGROUND TAIL v65 — visually extend only the white area.
   Keep section sizing and every HERO item at its current position. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .hero{
    --hero-white-tail:120px;
    margin-bottom:var(--hero-white-tail)!important;
    box-shadow:0 var(--hero-white-tail) 0 0 #fffdf8;
  }
}

/* PWA WHY/PLAY TOP SPACING v66 — reduce only the empty space above WHY.
   Keep all content, circuit, button and internal spacing unchanged. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .whyplay{padding-top:clamp(44px,12vw,60px)!important}
}

/* PWA LEARN SPACING v67 — compact the section without changing typography or ornaments.
   Fluid width-based spacing is shared by all standalone portrait phone widths. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .learn{
    padding-top:clamp(68px,18vw,96px)!important;
    padding-bottom:clamp(54px,14vw,76px)!important;
  }
  .learn .paths{
    gap:clamp(38px,11vw,58px)!important;
  }
}

/* PWA LEARN TOP SPACING v68 — match WHY/PLAY top padding only. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .learn{padding-top:clamp(44px,12vw,60px)!important}
}

/* PWA CLASS RIGHT RAIL v69 — content-led two-column composition.
   Titi stays to the left; CORE, ADVANCED and INFORMATION flow together on right.
   Mobile standalone only; desktop and Safari untouched. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .classroom{
    display:block!important;
    position:relative;
    padding-top:clamp(44px,12vw,60px)!important;
    padding-bottom:clamp(55px,14vw,78px)!important;
    overflow:hidden;
    isolation:isolate;
  }
  .classroom .wrap{height:auto!important;min-height:0!important;z-index:3}
  .classroom .section-label{position:relative!important;top:auto!important;left:auto!important}
  .classroom h2{
    position:relative!important;inset:auto!important;
    margin:clamp(20px,5vw,28px) 0 clamp(42px,11vw,60px)!important;
  }
  .classroom .classes{
    display:flex!important;
    flex-direction:column!important;
    position:relative!important;inset:auto!important;
    width:59%!important;height:auto!important;
    margin:0 0 0 auto!important;
    align-items:stretch!important;
    gap:clamp(21px,5.7vw,31px)!important;
  }
  .classroom .course,.classroom .course+.course{
    position:relative!important;inset:auto!important;
    width:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;
    align-self:stretch;
  }
  .classroom .course-kicker{
    font-size:clamp(9px,2.4vw,11px);
    margin:0 0 clamp(6px,1.5vw,9px)!important;
  }
  .classroom .course-name,
  .classroom .course-advanced .course-name{
    display:block!important;
    width:100%!important;max-width:100%!important;
    font-size:clamp(15px,4.1vw,18px)!important;
    line-height:1.35!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
    padding:3px 0 8px!important;
    cursor:pointer;
  }
  .classroom .course-core .course-name br,
  .classroom .course-advanced .course-name br{display:initial!important}
  .classroom .course-name::after{
    font-size:clamp(9px,2.4vw,11px)!important;
    margin-left:4px!important;
  }
  .classroom .course-online{
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
  .classroom .course-actions{width:100%;gap:clamp(7px,1.8vw,10px)}
  .classroom .course-actions-row{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:clamp(7px,1.8vw,11px);
  }
  .classroom .course-action{
    font-size:clamp(14px,3.65vw,17px)!important;
    line-height:1.3;
    padding:4px 0 6px;
  }
  .classroom::after{
    left:-3vw!important;right:auto!important;top:auto!important;
    bottom:clamp(45px,12vw,74px)!important;
    width:clamp(148px,48vw,232px)!important;
    height:clamp(215px,66vw,330px)!important;
    transform:scaleX(-1);
    background-position:center bottom;
    background-size:contain;
    pointer-events:none;
    z-index:1;
  }
}
@media (max-width:360px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{width:61%!important}
  .classroom .course-name,
  .classroom .course-advanced .course-name{font-size:clamp(14px,4vw,15px)!important}
  .classroom::after{left:-5vw!important;width:46vw!important}
}

/* PWA CLASS BALANCE v70 — shift right information rail, enlarge left Titi.
   Preserve typography, two-line course names, and interaction. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{
    transform:translateX(clamp(8px,2.4vw,13px));
  }
  .classroom::after{
    width:clamp(175px,55vw,268px)!important;
    height:clamp(245px,76vw,385px)!important;
  }
}
@media (max-width:360px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{transform:translateX(6px)}
  .classroom::after{width:53vw!important}
}

/* PWA CLASS BALANCE v71 — more room for enlarged Titi; right rail shifts inward safely.
   Use fluid widths, preserve two-line course names and all actions. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{
    width:55%!important;
    transform:translateX(clamp(7px,1.9vw,11px));
  }
  .classroom::after{
    width:clamp(200px,63vw,305px)!important;
    height:clamp(280px,87vw,425px)!important;
  }
}
@media (max-width:360px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{width:57%!important;transform:translateX(5px)}
  .classroom::after{width:60vw!important}
}

/* PWA CLASS ALIGNMENT v72 — visibly right-align the left-aligned content rail.
   Shorten course-title underlines to their text; keep Titi fully unchanged. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{
    width:45%!important;
    margin-left:auto!important;
    transform:translateX(clamp(2px,.6vw,4px))!important;
    align-items:flex-start!important;
  }
  .classroom .course-name,
  .classroom .course-advanced .course-name{
    display:inline-block!important;
    width:max-content!important;
    max-width:100%!important;
    font-size:clamp(13px,3.5vw,15px)!important;
    text-align:left!important;
  }
  .classroom .course-actions,
  .classroom .course-actions-row{align-items:flex-start!important;text-align:left!important}
}
@media (max-width:360px) and (orientation:portrait) and (display-mode:standalone){
  .classroom .classes{width:48%!important;transform:translateX(2px)!important}
  .classroom .course-name,
  .classroom .course-advanced .course-name{font-size:clamp(12px,3.45vw,13px)!important}
}

/* PWA ABOUT COMPOSITION v73 — polished content-led spacing and portrait/social balance.
   Standalone mobile only. Leave desktop, browser, content and dialog behavior intact. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .last .last-grid{
    padding-top:clamp(118px,30vw,138px)!important;
    padding-bottom:clamp(22px,5vw,30px)!important;
    gap:clamp(22px,5vw,30px)!important;
  }
  .last .about .section-label{margin-bottom:clamp(15px,4vw,21px)}
  .last .about blockquote{
    font-size:clamp(28px,8.1vw,35px);
    line-height:1.09;
    margin-bottom:clamp(21px,5vw,28px)!important;
  }
  .last .about-mobile-summary{line-height:1.52}
  .last .about-read-more{margin:clamp(7px,2vw,10px) 0 clamp(13px,3.4vw,18px)!important}
  .last .about-mobile-feature{
    height:clamp(220px,61vw,284px)!important;
    margin-top:0;
  }
  .last .about-mobile-social{justify-content:center;gap:clamp(6px,1.7vw,10px)}
  .last .about-social-row{min-height:clamp(40px,11vw,46px);padding:5px 0}
  .last .fixed-foot{margin-top:clamp(8px,2vw,14px)!important}
  .last .about-mobile-tagline{padding-bottom:clamp(7px,1.8vw,10px)}
  .last .footer-brand{padding-top:clamp(8px,2vw,11px)}
}

/* ABOUT PWA AND DESKTOP FOOTER v74 — user review:
   tighten the mobile top, feature whitespace and loosen footer metadata;
   ensure the existing trademark image is visible before company details on desktop. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .last .last-grid{
    padding-top:clamp(74px,19vw,88px)!important;
    padding-bottom:clamp(25px,6vw,34px)!important;
    gap:clamp(10px,2.8vw,16px)!important;
  }
  .last .about .section-label{margin-bottom:clamp(12px,3vw,16px)}
  .last .about-mobile-feature{
    height:clamp(205px,57vw,265px)!important;
  }
  .last .about-mobile-social{gap:clamp(4px,1.3vw,8px)}
  .last .fixed-foot{margin-top:0!important;gap:0!important}
  .last .about-mobile-tagline{
    padding:0 0 clamp(14px,3.7vw,20px)!important;
    line-height:1.55;
  }
  .last .footer-brand{padding-top:clamp(14px,3.5vw,18px)!important}
  .last .footer-left{line-height:1.65;letter-spacing:0}
  .last .footer-copyright{margin-top:clamp(12px,3vw,17px)!important;line-height:1.55}
}
/* Desktop: make the existing company trademark visibly occupy the leading footer slot. */
@media (min-width:761px){
  .last .footer-brand{display:flex;align-items:center;gap:16px}
  .last .footer-trademark{
    display:block!important;visibility:visible!important;opacity:1!important;
    width:58px!important;max-width:58px!important;height:58px!important;
    object-fit:contain;flex:0 0 58px;
  }
}

/* PWA ABOUT HEADER AND TRADEMARK v75 — align section top to other content pages,
   and expose the existing company trademark above uncluttered footer details. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .last .last-grid{
    padding-top:clamp(44px,12vw,60px)!important;
    gap:clamp(14px,3.5vw,20px)!important;
  }
  .last .about{padding-top:0!important;margin-top:0!important}
  .last .fixed-foot{margin-top:clamp(8px,2vw,12px)!important}
  .last .footer-brand{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(8px,2.4vw,12px)!important;
    width:100%;
  }
  .last .footer-trademark{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:clamp(38px,11vw,48px)!important;
    max-width:48px!important;
    height:clamp(38px,11vw,48px)!important;
    flex:0 0 auto!important;
    object-fit:contain;
    margin:0 auto;
  }
  .last .footer-left{
    width:100%;
    text-align:center;
    line-height:1.55!important;
  }
  .last .footer-copyright{margin-top:clamp(9px,2.3vw,13px)!important}
}

/* PWA FOOTER TRADEMARK INLINE v76 — desktop-like trademark and company data in one row. */
@media (max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .last .footer-brand{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(7px,2.2vw,12px)!important;
    width:100%!important;
  }
  .last .footer-trademark{
    width:clamp(30px,8.5vw,38px)!important;
    height:clamp(30px,8.5vw,38px)!important;
    max-width:38px!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  .last .footer-left{
    width:auto!important;min-width:0!important;
    font-size:clamp(9px,2.5vw,11px)!important;
    line-height:1.45!important;
    text-align:left!important;
    overflow-wrap:anywhere;
  }
}

/* SAFARI HERO WHITE TAIL AND LOGO v77 — mirror approved PWA behavior in iPhone Safari only.
   No changes to standalone PWA, desktop, or HERO foreground composition. */
@supports (-webkit-touch-callout: none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .hero{
      --safari-hero-white-tail:160px;
      margin-bottom:var(--safari-hero-white-tail)!important;
      box-shadow:0 var(--safari-hero-white-tail) 0 0 #fffdf8;
    }
    .nav{position:fixed!important}
    .nav .logo{cursor:pointer;touch-action:manipulation}
  }
}

/* SAFARI WHYPLAY COMPACT TOP v78 — remove forced height that vertically centers content.
   Match approved PWA top spacing while keeping all WHY/PLAY items intact. */
@supports (-webkit-touch-callout:none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .whyplay{
      height:auto!important;
      min-height:0!important;
      align-items:flex-start!important;
      padding-top:clamp(44px,12vw,60px)!important;
      padding-bottom:clamp(90px,20vw,135px)!important;
    }
    .whyplay .whyplay-grid{
      height:auto!important;
      margin-top:0!important;
      margin-bottom:0!important;
    }
  }
}

/* SAFARI LEARN NATURAL SPACING v79 — same section spacing and content flow as approved PWA.
   Preserve text, A/B relative spacing, visual diagonal, ornamentation, and links. */
@supports (-webkit-touch-callout:none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .learn{
      display:block!important;
      height:auto!important;min-height:0!important;
      padding-top:clamp(44px,12vw,60px)!important;
      padding-bottom:clamp(54px,14vw,76px)!important;
    }
    .learn .learn-grid{
      display:block!important;
      height:auto!important;min-height:0!important;
    }
    .learn .head-row{
      position:relative!important;inset:auto!important;
      top:auto!important;left:auto!important;width:100%!important;
      margin-bottom:clamp(55px,14vw,78px)!important;
    }
    .learn .paths{
      position:relative!important;inset:auto!important;
      display:flex!important;flex-direction:column!important;
      align-items:stretch!important;
      gap:clamp(38px,11vw,58px)!important;
      width:100%!important;height:auto!important;
    }
    .learn .path:first-child,.learn .path:nth-child(2){
      position:relative!important;inset:auto!important;
      top:auto!important;bottom:auto!important;
      left:auto!important;right:auto!important;
      width:100%!important;
    }
  }
}

/* SAFARI CLASS PWA COMPOSITION v80 — match the approved mobile PWA CLASS
   top spacing, left Titi, compact right rail and bottom breathing room.
   Browser-mode iOS portrait ONLY. Standalone PWA and desktop remain unchanged. */
@supports (-webkit-touch-callout:none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .classroom{
      display:block!important;position:relative;
      height:auto!important;min-height:0!important;
      padding-top:clamp(44px,12vw,60px)!important;
      padding-bottom:clamp(55px,14vw,78px)!important;
      overflow:hidden;isolation:isolate;
    }
    .classroom .wrap{
      position:relative;width:88vw;
      height:auto!important;min-height:0!important;
      z-index:3;
    }
    .classroom .section-label{
      position:relative!important;inset:auto!important;
      top:auto!important;left:auto!important;
    }
    .classroom h2{
      position:relative!important;inset:auto!important;
      margin:clamp(20px,5vw,28px) 0 clamp(42px,11vw,60px)!important;
    }
    .classroom .classes{
      position:relative!important;inset:auto!important;
      display:flex!important;flex-direction:column!important;
      align-items:flex-start!important;
      width:45%!important;height:auto!important;
      margin:0 0 0 auto!important;
      transform:translateX(clamp(2px,.6vw,4px))!important;
      gap:clamp(21px,5.7vw,31px)!important;
    }
    .classroom .course,.classroom .course+.course{
      position:relative!important;inset:auto!important;
      top:auto!important;bottom:auto!important;
      left:auto!important;right:auto!important;
      width:100%!important;min-height:0!important;
      align-self:stretch;margin:0!important;padding:0!important;
      border:0!important;
    }
    .classroom .course-kicker{
      font-size:clamp(9px,2.4vw,11px);
      margin:0 0 clamp(6px,1.5vw,9px)!important;
    }
    .classroom .course-name,
    .classroom .course-advanced .course-name{
      display:inline-block!important;position:relative!important;
      width:max-content!important;max-width:100%!important;
      font-size:clamp(13px,3.5vw,15px)!important;
      line-height:1.35!important;letter-spacing:-.055em!important;
      white-space:nowrap!important;text-align:left!important;
      padding:3px 0 8px!important;cursor:pointer;
    }
    .classroom .course-core .course-name br,
    .classroom .course-advanced .course-name br{display:initial!important}
    .classroom .course-name::after{
      font-size:clamp(9px,2.4vw,11px)!important;margin-left:4px!important;
    }
    .classroom .course-online{
      position:relative!important;inset:auto!important;
      width:100%!important;min-height:0!important;
      padding:0!important;margin:0!important;
    }
    .classroom .course-actions{
      width:100%!important;
      gap:clamp(7px,1.8vw,10px)!important;
      align-items:flex-start!important;text-align:left!important;
    }
    .classroom .course-actions-row{
      display:flex!important;flex-direction:column!important;
      gap:clamp(7px,1.8vw,11px)!important;
      align-items:flex-start!important;text-align:left!important;
    }
    .classroom .course-action{
      font-size:clamp(14px,3.65vw,17px)!important;
      line-height:1.3;padding:4px 0 6px;
    }
    .classroom::after{
      left:-3vw!important;right:auto!important;top:auto!important;
      bottom:clamp(45px,12vw,74px)!important;
      width:clamp(200px,63vw,305px)!important;
      height:clamp(280px,87vw,425px)!important;
      transform:scaleX(-1);background-size:contain;
      background-position:center bottom;
      pointer-events:none;z-index:1;
    }
  }
  @media (max-width:360px) and (orientation:portrait) and (display-mode:browser){
    .classroom .classes{width:48%!important;transform:translateX(2px)!important}
    .classroom .course-name,
    .classroom .course-advanced .course-name{
      font-size:clamp(12px,3.45vw,13px)!important;
    }
    .classroom::after{left:-5vw!important;width:60vw!important}
  }
}

/* SAFARI ABOUT CONTENT FLOW AND TRADEMARK v81 — match approved PWA composition.
   Reduce oversized top, leave safe footer breathing room and show logo beside company info.
   Safari browser portrait only; standalone PWA and desktop untouched. */
@supports (-webkit-touch-callout:none){
  @media (max-width:760px) and (orientation:portrait) and (display-mode:browser){
    .last{
      height:auto!important;min-height:0!important;
      overflow:visible!important;
    }
    .last .last-grid{
      display:flex!important;
      flex-direction:column!important;
      justify-content:flex-start!important;
      width:88vw!important;
      height:auto!important;min-height:0!important;
      padding-top:clamp(44px,12vw,60px)!important;
      padding-bottom:calc(clamp(65px,16vw,84px) + env(safe-area-inset-bottom,0px))!important;
      gap:clamp(14px,3.5vw,20px)!important;
    }
    .last .about{
      position:relative!important;inset:auto!important;
      padding-top:0!important;margin-top:0!important;
    }
    .last .about .section-label{margin-bottom:clamp(12px,3vw,16px)}
    .last .about blockquote{
      font-size:clamp(28px,8.1vw,35px);
      line-height:1.09;
      margin-bottom:clamp(21px,5vw,28px)!important;
    }
    .last .about-mobile-summary{line-height:1.52}
    .last .about-read-more{
      margin:clamp(7px,2vw,10px) 0 clamp(13px,3.4vw,18px)!important;
    }
    .last .about-mobile-feature{
      height:clamp(205px,57vw,265px)!important;
      margin-top:0;
    }
    .last .about-mobile-social{gap:clamp(4px,1.3vw,8px)}
    .last .about-social-row{min-height:clamp(40px,11vw,46px);padding:5px 0}
    .last .fixed-foot{
      position:relative!important;inset:auto!important;
      margin-top:clamp(8px,2vw,12px)!important;
      gap:0!important;
    }
    .last .about-mobile-tagline{
      padding:0 0 clamp(14px,3.7vw,20px)!important;
      line-height:1.55;
    }
    .last .footer-brand{
      display:flex!important;
      flex-direction:row!important;
      justify-content:center!important;
      align-items:center!important;
      width:100%!important;
      gap:clamp(7px,2.2vw,12px)!important;
      padding-top:clamp(14px,3.5vw,18px)!important;
    }
    .last .footer-trademark{
      display:block!important;visibility:visible!important;opacity:1!important;
      width:clamp(30px,8.5vw,38px)!important;
      max-width:38px!important;
      height:clamp(30px,8.5vw,38px)!important;
      object-fit:contain;
      flex:0 0 auto!important;
      margin:0!important;
    }
    .last .footer-left{
      width:auto!important;min-width:0!important;
      text-align:left!important;
      font-size:clamp(9px,2.5vw,11px)!important;
      line-height:1.45!important;
      overflow-wrap:anywhere;
    }
    .last .footer-copyright{
      margin-top:clamp(9px,2.3vw,13px)!important;
      line-height:1.55;
    }
  }
}

/* Version widget v82: hidden normally; available only when requested. */
@media(max-width:760px) and (orientation:portrait){
  .site-version-widget{display:none!important}
  .site-version-widget.version-visible{display:block!important}
}

/* Privacy consent v85 — compact floating notice; never changes the five-page layout. */
.privacy-consent-banner[hidden]{display:none!important}
.privacy-consent-banner{
 position:fixed;z-index:950;left:clamp(12px,3vw,32px);bottom:calc(14px + env(safe-area-inset-bottom,0px));
 width:min(510px,calc(100vw - 24px));box-sizing:border-box;
 display:flex;flex-wrap:wrap;gap:12px;
 padding:15px 17px 14px;border:1px solid #b7c6bd;border-radius:12px;
 background:#fffdf8;color:#16231f;box-shadow:0 6px 24px #0002;
 font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;
}
.privacy-consent-banner p{flex:1 1 100%;font-size:13px;line-height:1.55;margin:0}
.privacy-consent-banner strong{display:block;font-size:14px;margin-bottom:4px}
.privacy-consent-banner a{color:#315e50;text-underline-offset:3px}
.privacy-consent-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;justify-content:flex-end}
.privacy-consent-actions button{border:1px solid #315e50;border-radius:6px;font:700 13px/1.3 inherit;padding:10px 15px;cursor:pointer;background:#fffdf8;color:#315e50}
.privacy-consent-actions #privacy-accept{background:#315e50;color:white}
.privacy-consent-actions button:focus-visible,.privacy-footer-links a:focus-visible,.privacy-footer-links button:focus-visible{outline:2px solid #2c8065;outline-offset:3px}
.privacy-footer-links{display:flex;gap:16px;justify-content:flex-end;align-items:center;font:500 11px/1.4 system-ui,-apple-system,"Noto Sans TC",sans-serif;margin-top:9px;color:inherit;opacity:.8}
.privacy-footer-links a,.privacy-footer-links button{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:3px 0;cursor:pointer}
@media(max-width:760px){
 .privacy-consent-banner{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:13px 14px}
 .privacy-consent-banner p{font-size:12px}
 .privacy-consent-actions{justify-content:stretch}
 .privacy-consent-actions button{flex:1 1 45%;min-height:42px;padding:9px}
 .privacy-footer-links{justify-content:center;gap:18px;margin-top:8px;font-size:10px}
}