.cpl-home{--home-red:var(--red);--home-redf:#fff;--home-shadow:0 10px 30px #25224a1f;--home-lesson-1:#51b8ec;--home-lesson-2:#7751ec;--home-lesson-3:#ec51d2;--home-lesson-4:#ec5d51;--home-lesson-5:#ecec51;--home-lesson-6:#5dec51;color:var(--fg);letter-spacing:0;font:400 1rem/1.6 Noto Sans TC,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cpl-home{--home-red:#e0493e;--home-shadow:0 10px 30px #0006}}:root[data-theme=dark] .cpl-home{--home-red:#e0493e;--home-shadow:0 10px 30px #0006}.cpl-home .wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}.cpl-home h1,.cpl-home h2,.cpl-home h3{letter-spacing:0;margin:0;font-family:Fraunces,Noto Serif TC,Georgia,serif;line-height:1.12}.cpl-home small{color:var(--mut);font-family:Noto Sans TC,sans-serif;font-size:.8rem;font-weight:400;line-height:1.6;display:block}.cpl-home .marquee{background:var(--home-red);color:var(--home-redf);padding:.5rem 0;font-size:.85rem;font-weight:500;position:relative;overflow:hidden}.cpl-home .marquee:before,.cpl-home .marquee:after{content:"";z-index:1;pointer-events:none;width:2.75rem;position:absolute;top:0;bottom:0}.cpl-home .marquee:before{background:linear-gradient(90deg,var(--home-red),transparent);left:0}.cpl-home .marquee:after{background:linear-gradient(270deg,var(--home-red),transparent);right:0}.cpl-home .marquee-track{will-change:transform;width:max-content;animation:70s linear infinite cpl-marquee;display:flex}.cpl-home .marquee:hover .marquee-track{animation-play-state:paused}.cpl-home .marquee-copy{flex:none;display:flex}.cpl-home .marquee-item{white-space:nowrap;align-items:center;display:inline-flex}.cpl-home .marquee-item .dot{opacity:.8;margin:0 1.6rem;font-size:.5rem}@keyframes cpl-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.cpl-home a.marquee{color:var(--home-redf);text-decoration:none;display:block}.cpl-home a.marquee:hover{color:var(--home-redf)}.cpl-home a.marquee:focus-visible{outline:2px solid var(--home-redf);outline-offset:-3px}.cpl-home .marquee-item .reg{text-underline-offset:.25rem;text-decoration:underline}.cpl-home .site-header{z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln);padding-top:env(safe-area-inset-top,0px);position:sticky;top:0}.cpl-home .nav-row{align-items:center;gap:1rem;min-height:4.4rem;display:flex}.cpl-home .brand{color:var(--fg);align-items:center;gap:.6rem;min-width:0;margin-right:auto;font:700 1.05rem Fraunces,serif;text-decoration:none;display:flex}.cpl-home .brand img{border-radius:.4rem;flex:none;width:2.4rem;height:2.4rem}.cpl-home .links{align-items:center;gap:1.4rem;display:none}.cpl-home .nav-link{height:auto;color:var(--mut);text-align:center;background:0 0;gap:0;padding:0;font-size:.9rem;font-weight:400;text-decoration:none;display:block}.cpl-home .nav-link:hover{color:var(--fg);background:0 0}.cpl-home .nav-link small{font-size:.72rem}.cpl-home .site-button{border:1.5px solid var(--fg);color:var(--fg);cursor:pointer;white-space:normal;height:auto;box-shadow:none;background:0 0;border-radius:99px;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.55rem 1.1rem;font:500 .95rem Noto Sans TC,sans-serif;text-decoration:none;transition:transform .15s,background .15s;display:inline-flex}.cpl-home .site-button:hover{background:var(--pb);transform:translateY(-1px)}.cpl-home .site-button.primary{background:var(--home-red);border-color:var(--home-red);color:var(--home-redf)}.cpl-home .site-button.big{padding:.8rem 1.5rem;font-size:1.02rem}.cpl-home .menu-button{color:var(--fg);box-shadow:none;background:0 0;border:0;flex:none;width:2.25rem;height:2.25rem;padding:.4rem}.cpl-home .mobile-menu{border-top:1px solid var(--ln);gap:.7rem;padding:.5rem 1.25rem 1rem;display:grid}.cpl-home .mobile-menu .nav-link{text-align:left}.cpl-home .hero{gap:2.5rem;padding:3rem 1.25rem 2.5rem;display:grid}.cpl-home .eyebrow{color:var(--blf);border:1px solid var(--ln);background:var(--pb);border-radius:99px;align-items:center;gap:.5rem;padding:.3rem .8rem;font-size:.85rem;font-weight:500;display:inline-flex}.cpl-home h1{margin:1rem 0 .8rem;font-size:3.3rem;font-weight:700}.cpl-home h1 em{color:var(--home-red);font-style:normal}.cpl-home .lead{margin:0 0 .6rem;font-family:Fraunces,serif;font-size:1.25rem}.cpl-home .sub{color:var(--mut);max-width:34rem;margin:0 0 1.6rem}.cpl-home .cta{flex-wrap:wrap;gap:.8rem;display:flex}.cpl-home .chips{flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;display:flex}.cpl-home .chip{border:1px solid var(--ln);background:var(--pb);color:var(--mut);border-radius:99px;padding:.25rem .75rem;font-size:.82rem}.cpl-home .cards{perspective:900px;justify-content:center;gap:.9rem;padding:.8rem 0;display:flex}.cpl-home .flip-card{aspect-ratio:3/4;cursor:pointer;width:30%;max-width:9.5rem;height:auto;transform-style:preserve-3d;box-shadow:none;white-space:normal;color:var(--fg);background:0 0;border:0;padding:0;transition:transform .55s cubic-bezier(.2,.8,.2,1);position:relative}.cpl-home .flip-card:hover{background:0 0}.cpl-home .flip-card:first-child{transform:rotate(-5deg)translateY(.8rem)}.cpl-home .flip-card:nth-child(3){transform:rotate(5deg)translateY(.8rem)}.cpl-home .flip-card.flipped{transform:rotateY(180deg)}.cpl-home .face{background:var(--pb);border:1px solid var(--ln);box-shadow:var(--home-shadow);backface-visibility:hidden;text-align:center;border-radius:1.1rem;place-items:center;padding:.5rem;display:grid;position:absolute;inset:0}.cpl-home .back{align-content:center;gap:.3rem;transform:rotateY(180deg)}.cpl-home .character{font:900 5.2rem/1 Noto Serif TC,serif}.cpl-home .pinyin{color:var(--home-red);font:700 1.5rem Fraunces,serif}.cpl-home .hint{text-align:center;color:var(--mut);margin:1.4rem 0 0;font-size:.85rem}.cpl-home .section{padding:3.5rem 0;scroll-margin-top:5rem}.cpl-home .head{max-width:40rem;margin-bottom:1.8rem}.cpl-home .head h2{font-size:2.6rem}.cpl-home .head h2 small{margin-top:.6rem;font-size:1rem}.cpl-home .head p{color:var(--mut);margin:.6rem 0 0}.cpl-home .tag{color:var(--home-red);margin-bottom:.5rem;font-size:.75rem;font-weight:700}.cpl-home .intro{max-width:44rem;margin:0 0 1.6rem;font-size:1.08rem}.cpl-home .about-grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;display:grid}.cpl-home .about-item{background:var(--pb);border:1px solid var(--ln);border-radius:1.2rem;padding:1.2rem}.cpl-home .about-item h3{margin-bottom:.4rem;font-size:1.1rem}.cpl-home .about-item p{color:var(--mut);margin:.5rem 0 0;font-size:.95rem}.cpl-home .translation{color:var(--mut);margin:.5rem 0;font-size:.82rem}.cpl-home .lesson-grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;display:grid}.cpl-home .lesson-card{--lesson-hue:var(--home-lesson-1);background:color-mix(in srgb,var(--lesson-hue) 13%,var(--pb));border:1px solid var(--ln);border-radius:1.2rem;flex-direction:column;gap:.8rem;min-width:0;padding:1.2rem;transition:transform .2s,box-shadow .2s;display:flex}.cpl-home .lesson-card:nth-child(2){--lesson-hue:var(--home-lesson-2)}.cpl-home .lesson-card:nth-child(3){--lesson-hue:var(--home-lesson-3)}.cpl-home .lesson-card:nth-child(4){--lesson-hue:var(--home-lesson-4)}.cpl-home .lesson-card:nth-child(5){--lesson-hue:var(--home-lesson-5)}.cpl-home .lesson-card:nth-child(6){--lesson-hue:var(--home-lesson-6)}.cpl-home .lesson-card:hover{box-shadow:var(--home-shadow);transform:translateY(-3px)}.cpl-home .card-top{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.cpl-home .lesson-no{color:var(--mut);font:700 .85rem Fraunces,serif}.cpl-home .badge{background:var(--bl);color:var(--blf);border-radius:99px;padding:.15rem .6rem;font-size:.72rem;font-weight:700}.cpl-home .lesson-card h3{font-size:1.35rem}.cpl-home .lesson-card .zh{color:var(--mut);margin-top:-.4rem;font-size:.95rem}.cpl-home .characters{flex-wrap:wrap;gap:.35rem;display:flex}.cpl-home .characters span{border:1px solid var(--ln);border-radius:.5rem;place-items:center;min-width:2.1rem;height:2.1rem;font:600 1.25rem Noto Serif TC,serif;display:grid}.cpl-home .lesson-card .site-button{margin-top:auto}.cpl-home .band{background:var(--pb);border-block:1px solid var(--ln)}.cpl-home .steps{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;display:grid}.cpl-home .step{border-left:3px solid var(--home-red);padding:.2rem 0 .2rem 1rem}.cpl-home .step h3{margin-bottom:.5rem;font-size:1.1rem}.cpl-home .step p{color:var(--mut);margin:.4rem 0;font-size:.92rem}.cpl-home .locks{flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem;display:flex}.cpl-home .locks span{border:1px dashed var(--ln);color:var(--mut);border-radius:.7rem;align-items:center;gap:.4rem;padding:.35rem .8rem;font-size:.9rem;display:flex}.cpl-home .locks svg{flex:none;width:14px;height:14px}.cpl-home .plans{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;max-width:44rem;display:grid}.cpl-home .plan{border:1px solid var(--ln);background:var(--bg);border-radius:1.2rem;padding:1.3rem}.cpl-home .plan.member{border-color:var(--home-red)}.cpl-home .plan h3{margin-bottom:.4rem;font-size:1.3rem}.cpl-home .plan ul{color:var(--mut);margin:.6rem 0 1rem;padding-left:1.1rem;list-style:outside}.cpl-home .note{color:var(--mut);margin:.8rem 0 0;font-size:.78rem}.cpl-home footer{color:var(--mut);border-top:1px solid var(--ln);padding:2.5rem 0 3rem;font-size:.9rem}.cpl-home .footer-row{flex-wrap:wrap;justify-content:space-between;gap:1rem 1.5rem;display:flex}.cpl-home a:focus-visible,.cpl-home button:focus-visible{outline:3px solid var(--home-red);outline-offset:3px}.cpl-auth-dialog{background:var(--pb);color:var(--fg);border:1px solid var(--ln);border-radius:1.4rem;width:calc(100% - 2rem);max-width:26rem;max-height:90dvh;padding:1.6rem;overflow-y:auto}.cpl-auth-dialog .sec{background:0 0;border:0;margin:0;padding:0}.cpl-auth-dialog h2{font-family:Fraunces,Noto Serif TC,serif;font-size:1.35rem}@media (width>=760px){.cpl-home .links{display:flex}.cpl-home .menu-button,.cpl-home .mobile-menu{display:none}}@media (width>=860px){.cpl-home .hero{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:5rem;padding-bottom:4rem}.cpl-home h1{font-size:4.8rem}}@media (width<=480px){.cpl-home h1{font-size:2.6rem}.cpl-home .head h2{font-size:1.8rem}.cpl-home .character{font-size:3rem}.cpl-home .nav-row{gap:.45rem}.cpl-home .brand{font-size:.85rem}.cpl-home .brand small{font-size:.7rem}.cpl-home .nav-row .site-button{padding:.45rem .7rem;font-size:.8rem}.cpl-home .lesson-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.cpl-home *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.cpl-auth-dialog{display:block}.cpl-auth-dialog .auth{width:100%;min-width:0}.cpl-auth-dialog .tabs{flex-wrap:wrap;display:flex}@media (width<=480px){.cpl-home .nav-row>.site-button{white-space:nowrap;flex:none;padding:.45rem .6rem;font-size:.75rem}.cpl-home .hero{gap:1.25rem;padding-top:2rem;padding-bottom:1.5rem}.cpl-home .chips{margin-top:1rem}.cpl-home .lead{font-size:1.1rem}}