/* home.css — kanchinese.app's home and download pages (2026-10-06 design).
 *
 * The page keeps the design's own inline styles; this file holds what inline
 * styles cannot say: the fonts, hover and press states, the two layouts
 * (phone below 760 px), and the parts the script shows and hides. */

@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/h-manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/h-manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/h-manrope-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
/* only the characters these pages use (tools/build-site.js cuts it) */
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/h-notosc.woff2) format('woff2')}

html,body{margin:0;padding:0;background:#fff;color:#0F1B24;font-family:Manrope,"Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#138A57;text-decoration:none}
a:hover{color:#0F6E45}
img{display:block;max-width:100%}
button{font-family:inherit}
:lang(zh-Hans) body,:lang(zh-Hans){font-family:Manrope,"Noto Sans SC",system-ui,sans-serif}
:focus-visible{outline:2px solid #1FA36A;outline-offset:2px}
[hidden]{display:none!important}
/* the designs' tight headline tracking is for Latin letters; Chinese needs its own room */
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{letter-spacing:0!important}
/* and breaks a Chinese headline at its punctuation, not inside a phrase (anywhere only if it must) */
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{word-break:keep-all;overflow-wrap:anywhere}

/* the design's two layouts */
:root{--card-ml:-44px}
.dc,.only-d{display:contents}
.only-m{display:none}
@media (max-width:759px){
  :root{--card-ml:0px}
  .only-d{display:none}
  .only-m{display:contents}
}

/* hover and press, as the design has them */
.h1:hover{color:#0F1B24!important}
.h2:hover{background:#F2F5F4!important}
.h3:hover{background:#24333D!important}
.a4:active{transform:scale(0.97)!important}
.h5:hover{background:#DCF3E7!important}
.h6:hover{transform:translateY(-2px)!important;opacity:0.9!important}
.h7:hover{transform:translateY(-6px)!important;color:#0F1B24!important}
.h8:hover{transform:translateY(-3px)!important;box-shadow:0 16px 30px -18px rgba(15,27,36,0.35)!important;color:#0F1B24!important}
.h9:hover{background:#E7EEEA!important;color:#0F1B24!important}
.h10:hover{background:#4FD69C!important;color:#0F1B24!important}
.h11:hover{transform:translateY(-2px)!important}
.h12:hover{color:#fff!important}
.h13:hover{background:#F3F7F5!important}
.mh1:hover{color:#fff!important}
.ma2:active{transform:scale(0.94)!important}
.ma3:active{transform:scale(0.98)!important}
.mh4:hover{color:#0F1B24!important}

/* two designs in one page: the phone one below 760 px, the wide one above */
@media (max-width:759px){.v-d{display:none}}
@media (min-width:760px){.v-m{display:none}}
/* the phone card's label may take two lines in longer languages: keep them even */
.v-m div:has(> [data-card-label]){text-wrap:balance;line-height:1.4}
[data-ways-track]::-webkit-scrollbar,[data-reviews-track]::-webkit-scrollbar{display:none}
[data-clip]:hover [data-clip-play]{transform:scale(1.08)}
[data-clip-play]{transition:transform .25s}
[data-clip-box] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
[data-clip].is-playing [data-clip-play],[data-clip].is-playing [data-clip-dur]{display:none}

/* the hero's sound button */
[data-sound]{flex:none;width:22px;height:22px;border:none;border-radius:50%;background:rgba(255,255,255,0.14);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
[data-sound] svg{width:12px;height:12px}

@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}