/* Feature segments: one feature per band, picture and text swapping sides (Duolingo-style).
   The small app pictures are white "paper" in both themes on purpose: the word-type tints
   and tone colours are the app's own and need a light page behind them. */
:root{--sheet:#ffffff;--paper-ink:#151b2b;--paper-muted:#6b7280;--paper-line:#edeff3;--new:#ef6c00}

.fsegs{padding-block:0}
.fseg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(56px,8vw,112px);border-top:2px solid var(--line);scroll-margin-top:calc(var(--head) + env(safe-area-inset-top,0px))}
.fseg:first-child{border-top:0}
.fseg:nth-child(even) .fs-vis{order:2}
.fs-txt h2{font:900 clamp(30px,3.8vw,46px)/1.08 var(--display);color:var(--blue);letter-spacing:-.01em;text-wrap:balance}
html:lang(zh-Hans) .fs-txt h2{font-family:var(--han);letter-spacing:.02em}
.fs-txt p{margin-top:16px;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--muted);max-width:40ch}
.fs-txt .fs-fact{font-size:15px;color:var(--ink)}
.fs-fact b{color:var(--blue);font:900 18px var(--display)}
.fs-vis{position:relative;min-height:380px;display:grid;place-items:center}
.fs-vis .blob{position:absolute;width:min(380px,82%);aspect-ratio:1;border-radius:50%;background:var(--tint)}
.fs-vis .dashi{position:relative;z-index:1;width:min(260px,58%)}
.frag{position:absolute;z-index:2;background:var(--sheet);color:var(--paper-ink);border-radius:16px;box-shadow:0 14px 34px rgba(10,30,90,.16)}

/* the text pictures: words with pinyin, new words orange, word-type tints, grammar underline */
.ltext{display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:4px;font-family:var(--han)}
.wg{display:inline-flex;align-items:flex-end;white-space:nowrap}
.lw{display:inline-flex;flex-direction:column;align-items:center;border-radius:4px;padding:0 1px}
.lw .hz{font-size:18px;line-height:1.6;letter-spacing:2px;margin-right:-2px;text-decoration:underline transparent 2px;text-underline-offset:5px}
.lw .py{display:none}
.lp{font-size:18px;line-height:1.6}
.t-new .lw:not(.k):not(.nm) .hz{color:var(--new)}
.t-kinds .lw{background:var(--kc)}
.t-gram .lw[data-g] .hz{text-decoration-color:var(--gc)}
.lring{width:44px;height:44px}
.lring circle{fill:none;stroke-width:10}
.lring .bg{stroke:#eceff4}
.lring .fg{stroke:#f59e0b;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.frag .bar{flex:1;height:6px;border-radius:999px;background:#e6e9ef;overflow:hidden;display:block}
.frag .bar i{display:block;height:100%;background:#2196f3;border-radius:999px}

/* 1 textbook */
.v-tb .f1{top:8%;left:0;padding:10px 12px;transform:rotate(-4deg)}
.tbp{display:flex;gap:8px}
.tbp span{border:2px solid #90caf9;border-radius:8px;padding:4px 8px;font:500 13px var(--han);color:#1e88e5}
.tbp .done{border-color:#a5d6a7;color:#43a047}
.tbp .sel{border-color:#fbc02d}
.v-tb .f2{bottom:4%;right:0;width:220px;padding:14px 16px;border-top:6px solid #2196f3;display:flex;flex-direction:column;gap:6px;transform:rotate(3deg)}
.v-tb .f2 .n{font:600 16px var(--han);color:#2196f3}
.v-tb .f2 b{font:500 17px var(--han)}
.v-tb .f2 small{color:#2196f3;font-size:12px}
.v-tb .f2 .bar{flex:none}
.v-tb .f2 .go{margin-top:4px;background:#2196f3;color:#fff;border-radius:8px;text-align:center;font-size:12px;padding:7px}
/* 2 flashcards */
.card-fc{width:150px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #cfe1fb}
.v-fc .f1{top:6%;left:2%;background:#f5f8ff;transform:rotate(-7deg)}
.v-fc .f1 .hz{font:900 42px var(--han);color:#2b7de9}
.v-fc .f1 small{color:var(--paper-muted);font-size:12px}
.v-fc .f2{bottom:4%;right:2%;transform:rotate(6deg)}
.card-fc .hz.sm{font:500 34px var(--han)}
.card-fc .py{font-weight:800}
.card-fc .mn{color:var(--paper-muted);font-size:14px}
.card-fc .ok{font-size:11px;font-weight:800;color:#16a34a;background:#dcfce7;border-radius:999px;padding:3px 8px;margin-top:4px}
/* 3 reading */
.paper-frag{padding:14px 16px}
.v-rd .f1{bottom:6%;left:0;width:min(300px,78%);transform:rotate(-3deg)}
.badge{display:flex;align-items:center;gap:8px;padding:10px 14px}
.badge b{display:block;font:900 22px var(--display)}
.badge small{font-size:12px;color:var(--paper-muted)}
.v-rd .f2{top:8%;right:2%;transform:rotate(4deg)}
/* 4 dictionary */
.v-dc .f1{bottom:2%;right:0;width:min(290px,80%);padding:10px;background:#f4f5f7;transform:rotate(3deg);display:flex;flex-direction:column;gap:8px}
.sbox{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border-radius:12px;background:#fff;color:#9e9e9e;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sbox svg{width:20px;height:20px}
.sbox span{font:500 16px var(--han);color:var(--paper-ink)}
.drs{background:#fff;border-radius:12px;padding:2px 10px}
.dr2{display:flex;flex-direction:column;gap:2px;padding:8px 2px;border-top:1px solid var(--paper-line)}
.dr2:first-child{border-top:0}
.dr2 .top{display:flex;align-items:baseline;gap:8px}
.dr2 .top .hz{font:400 20px var(--han)}
.dr2 .top b{font-size:14px;font-weight:800;flex:1}
.dr2 .hsk{font-size:10.5px;color:#6b7280;background:#f4f6fa;border-radius:6px;padding:1px 6px}
.dr2 .m{font-size:13px;color:#4b5563}
.dr2 .m b{font-size:12px;color:#111827}
/* 5 analyzer */
.v-an .f1{bottom:8%;left:0;width:min(320px,84%);transform:rotate(-2deg)}
.v-an .f1 .lw .hz,.v-an .f1 .lp{font-size:17px}
.gchip{display:grid;grid-template-columns:4px auto;gap:2px 10px;align-items:center;padding:10px 14px;font-size:13px}
.gchip i{grid-row:span 2;width:4px;height:100%;border-radius:2px}
.gchip b{font-family:var(--han)}
.gchip span{color:var(--paper-muted)}
.v-an .f2{top:6%;right:0;transform:rotate(4deg)}
/* 6 hsk */
.v-hk .f1{bottom:4%;left:0;width:min(300px,80%);transform:rotate(-3deg)}
.hk-t{font-weight:800;font-size:13px;margin-bottom:4px}
.fs-vis .hb{display:grid;grid-template-columns:58px 1fr 76px;gap:10px;align-items:center;font-size:12px;padding:4px 0}
.fs-vis .hb .l{font-weight:700}
.fs-vis .hb .c{text-align:right;color:var(--paper-muted);font-variant-numeric:tabular-nums}

/* closing band */
.fs-end-sec{padding-block:0 clamp(56px,8vw,96px)}
.fs-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;background:var(--blue-deep);color:var(--on-blue);border-radius:32px;padding:clamp(32px,5vw,64px) clamp(20px,5vw,64px)}
.fs-end .fs-vis{min-height:300px}
.fs-end .blob{background:rgba(255,255,255,.08)}
.fs-end .dashi{width:min(300px,70%)}
.fs-end h2{color:#fff}
.fs-end .fs-txt p{color:var(--on-blue-muted)}
.fs-end .stores{margin-top:24px}

@media (max-width:860px){
  .fseg,.fs-end{grid-template-columns:1fr;gap:20px;text-align:center}
  .fseg:nth-child(even) .fs-vis{order:0}
  .fs-vis{min-height:320px}
  .fs-txt p{margin-inline:auto}
  .fs-end .stores{justify-content:center}
  .frag{scale:.88}
}

/* ---------- planned-feature cards (Master Korean / Master Japanese): the band look, inside cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px 22px 24px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(4,30,110,.14)}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}}
.pc-vis{position:relative;height:230px;margin-bottom:8px}
.pc-vis .blob{position:absolute;left:4%;top:50%;width:180px;aspect-ratio:1;border-radius:50%;background:var(--tint);transform:translateY(-50%)}
.pc-vis .dashi{position:absolute;left:0;top:50%;width:150px;transform:translateY(-50%);z-index:1}
.pc-vis .frag{right:0;bottom:8px;max-width:74%}
.pcard h3{font:900 22px/1.15 var(--display);color:var(--blue);text-wrap:balance}
html:lang(zh-Hans) .pcard h3{font-family:var(--han);letter-spacing:.02em}
.pcard p{color:var(--muted);font-size:15px;line-height:1.5}
/* Korean and Japanese text inside the pictures */
.pc-vis [lang="ko"],.pc-vis [lang="ko"] .hz,.pc-vis [lang="ko"] .lp{font-family:"Noto Sans KR",var(--han),sans-serif}
.pc-vis [lang="ja"],.pc-vis [lang="ja"] .hz,.pc-vis [lang="ja"] .lp{font-family:"Noto Sans JP",var(--han),sans-serif}
.pc-vis .ltext .lw .hz,.pc-vis .ltext .lp{font-size:16px;letter-spacing:0;margin-right:0}
.pc-vis .wg.sp{margin-right:.32em}
/* 1 textbook */
.pc-tb{width:210px;padding:12px 14px;border-top:5px solid #2196f3;display:flex;flex-direction:column;gap:7px;transform:rotate(3deg)}
.pc-tb .tbp{gap:5px;flex-wrap:wrap}
.pc-tb .tbp span{font-size:12px;padding:3px 6px}
.pc-tb b{font-size:15px;font-weight:500}
.pc-tb small{color:#2196f3;font-size:11.5px}
.pc-tb .bar{flex:none}
/* 2 flashcard */
.pc-fc{width:150px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #cfe1fb;transform:rotate(5deg)}
.pc-fc .w{font-size:32px;font-weight:600;color:#2b7de9}
.pc-fc .r{font-weight:800;font-size:13px}
.pc-fc .m{color:var(--paper-muted);font-size:13px}
.pc-fc .ok{font-size:10.5px;font-weight:800;color:#16a34a;background:#dcfce7;border-radius:999px;padding:3px 8px;margin-top:2px}
/* 3 reading */
.pc-rd{width:220px;padding:12px 14px;transform:rotate(-2deg)}
.pc-rd .fam{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--paper-line);font-size:12px;color:var(--paper-muted)}
.pc-rd .fam .lring{width:26px;height:26px}
.pc-rd .fam b{font:900 15px var(--display);color:var(--paper-ink)}
/* 4 dictionary */
.pc-dc{width:220px;padding:8px;background:#f4f5f7;transform:rotate(2deg);display:flex;flex-direction:column;gap:6px}
.pc-dc .sbox{min-height:34px;padding:0 10px}
.pc-dc .sbox svg{width:16px;height:16px}
.pc-dc .sbox span{font-size:14px}
.pc-dc .drs{padding:0 8px}
.pc-dc .dr2{padding:6px 0}
.pc-dc .dr2 .top .hz{font-size:16px;color:var(--paper-ink)}
.pc-dc .dr2 .top b{font-size:12px}
.pc-dc .dr2 .m{font-size:12px}
.pc-dc .hl{background:#fff1b8}
/* 5 analyzer */
.pc-an{width:230px;padding:12px 14px;transform:rotate(-2deg);display:flex;flex-direction:column;gap:8px}
.pc-an .gline{display:grid;grid-template-columns:4px auto;gap:1px 8px;align-items:center;font-size:12px;border-top:1px solid var(--paper-line);padding-top:8px}
.pc-an .gline i{grid-row:span 2;width:4px;height:100%;border-radius:2px}
.pc-an .gline b{font-weight:700}
.pc-an .gline span{color:var(--paper-muted)}
/* 6 progress */
.pc-pr{width:190px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:rotate(3deg);text-align:center}
.pc-pr .lring{width:76px;height:76px}
.pc-pr .lring .fg{stroke:#2196f3}
.pc-pr .big{font:900 22px var(--display);margin-top:-54px;margin-bottom:24px}
.pc-pr small{font-size:12px;color:var(--paper-muted)}
.pc-pr .streak{font-size:12px;font-weight:800;color:#e65100;background:#fff3e0;border-radius:999px;padding:3px 10px}
@media (max-width:980px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pcards{grid-template-columns:1fr}.pc-vis .dashi{width:130px}.pc-vis .blob{width:160px}}
/* phones: the "What Master Korean / Japanese will do" title and the six cards' text centred */
@media (max-width:620px){#planned .wrap > :is(.eyebrow,h2){text-align:center}.pcard :is(h3,p){text-align:center}}

/* Apps menu: "All apps" at the end, under a divider */
.dd-menu .dd-all{border-top:1px solid var(--line);margin-top:4px;padding-top:12px;border-radius:0 0 10px 10px}
.all-ic{display:grid;place-items:center;background:var(--tint);color:var(--blue)}
.all-ic svg{width:18px;height:18px;fill:currentColor}

/* ---------- All apps hub (apps.html): pick a language ---------- */
.hub-hero{padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px);text-align:center}
.hub-hero h1{font:900 clamp(34px,5vw,58px)/1.05 var(--display);color:var(--blue);margin-top:12px;text-wrap:balance}
html:lang(zh-Hans) .hub-hero h1{font-family:var(--han)}
.hub-hero .lead{margin:16px auto 0;max-width:56ch}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px;text-align:left}
.hub-tile{--acc:var(--blue);display:flex;flex-direction:column;gap:4px;min-width:0;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-top:6px solid var(--acc);border-radius:28px;padding:18px 24px 26px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.t-zh{--acc:#d6362f}.t-ko{--acc:#1f4fb5}.t-ja{--acc:#e8364d}
.hub-tile:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(4,30,110,.16)}
.hub-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hub-tile .held{width:min(250px,84%);align-self:center;margin-bottom:6px}
.hub-hello{font-size:30px;font-weight:700;line-height:1.2;color:var(--acc)}
.hub-hello[lang="zh-Hans"]{font-family:var(--han)}
.hub-hello[lang="ko"]{font-family:"Noto Sans KR",var(--han),sans-serif}
.hub-hello[lang="ja"]{font-family:"Noto Sans JP",var(--han),sans-serif}
.hub-rom{font-size:13px;font-weight:600;color:var(--muted)}
.hub-tile h2{font:900 24px/1.15 var(--display);margin-top:8px}
.hub-tile p{color:var(--muted);font-size:15px;line-height:1.5}
.hub-go{margin-top:auto;padding-top:16px;font-weight:800;color:var(--blue)}
.hub-go span:last-child{display:inline-block;transition:translate .2s}
.hub-tile:hover .hub-go span:last-child{translate:5px 0}
@media (prefers-reduced-motion:reduce){.hub-tile,.hub-go span:last-child{transition:none}.hub-tile:hover{transform:none}}
.hub-method .fseg{border-top:2px solid var(--line)}
.hub-chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hub-chips li{background:var(--tint);color:var(--blue);font-weight:700;font-size:14px;border-radius:999px;padding:6px 14px}
@media (max-width:860px){.hub-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}.hub-chips{justify-content:center}}

/* ---------- header: menus open on hover (click still works for touch and keyboard) ---------- */
/* the menus grow to fit their longest item, so no item ("Master Japanese") breaks onto two lines */
.dd-menu{width:max-content;max-width:calc(100vw - 24px)}
.dd-menu a,.dd-menu button{white-space:nowrap}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
@media (hover:hover){
  .dd:hover .dd-menu{display:block}
  .dd:hover .dd-btn{color:var(--ink);background:var(--tint)}
}
.app-cur{color:var(--ink);font-weight:700}
.app-pre{color:var(--muted);font-weight:600}
@media (max-width:640px){.app-pre{display:none}}

/* ---------- about us ---------- */
.ab-hero{padding-block:clamp(48px,7vw,96px)}
.ab-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.ab-hero h1,.hc-hero h1{font:900 clamp(36px,5vw,60px)/1.05 var(--display);color:var(--blue);margin:12px 0 16px;text-wrap:balance}
html:lang(zh-Hans) .ab-hero h1,html:lang(zh-Hans) .hc-hero h1,html:lang(zh-Hans) .ab-apps-sec h2,html:lang(zh-Hans) .ab-contact h2{font-family:var(--han)}
.ab-hero .lead+.lead{margin-top:12px}
.ab-apps-sec,.ab-contact{padding-block:clamp(48px,7vw,88px);border-top:2px solid var(--line)}
.ab-apps-sec h2,.ab-contact h2{font:900 clamp(28px,3.6vw,42px)/1.1 var(--display);color:var(--blue)}
.ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.ab-app{--acc:var(--blue);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-top:6px solid var(--acc);border-radius:28px;padding:18px 22px 26px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ab-app:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(4,30,110,.16)}
.ab-app:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ab-app .held{width:min(230px,80%);margin-bottom:6px}
.ab-pre{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.ab-lang{font:900 32px/1.1 var(--display);color:var(--acc)}
html:lang(zh-Hans) .ab-lang{font-family:var(--han)}
.ab-st{color:var(--muted);font-size:15px}
.ab-app:hover .hub-go span:last-child{translate:5px 0}
@media (prefers-reduced-motion:reduce){.ab-app{transition:none}.ab-app:hover{transform:none}}
@media (max-width:860px){.ab-hero-grid{grid-template-columns:1fr}.ab-hero .fs-vis{min-height:260px}.ab-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* ---------- help and support ---------- */
.hc-hero{padding-block:clamp(48px,7vw,88px) 24px;text-align:center}
.hc-hero .lead{margin-inline:auto}
.hc-faq{padding-block:24px 64px}
.hc-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:start}
.hc-list{display:flex;flex-direction:column;gap:40px;max-width:780px}
.hc-group h2{font:900 22px var(--display);margin-bottom:8px}
html:lang(zh-Hans) .hc-group h2{font-family:var(--han)}
.hc-dashi{width:200px;position:sticky;top:120px}
.hc-still-sec{padding-block:0 clamp(56px,8vw,96px)}
.hc-still{display:flex;align-items:center;gap:24px;background:var(--blue-deep);color:var(--on-blue);border-radius:28px;padding:28px 32px;flex-wrap:wrap}
.hc-still img{width:110px}
.hc-still>div{flex:1 1 260px}
.hc-still h2{font:900 clamp(24px,3vw,32px)/1.15 var(--display);color:#fff}
html:lang(zh-Hans) .hc-still h2{font-family:var(--han)}
.hc-still p{color:var(--on-blue-muted);margin-top:6px}
.hc-still .btn{background:var(--gold);color:#1b1400;text-decoration:none}
@media (max-width:860px){.hc-grid{grid-template-columns:1fr}.hc-dashi{display:none}.hc-still{justify-content:center;text-align:center}}

/* ---------- feedback form ---------- */
.fb-sec .wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:48px;align-items:start;padding-block:0 clamp(56px,8vw,96px)}
.fb-form{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fb-l{font-weight:700;font-size:14px;margin-top:8px}
.fb-in{font:500 16px var(--body);padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
textarea.fb-in{resize:vertical;min-height:140px}
.fb-in:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.fb-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.fb-row .btn{border:0}
.fb-dashi{width:220px;justify-self:center}
@media (max-width:860px){.fb-sec .wrap{grid-template-columns:1fr}.fb-dashi{display:none}.fb-form{padding:20px}}
.ab-app.t-zh{--acc:#d6362f}.ab-app.t-ko{--acc:#1f4fb5}.ab-app.t-ja{--acc:#d9437f}

/* menu arrows stay still when a menu opens */
.dd .dd-btn svg.chev,.dd.open .dd-btn svg.chev{transform:none}

/* compact page titles (FAQ, feedback) */
.hc-hero{padding-block:clamp(28px,4vw,48px) 4px}
.hc-hero h1{margin:0}
.hc-faq{padding-top:20px}
.fb-sec .wrap{padding-top:20px}
.hc-group h2{color:var(--blue)}
.faq-a{color:var(--muted);margin-top:10px;max-width:62ch}
.steps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.steps li{padding-left:4px}
.steps li::marker{color:var(--blue);font-weight:800}
.steps b{color:var(--ink)}
.fb-count{align-self:flex-end;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:-4px}
select.fb-in{appearance:auto;cursor:pointer}

/* about us: contact list (label, then icon links) */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.ct-list{display:flex;flex-direction:column;gap:26px;margin-top:26px}
.ct-g>p{color:var(--muted);font-size:17px;margin-bottom:10px}
.ct-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ct-g a{display:inline-flex;align-items:center;gap:14px;color:var(--blue);font-weight:800;font-size:18px;text-decoration:none;overflow-wrap:anywhere}
.ct-g a:hover span{text-decoration:underline;text-underline-offset:3px}
.ct-g a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.ct-g svg{width:24px;height:24px;flex:none;color:var(--blue)}
@media (max-width:860px){.ct-grid{grid-template-columns:1fr}.ct-grid .fs-vis{display:none}}
@media (max-width:420px){.ct-g a{font-size:16px;gap:10px}}

.dd-menu a[aria-current="true"]{cursor:default}

/* all apps: built by members of (seals are placeholders until the real logos are in) */
.members{padding-block:clamp(48px,7vw,88px);border-top:2px solid var(--line);text-align:center}
.members h2{font:900 clamp(28px,3.6vw,42px)/1.1 var(--display);color:var(--blue);margin-top:10px;text-wrap:balance}
html:lang(zh-Hans) .members h2{font-family:var(--han)}
.mem-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.mem-tile{--acc:var(--blue);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--acc);border-radius:28px;padding:24px 18px 26px}
.mem-seal{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,var(--card));margin-bottom:12px}
.mem-seal span{font:900 22px/1 var(--display);color:var(--acc);letter-spacing:.02em}
.mem-seal span:lang(zh-Hans),.mem-seal span:lang(ja){font-family:var(--han);font-size:24px}
.mem-tile b{font-size:17px;line-height:1.3;color:var(--ink);text-wrap:balance}
.mem-tile small{color:var(--muted);font-size:14px}
@media (max-width:980px){.mem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.mem-grid{gap:14px}.mem-tile{padding:18px 12px 20px}.mem-seal{width:68px;height:68px}.mem-tile b{font-size:15px}}
/* plans: room under the Master Plan list for Dashi, so no word sits behind him */
.plan.feature{padding-bottom:96px}

/* 404 and /get: the help page's blue box right under the title */
.nf-sec{padding-top:28px}
.nf-sec .hc-still p a{color:#fff;font-weight:700;text-underline-offset:3px}
.nf-sec .stores{margin-top:0}

/* 404: Dashi, "Error 404", one sentence with links, the brand link */
.nf{padding-block:clamp(32px,5vw,64px) clamp(56px,8vw,96px);text-align:center}
.nf .nf-vis{min-height:0;width:min(300px,72vw);aspect-ratio:1;margin:0 auto}
.nf .nf-vis .blob{width:100%}
.nf .nf-vis .dashi{width:72%}
.nf h1{font:900 clamp(40px,6vw,68px)/1.05 var(--display);color:var(--blue);margin-top:4px}
html:lang(zh-Hans) .nf h1{font-family:var(--han)}
.nf .lead{max-width:54ch;margin:16px auto 0}
.nf .lead a{color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.nf-brand{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font:800 18px var(--body);color:var(--ink);text-decoration:none}
.nf-brand img{width:40px;height:40px;border-radius:10px}
.nf-brand:hover{color:var(--blue)}
.nf-brand:focus-visible,.nf .lead a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* HSK 3.0 guide and level word lists: header link (shown while Master Chinese is the app), light top, tables, level rows */
nav.links>a.nav-hsk{display:inline-flex;align-items:center;font-weight:700;color:var(--muted);white-space:nowrap}
nav.links>a.nav-hsk[aria-current="page"]{color:var(--ink);background:var(--tint)}
@media (max-width:640px){nav.links>a.nav-hsk{padding:8px 7px;font-size:14px}}
@media (max-width:400px){header.top:has(.nav-hsk) .brand b{display:none}}
.hk-top{background:var(--card);border-bottom:1px solid var(--line)}
.hk-top h1 em{font-style:normal;color:var(--ink)}
.hk-top .lead{max-width:56ch}
.hk-stats{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.hk-stats li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px 14px 10px;font-size:14px;font-weight:600;color:var(--muted)}
.hk-stats b{display:block;font:900 22px/1.2 var(--display);color:var(--blue)}
.hk-jump{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hk-jump a{text-decoration:none}
.hk-line{display:inline-flex;align-items:center;font:800 15px var(--body);padding:12px 20px;border-radius:12px;color:var(--blue);border:1px solid var(--line);background:var(--card)}
.hk-line:hover{background:var(--tint)}
.hk-vis{position:relative;min-height:360px;display:grid;place-items:center}
.hk-vis .blob{position:absolute;width:min(340px,84%);aspect-ratio:1;border-radius:50%;background:var(--tint)}
.hk-vis .dashi{position:relative;z-index:1;width:min(230px,54%);transform:translate(-16%,-10%)}
.hk-bands{position:absolute;right:-8px;bottom:2%;z-index:2;width:240px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px 16px 8px;box-shadow:0 14px 34px rgba(12,26,58,.12)}
.hk-bands p{font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.hk-band{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.3}
.hk-band b{font-weight:800}
.hk-band .n{font-weight:700;color:var(--blue);white-space:nowrap}
.hk-h2{font:900 clamp(30px,3.8vw,46px)/1.08 var(--display);color:var(--blue);letter-spacing:-.01em;margin:12px 0 14px;text-wrap:balance}
html:lang(zh-Hans) .hk-h2,html:lang(zh-Hans) .hk-faq summary{font-family:var(--han)}
.hk-sec-alt{background:var(--card);border-block:1px solid var(--line)}
.hk-tw{margin-top:30px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.hk-tw table{width:100%;border-collapse:collapse;font-size:16px}
.hk-tw th,.hk-tw td{padding:15px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.hk-tw thead th{border-top:0;font:900 19px/1.2 var(--display);background:var(--tint);color:var(--ink)}
.hk-tw thead th.new{background:var(--blue);color:#fff}
.hk-tw td.new{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.hk-tw td b{font:900 19px var(--display);color:var(--ink)}
.hk-tw td.new b{color:var(--blue)}
.hk-grid{font-variant-numeric:tabular-nums}
.hk-grid th,.hk-grid td{padding:13px 20px;vertical-align:middle}
.hk-grid tbody th{font:900 17px var(--display);color:var(--ink);white-space:nowrap}
.hk-grid tbody tr{transition:background .15s}
.hk-grid tbody tr:hover{background:var(--tint)}
.hk-grid td b{font-size:17px}
.hk-no{color:var(--muted)}
.hk-chg{font-weight:700;color:var(--muted);white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hk-src{margin-top:14px;font-size:14px;color:var(--muted);max-width:80ch}
.hk-src a{color:var(--blue)}
/* level rows on the guide: level and link on the left, compact word cards on the right */
.hk-voc{padding-block:clamp(72px,10vw,128px) clamp(56px,7vw,88px);border-bottom:0}
.hk-endsec{background:var(--card);border-bottom:1px solid var(--line)}
.hk-rows{margin-top:36px;border-top:1px solid var(--line)}
.hk-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.hk-row-h{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hk-row-h .lv{font:900 22px/1.2 var(--display);color:var(--ink);text-decoration:none}
.hk-row-h .lv:hover{color:var(--blue)}
.hk-row-go{white-space:nowrap;font-size:14px;font-weight:800;color:var(--blue);text-decoration:none}
.hk-row-go:hover{text-decoration:underline;text-underline-offset:3px}
.hk-ex{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.hk-ex li{position:relative;min-width:0;padding:8px 10px 9px;border-radius:12px;background:var(--card);border:1px solid var(--line);transition:transform .15s,border-color .15s,background .15s}
.hk-ex .hz{font:500 19px/1.25 var(--han);color:var(--ink);margin-right:6px}
.hk-ex .py{font-size:12px;font-weight:700;color:var(--ink)}
.hk-ex .mn{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-ex .sp-ic{display:none;position:absolute;bottom:7px;right:7px;width:22px;height:22px;place-items:center;border-radius:50%;background:var(--tint);color:var(--blue)}
.hk-ex .sp-ic svg{width:12px;height:12px}
.can-say .hk-ex .sp-ic{display:grid}
.can-say .hk-ex .mn{padding-right:24px}
.hk-ex li.l3 .hz{font-size:16px;margin-right:4px}
.hk-ex li.l3 .py{font-size:11px}
.hk-ex .py{white-space:nowrap}
.can-say .hk-ex li{cursor:pointer}
.hk-ex li:hover{transform:translateY(-2px)}
.can-say .hk-ex li:hover,.hk-ex li.on{border-color:var(--blue);background:var(--tint)}
.hk-ex li.on .sp-ic{background:var(--blue);color:#fff}
.hk-ex li:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* speaker buttons: added by hsk.js only when the device has a Mandarin voice */
.hk-say{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--tint);color:var(--blue);cursor:pointer;transition:transform .15s}
.hk-say:hover{transform:scale(1.06)}
.hk-say.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.hk-say svg{width:17px;height:17px}
.hk-say:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* a level's page */
.hk-lvtop{padding-block:clamp(36px,5vw,64px) clamp(28px,4vw,44px)}
.hk-crumb{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:14px}
.hk-crumb a{color:var(--blue);text-decoration:none}
.hk-listsec{padding-top:clamp(24px,3vw,40px)}
.hk-listsec .hk-tw{margin-top:0}
.hk-list th,.hk-list td{padding:10px 16px;vertical-align:middle}
.hk-list thead th{font-size:16px}
.hk-list tbody tr:hover{background:var(--tint)}
.hk-list.paged tbody tr:nth-child(n+101),.hk-list.pg tbody tr:not(.pg-on){display:none}
.hk-pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-bottom:16px}
.hk-pager-end{margin:18px 0 0}
.hk-per{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--muted)}
.hk-size{font:700 15px var(--body);padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.hk-pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hk-pages button{min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 15px var(--body);cursor:pointer}
.hk-pages button:hover:not(:disabled){background:var(--tint)}
.hk-pages button[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
.hk-pages button:disabled{opacity:.4;cursor:default}
.hk-pages .pg-arrow{font-size:20px;line-height:1}
.hk-pages .pg-gap{color:var(--muted);padding:0 2px}
.hk-pages button:focus-visible,.hk-size:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hk-loading{margin:0 0 12px;font-weight:600;color:var(--muted)}
.hk-list td.no{width:56px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.hk-list td.hz{font:500 24px/1.25 var(--han);color:var(--ink);white-space:nowrap}
.hk-list td.py{font-weight:700;color:var(--ink);white-space:nowrap}
.hk-list td.ps{font-size:13px;font-weight:700;color:var(--muted)}
.hk-list td.mn{color:var(--ink)}
.hk-list td.sp{width:60px}
.hk-pn{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.hk-pn a{font-weight:800;color:var(--blue);text-decoration:none;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.hk-pn a:hover{background:var(--tint)}
/* the app's own icon in the closing band */
.fs-end .hk-brand{flex-direction:column;gap:18px;place-content:center}
.fs-end .hk-brand .blob{display:none}
.hk-endsec .fs-end{background:radial-gradient(ellipse 70% 90% at 22% 35%,color-mix(in srgb,var(--blue) 75%,var(--blue-deep)) 0%,var(--blue-deep) 62%,color-mix(in srgb,var(--blue-deep) 70%,var(--blue-ink)) 100%)}
.fs-end .hk-brand img{position:relative;z-index:1;width:min(190px,48%);border-radius:22%;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.fs-end .hk-brand b{position:relative;z-index:1;font:900 clamp(30px,3.6vw,42px)/1.1 var(--display);color:#fff}
.fs-end h2 em{display:block;font-style:normal;color:var(--gold)}
.hk-faq{max-width:820px;margin-top:24px}
@media (max-width:900px){
  .hk-vis{min-height:300px;max-width:440px;width:100%;margin:0 auto}
  .hk-bands{right:0;width:200px;padding:12px 14px 6px}
  .hk-band{font-size:13px;padding:5px 0}
  .hk-vis .dashi{transform:translate(-14%,-8%)}
  .hk-row{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .fs-end .hk-brand{min-height:0;padding-top:8px}
  .fs-end .hk-brand img{width:160px}
  .hk-row-h{flex-direction:row;justify-content:space-between;align-items:baseline}
  .hk-ex{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:2px 24px 4px 2px;margin:-2px -16px -4px -2px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .hk-ex li{scroll-snap-align:start}
  .hk-ex::-webkit-scrollbar{display:none}
}
@media (max-width:700px){
  .hk-tw table{font-size:15px}
  .hk-grid th,.hk-grid td{padding:11px 10px}
  .hk-grid th:first-child,.hk-grid td:first-child{padding-left:14px}
  .hk-grid thead th{font-size:14px}
  .hk-grid tbody th,.hk-grid td b{font-size:15px}
  .hk-list thead{display:none}
  .hk-list tr{border-top:1px solid var(--line)}
  .hk-list tbody tr:first-child{border-top:0}
  .hk-list th,.hk-list td{border-top:0}
  .hk-list tr{display:block;position:relative;padding:12px 62px 12px 14px;line-height:1.5}
  .hk-list td{display:inline;padding:0;width:auto}
  .hk-list td.no{display:none}
  .hk-list td.hz{font-size:23px;margin-right:8px}
  .hk-list td.py{font-size:15px}
  .hk-list td.ps{font-size:14px;font-weight:800;color:var(--ink)}
  .hk-list td.ps::before{content:"\A";white-space:pre}
  .hk-list td.mn{font-size:14px;color:var(--muted)}
  .hk-list td.mn::before{content:" · "}
  .hk-list td.sp{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
  .hk-pn{justify-content:center}
}
@media (min-width:1260px){.hk-bands{right:-40px}}
@media (max-width:860px){.fs-end .hk-brand b{display:none}}
/* tone colours on the characters, as in the app: 1 red, 2 orange, 3 green, 4 blue, neutral grey */
:root{--t1:#C62828;--t2:#B85C00;--t3:#2E7D32;--t4:#1565C0;--t5:#757575}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t1:#ff7b72;--t2:#ffab4a;--t3:#5fd07a;--t4:#6cb4ff;--t5:#a4b0d8}}
:root[data-theme="dark"]{--t1:#ff7b72;--t2:#ffab4a;--t3:#5fd07a;--t4:#6cb4ff;--t5:#a4b0d8}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t5{color:var(--t5)}
.can-say .hk-list tbody tr{cursor:pointer}
.hk-list tbody tr.on{background:var(--tint)}
/* the HSK pages' closing band on PC: one slim row (app icon, heading, store buttons) */
@media (min-width:861px){
  .hk-endsec .fs-end{grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,48px);padding:34px clamp(32px,4vw,52px);border-radius:28px}
  .hk-endsec .fs-end .hk-brand{min-height:0;gap:10px}
  .hk-endsec .fs-end .hk-brand img{width:112px;border-radius:26px;box-shadow:0 10px 26px rgba(0,0,0,.28)}
  .hk-endsec .fs-end .hk-brand b{font-size:18px}
  .hk-endsec .fs-end h2{font-size:clamp(26px,2.5vw,32px);line-height:1.15}
  .hk-endsec .fs-end .stores{margin-top:18px}
}
@media (min-width:1100px){
  .hk-endsec .fs-end .fs-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
  .hk-endsec .fs-end .stores{margin-top:0;flex-wrap:nowrap}
}
/* phones: the closing heading in exactly two lines (white, then gold); the sign-up fields one above the other */
@media (max-width:860px){
  .hk-endsec .fs-end h2{font-size:min(4.6vw,26px);line-height:1.3;white-space:nowrap}
}
@media (max-width:640px){
  .news-form .field{flex-direction:column}
  .news-form .field input{flex:none;width:100%}
}
/* header: app names on one line; on phones and tablets the apps and languages move into a menu */
.app-cur,.dd-btn{white-space:nowrap}
@media (max-width:980px){.app-pre{display:none}}
.burger{display:none;width:42px;height:42px;flex-shrink:0;place-content:center;gap:5px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.burger:focus-visible,.drawer-item:focus-visible,.drawer-x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(5,15,40,0);transition:background .2s}
.drawer.open{background:rgba(5,15,40,.45)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);overflow-y:auto;background:var(--card);padding:18px 18px 28px;
  box-shadow:-12px 0 40px rgba(5,15,40,.25);transform:translateX(100%);transition:transform .2s ease}
.drawer.open .drawer-panel{transform:none}
.drawer-x{display:block;margin-left:auto;width:40px;height:40px;border:0;border-radius:12px;background:var(--tint);color:var(--ink);font:400 26px/1 var(--body);cursor:pointer}
.drawer-h{margin:18px 0 8px;font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.drawer-list{display:flex;flex-direction:column;gap:4px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:700 16px var(--body);text-align:left;text-decoration:none;cursor:pointer}
.drawer-item:hover{background:var(--tint)}
.drawer-item[aria-current="true"],.drawer-item[aria-checked="true"]{background:var(--tint);color:var(--blue)}
.drawer-item[aria-checked="true"]::after{content:"✓";margin-left:auto;font-weight:900}
.drawer-item .app-logo{width:34px;height:34px;border-radius:9px;flex-shrink:0}
.drawer-item.dd-all{margin-top:4px}
html.drawer-on{overflow:hidden}
@media (max-width:860px){
  header.top .dd{display:none}
  .burger{display:inline-grid}
}
@media (max-width:640px){
  header.top .brand b{display:none}
  header.top .get{display:inline-block;padding:9px 14px;font-size:13px}
  header.top .wrap{gap:8px}
}
/* community: the three buttons side by side; their names show only when the card has room for them */
.socials{flex-direction:row;gap:10px;container-type:inline-size}
.soc{flex:1 1 0;min-width:0;justify-content:center;gap:9px;padding:11px 8px}
.soc span{display:none}
.soc:hover{transform:translateY(-2px)}
@container (min-width:360px){.soc span{display:inline}.soc{gap:7px;padding:11px 6px;font-size:14px}.soc svg{width:20px;height:20px}}
@container (min-width:460px){.soc{gap:9px;font-size:16px}.soc svg{width:22px;height:22px}}
@media (max-width:640px){.community>p{display:none}}
/* footer: Discord, Facebook and Instagram as round icons */
.foot-soc{display:flex;gap:10px}
.foot-soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--on-blue);transition:background .15s,transform .15s}
.foot-soc a:hover{transform:translateY(-2px)}
.foot-soc a.dc:hover{background:#5865f2}.foot-soc a.fb:hover{background:#1877f2}.foot-soc a.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888)}
.foot-soc a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.foot-soc svg{width:20px;height:20px}
/* footer: a soft blue tint */
html footer{background:#e9f0ff;color:#2f4470}
html footer h4{color:var(--blue-ink)}
html footer a:hover{color:var(--blue)}
html footer .fine{border-top-color:rgba(4,93,236,.14)}
html .foot-soc a{background:#fff;color:var(--blue)}
html .foot-soc a:hover{color:#fff}
/* hero: a painted scene behind the blue */
.hero.bg-zh{--img:url(/assets/hero-bg-zh-fc2flip.webp);--pos:75% 50%;--size:cover}
.hero.bg-ko{--img:url(/assets/hero-bg-ko-gate.webp);--pos:72% 45%}
.hero.bg-ja{--img:url(/assets/hero-bg-ja-fuji.webp);--pos:right 70%}
html .hero.has-bg{background:
  linear-gradient(90deg,rgba(1,28,99,.9) 0%,rgba(2,52,166,.72) 34%,rgba(2,52,166,.12) 62%,rgba(2,52,166,0) 100%),
  var(--img) var(--pos,center)/var(--size,cover) no-repeat,var(--blue-deep)}
html .hero.has-bg .ghost{display:none}
html .hero.has-bg :is(h1,.rec-line,.status){text-shadow:0 2px 18px rgba(1,20,80,.35)}
@media (max-width:860px){
  .hero.bg-zh{--img:url(/assets/hero-bg-zh-fc2flip-s.webp)}.hero.bg-ko{--img:url(/assets/hero-bg-ko-gate-s.webp);--pos:68% 45%}.hero.bg-ja{--img:url(/assets/hero-bg-ja-fuji-s.webp)}
    html .hero.has-bg{background:
    linear-gradient(180deg,rgba(1,28,99,.9) 0%,rgba(2,52,166,.66) 45%,rgba(2,52,166,.05) 100%),
    var(--img) var(--pos,center)/var(--size,cover) no-repeat,var(--blue-deep)}}
.dc-only{display:none}
/* Master Korean / Master Japanese: the Discord card */
.cross.dc-card{background:#5865f2}
.cross.dc-card .dc-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:#fff;color:#5865f2;flex-shrink:0}
.cross.dc-card .dc-ic svg{width:36px;height:36px}
.cross.dc-card p{color:rgba(255,255,255,.85)}
.cross.dc-card .get{background:#fff;color:#4752c4}
/* Master Korean / Master Japanese: the sign-up and the Discord card side by side */
.lp-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:stretch}
.lp-row .notify{grid-template-columns:1fr;gap:18px;align-content:center}
.lp-row .cross.dc-card{flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap;padding:28px}
.lp-row .cross.dc-card div{flex:0 0 auto}
.lp-row .cross.dc-card .get{margin-top:4px}
@media (max-width:900px){.lp-row{grid-template-columns:1fr}}
/* the Discord card: a soft card with one full-width Discord button */
html .lp-row .cross.dc-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);align-items:stretch;gap:10px;padding:24px}
html .cross.dc-card p{color:var(--muted);font-size:15px;line-height:1.5;margin-top:4px}
html .cross.dc-card :is(.dc-ic,.get){display:none}
html .cross.dc-card .dc-only{display:flex;margin-top:6px}
html .cross.dc-card .dc-only .soc span{display:inline}
/* the Korean / Japanese sign-up laid out like the Master Chinese newsletter: a white band, the sign-up
   without a card, the Discord card beside it */
html #notify{background:var(--card);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,88px)!important}
html .lp-row{grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
html .lp-row .notify{background:none;border:0;border-radius:0;padding:0}
html .lp-row .notify h3{font:900 clamp(28px,3.4vw,40px)/1.1 var(--display);letter-spacing:-.01em}
html .lp-row .notify p{font-size:17px;margin-top:12px}
html .lp-row .notify form{max-width:560px}
@media (max-width:900px){html .lp-row{grid-template-columns:1fr;gap:28px}}
/* About us app cards: the painted scene from each app page, the app icon and a Dashi of its own */
.ab-app.t-zh{--scene:url(/assets/hero-bg-zh-fc2flip-s.webp);--spos:40% 50%}
.ab-app.t-ko{--scene:url(/assets/hero-bg-ko-gate-s.webp);--spos:68% 45%}
.ab-app.t-ja{--scene:url(/assets/hero-bg-ja-fuji-s.webp);--spos:78% 60%}
.ab-app{padding-top:0;overflow:hidden}
.ab-app .held{width:calc(100% + 44px);max-width:none;aspect-ratio:16/10;margin:0 -22px 16px;background:var(--scene) var(--spos)/cover no-repeat}
.ab-app .held .ab-ic{position:absolute;inset:auto;left:12%;top:16%;width:28%;height:auto;aspect-ratio:1;border-radius:22%;box-shadow:0 0 0 4px #fff,0 18px 34px rgba(1,20,80,.4);transform:rotate(-4deg);transition:transform .3s}
.ab-app:hover .held .ab-ic{transform:rotate(0) scale(1.05)}
.ab-app .held .ab-peek{position:absolute;inset:auto;right:6%;bottom:-2%;width:46%;height:auto;filter:drop-shadow(0 10px 16px rgba(1,20,80,.35))}
/* sign-up forms: one optional unticked line, and the consent as plain text under it */
.also{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink);cursor:pointer;width:fit-content}
.also input{accent-color:var(--blue);margin:0;width:17px;height:17px;flex-shrink:0}
p.consent{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
html .lp-row .notify p.consent{font-size:12.5px;line-height:1.5;margin-top:0}
.alsos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.also-lead{font-size:14px;color:var(--ink)}
.news-form .field .btn{align-self:stretch}

/* phones: email, then the "also send me news" boxes, then the button (compact, the same on every form) */
.lp-row .notify h3{text-wrap:pretty}
@media (max-width:640px){
  .waitlist .field{display:contents}
  .waitlist .field input[type=email]{order:1;flex:none;width:100%}
  .waitlist .alsos{order:2}
  .waitlist .field .btn{order:3;align-self:flex-start}
  .waitlist p.consent{order:4}
  .waitlist .formmsg{order:5}
  .alsos .also-lead{flex-basis:100%}
}
/* phones: the mission text alone, no lion under it (the app cards below already show Dashi) */
@media (max-width:900px){.ab-hero .fs-vis{display:none}}
/* hero (the main section), decided 2026-11-07: light backgrounds with dark text.
   Master Chinese and Master Korean: our watercolor clouds (aqua) at 70% over the painted scene.
   Master Japanese: the pale aqua #e1f6f7 at 70% over the painted scene.
   Both are strongest behind the text on the left (top on phones) and lighter towards the phones and Dashi.
   The highlighted words use the brand blue, because gold is too faint on a light background.
   Seasonal backgrounds (e.g. the sky clouds for the winter holidays) are in tools/website-segments/seasonal/. */
.hero.has-bg{--pa:.7;--on-blue:#011c63;--on-blue-muted:#2f4470;--cloud:url(/assets/hero-cloud-pale.webp)}
html .hero.has-bg.bg-ja{background:
  linear-gradient(90deg,rgb(225 246 247 / var(--pa)) 0%,rgb(225 246 247 / calc(var(--pa) - .08)) 40%,rgb(225 246 247 / calc(var(--pa) - .3)) 75%,rgb(225 246 247 / calc(var(--pa) - .4)) 100%),
  var(--img) var(--pos,center)/var(--size,cover) no-repeat,#e1f6f7}
html .hero.has-bg:is(.bg-zh,.bg-ko){background:var(--img) var(--pos,center)/var(--size,cover) no-repeat,#e1f6f7}
html .hero.has-bg:is(.bg-zh,.bg-ko)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--cloud) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgb(0 0 0 / var(--pa)) 0%,rgb(0 0 0 / calc(var(--pa) - .08)) 40%,rgb(0 0 0 / calc(var(--pa) - .3)) 75%,rgb(0 0 0 / calc(var(--pa) - .4)) 100%);
          mask-image:linear-gradient(90deg,rgb(0 0 0 / var(--pa)) 0%,rgb(0 0 0 / calc(var(--pa) - .08)) 40%,rgb(0 0 0 / calc(var(--pa) - .3)) 75%,rgb(0 0 0 / calc(var(--pa) - .4)) 100%)}
@media (max-width:860px){
  .hero.has-bg{--cloud:url(/assets/hero-cloud-pale-s.webp)}
  html .hero.has-bg.bg-ja{background:
    linear-gradient(180deg,rgb(225 246 247 / var(--pa)) 0%,rgb(225 246 247 / calc(var(--pa) - .08)) 45%,rgb(225 246 247 / calc(var(--pa) - .35)) 100%),
    var(--img) var(--pos,center)/var(--size,cover) no-repeat,#e1f6f7}
  html .hero.has-bg:is(.bg-zh,.bg-ko)::before{
    -webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / var(--pa)) 0%,rgb(0 0 0 / calc(var(--pa) - .08)) 45%,rgb(0 0 0 / calc(var(--pa) - .35)) 100%);
            mask-image:linear-gradient(180deg,rgb(0 0 0 / var(--pa)) 0%,rgb(0 0 0 / calc(var(--pa) - .08)) 45%,rgb(0 0 0 / calc(var(--pa) - .35)) 100%)}
}
html .hero.has-bg h1 em{color:var(--blue)}
html .hero.has-bg :is(h1,.rec-line,.status,.sub){text-shadow:0 1px 14px rgba(255,255,255,.7)}
html .hero.has-bg.bg-zh :is(h1,.rec-line){text-shadow:none}   /* Master Chinese: no glow under the title and the line (2026-11-14) */
html .hero.has-bg :is(.partner,.pill){background:rgba(255,255,255,.62);border-color:rgba(1,28,99,.12)}
/* closing bands (Master Chinese "learn anytime, anywhere" and the HSK pages), decided 2026-11-07:
   edge to edge, a soft blue band that fades in from the section above (no line between them), and one wide
   glowing ring around Dashi or the app icon. The fades are painted OVER the ring (::after), so a ring that is
   bigger than a short band fades out with it instead of being cut off in a hard line. */
.fs-end-sec{--above:var(--paper);--below:var(--paper);--hd:min(460px,86vw);position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,9vw,120px);
  background:linear-gradient(180deg,#c3dcfb 0%,#b5d4f9 30%,#aecff8 65%,#b2d1f8 100%)}
.fs-end-sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--above) 100%,transparent) 0.0%,color-mix(in srgb,var(--above) 84%,transparent) 8.5%,color-mix(in srgb,var(--above) 50%,transparent) 17.0%,color-mix(in srgb,var(--above) 16%,transparent) 25.5%,color-mix(in srgb,var(--above) 0%,transparent) 34.0%)}
.hk-sec-alt+.fs-end-sec{--above:#fff}
.fs-end-sec:has(+ .support){--below:#fff}
.hk-endsec.fs-end-sec{border-bottom:0}   /* the old white HSK band drew a line under itself */
.fs-end-sec .fs-end{background:none;border:0;border-radius:0;padding-inline:0;color:var(--blue-ink);--on-blue:#011c63;--on-blue-muted:#1f3463}
.fs-end-sec .fs-end .blob{display:none}
.fs-end-sec .fs-end .fs-vis{position:relative}
/* the ring: one wide outer ring */
.fs-end-sec .fs-end .fs-vis::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hd) * 1.42);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.16) 0%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.7) 95%,rgba(255,255,255,0) 100%);filter:blur(3px);box-shadow:0 0 50px rgba(255,255,255,.18)}
.fs-end-sec .fs-end h2{color:var(--blue-ink)}
/* Master Chinese closing band in the HSK style: the app icon, and on wide screens
   the heading and line on the left, the store buttons on the right */
@media (min-width:1100px){
  .mc-end.hk-endsec .fs-end .fs-txt{grid-template-rows:auto auto;row-gap:6px}
  .mc-end.hk-endsec .fs-end .fs-txt>.stores{grid-column:2;grid-row:1/span 2}
  .mc-end.hk-endsec .fs-end .fs-txt p{grid-column:1;margin-top:0}
}
@media (max-width:860px){.mc-end.hk-endsec .fs-end h2{font-size:min(6.4vw,28px);white-space:normal;text-wrap:balance}}
/* Help page: "Still unsure?" as a light blue band like the HSK one */
.hc-pic{display:block;flex-shrink:0}
.hc-still-sec.fs-end-sec{--hd:220px;padding-block:clamp(56px,8vw,96px)}
.hc-still-sec.fs-end-sec .hc-still{background:none;border-radius:0;padding-inline:0;color:var(--blue-ink)}
.hc-still-sec.fs-end-sec .hc-still h2{color:var(--blue-ink)}
.hc-still-sec.fs-end-sec .hc-still p{color:#1f3463}
.hc-still-sec.fs-end-sec .hc-still .btn{background:var(--blue);color:#fff}
.hc-still-sec.fs-end-sec .hc-pic{position:relative}
.hc-still-sec.fs-end-sec .hc-pic::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hd) * 1.42);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.16) 0%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.7) 95%,rgba(255,255,255,0) 100%);filter:blur(3px);box-shadow:0 0 50px rgba(255,255,255,.18)}
.hc-still-sec.fs-end-sec .hc-pic img{position:relative}
/* on PC: Dashi, the text and the button close together and centred */
@media (min-width:861px){
  .hc-still-sec.fs-end-sec .hc-still>div{flex:0 1 auto;max-width:560px}
  .hc-still-sec.fs-end-sec .hc-still .btn{margin-left:12px}
  .hc-still-sec.fs-end-sec .hc-still{justify-content:center}
}
.fs-end-sec .fs-end h2 em{color:var(--blue-deep)}
.fs-end-sec .fs-end .fs-txt p{color:#1f3463}
.fs-end-sec .fs-end .hk-brand b{color:var(--blue-ink)}
.fs-end-sec .fs-end .hk-brand img{box-shadow:0 12px 30px rgba(1,28,99,.18)}
@media (max-width:860px){.fs-end-sec{--hd:min(360px,80vw)}}
/* preview switcher (only in the preview; the live build drops the mockup label, so it never shows there) */
.pv-switch{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:26;max-width:calc(100vw - 24px);background:var(--ink);color:var(--paper);font:700 12px var(--body);border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pv-switch button{font:700 12px var(--body);border:0;border-radius:999px;padding:6px 10px;cursor:pointer;background:transparent;color:inherit}
.pv-switch button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.pv-switch>.pv-open{display:block;width:100%;text-align:right;padding:8px 14px}
.pv-panel{display:none;padding:4px 10px 10px}
.pv-switch.open .pv-panel{display:block}
.pv-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:3px 0}
.pv-row>span{min-width:86px;opacity:.7}
/* Master Chinese top on computers: the phone screens at 90% (--s); their frames, spacing, the labels and Dashi follow */
@media (min-width:981px){
  html .hero.bg-zh .fan{--s:.9;height:calc(var(--s) * 540px)}
  html .hero.bg-zh .mini-phone{width:calc(var(--s) * 220px);border-radius:calc(var(--s) * 34px);padding:calc(var(--s) * 8px);
    box-shadow:0 0 0 calc(var(--s) * 2px) #2b3352 inset,0 calc(var(--s) * 30px) calc(var(--s) * 60px) rgba(0,10,50,.45)}
  html .hero.bg-zh .mini-phone img{border-radius:calc(var(--s) * 27px)}
  html .hero.bg-zh .mini-phone.p2{width:calc(var(--s) * 240px)}
  html .hero.bg-zh .mini-phone.p1{left:calc(50% - var(--s) * 270px);top:calc(var(--s) * 70px)}
  html .hero.bg-zh .mini-phone.p3{right:calc(50% - var(--s) * 270px);top:calc(var(--s) * 70px)}
  html .hero.bg-zh .chip.c1{left:calc(50% - var(--s) * 270px - 20px);top:calc(var(--s) * 30px)}
  html .hero.bg-zh .chip.c2{right:calc(50% - var(--s) * 270px - 20px);top:calc(var(--s) * 10px)}
  html .hero.bg-zh .chip.c3{left:calc(50% - var(--s) * 270px + 12px);bottom:calc(var(--s) * 40px)}
  html .hero.bg-zh .chip.c4{right:calc(50% - var(--s) * 270px - 10px);bottom:calc(var(--s) * 70px)}
  html .hero.bg-zh .fan .dashi{width:max(90px,calc(var(--s) * 150px))}
  html .hero.bg-zh .chip{scale:calc(.55 + var(--s) * .45)}
  html .hero.bg-zh .chip:is(.c1,.c3){transform-origin:left center}
  html .hero.bg-zh .chip:is(.c2,.c4){transform-origin:right center}
}
/* Master Chinese top: the pale haze behind the text at 55% */
html .hero.has-bg.bg-zh{--pa:.55}