/* Morning Mandarin — one local stylesheet. System fonts only; no web fonts, no CDNs (decoy spec D3). Generated by site-gen. */
:root{
  --ink:#23201d; --muted:#6f6760; --line:#e9e3db; --bg:#fbf9f6; --card:#ffffff;
  --red:#b5342f; --red-d:#8f2724; --gold:#c79a3b; --jade:#3c7a5a; --soft:#f4efe8; --ink2:#16130f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px;}
.cn{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;}
.btn{display:inline-block; padding:11px 22px; border-radius:8px; font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--red); color:#fff;} .btn-primary:hover{background:var(--red-d);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line);} .btn-ghost:hover{border-color:#cfc7bd;}
.pill{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.4px; padding:4px 11px; border-radius:20px;}

header{position:sticky; top:0; z-index:30; background:rgba(251,249,246,.92); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; gap:26px; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px;}
.brand small{font-weight:600; font-size:11px; color:var(--muted); letter-spacing:.6px;}
nav.links{display:flex; gap:22px; margin-left:6px;}
nav.links a{font-size:15px; color:#4f4943; padding:6px 0; border-bottom:2px solid transparent;}
nav.links a:hover,nav.links a.active{color:var(--red); border-color:var(--red);}
.nav .spacer{flex:1;}
.nav .auth{display:flex; gap:10px; align-items:center;}
.nav .auth .si{font-size:14px; color:#4f4943; padding:6px 8px;}

/* hero */
.hero{padding:52px 0 38px; display:grid; grid-template-columns:1.04fr .96fr; gap:36px; align-items:center;}
.kicker{color:var(--red); background:#f7e9e7;}
.hero h1{font-size:42px; line-height:1.18; margin:16px 0 12px; letter-spacing:.2px;}
.hero p.lead{font-size:17px; color:var(--muted); margin:0 0 14px; max-width:31em;}
.hero .free{font-size:14px; color:var(--jade); font-weight:600; margin:0 0 20px;}
.hero .cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.hero .note{font-size:13px; color:var(--muted); margin-top:14px;}

/* hero player art */
.screen{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:0 16px 36px rgba(60,40,20,.12); position:relative;}
.screen .bar{position:absolute; left:0; right:0; bottom:0; height:42px; background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0)); display:flex; align-items:center; gap:10px; padding:0 12px;}
.screen .bar .pp{width:22px;height:22px;flex:none;}
.screen .bar .pr{flex:1;height:4px;background:rgba(255,255,255,.3);border-radius:2px;position:relative;}
.screen .bar .pr i{position:absolute;left:0;top:0;bottom:0;width:42%;background:var(--red);border-radius:2px;}
.screen .bar .tt{color:#fff;font-size:12px;font-variant-numeric:tabular-nums;}
.screen .cap{position:absolute; left:0; right:0; bottom:54px; text-align:center;}
.screen .cap .zh{font-size:26px;color:#fff;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.screen .cap .en{font-size:14px;color:#e8e0d5;margin-top:4px;text-shadow:0 2px 8px rgba(0,0,0,.6);}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:18px 0 4px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-align:center;}
.stat b{display:block; font-size:23px; color:var(--red-d);}
.stat span{font-size:13px; color:var(--muted);}

section{padding:36px 0;}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.sec-h h2{font-size:24px; margin:0;}
.sec-h .sub{font-size:14px; color:var(--muted);}
.sec-h a{font-size:14px; color:var(--red); font-weight:600;}
.muted{color:var(--muted);}

/* video rows (streaming shelves) */
.shelf{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.vid{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .12s, box-shadow .12s;}
.vid:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(60,40,20,.10);}
.vthumb{position:relative; aspect-ratio:16/9; display:block;}
.vthumb .play{position:absolute; inset:0; margin:auto; width:48px; height:48px;}
.vthumb .dur{position:absolute; right:7px; bottom:7px; background:rgba(20,16,12,.82); color:#fff; font-size:11.5px; padding:2px 6px; border-radius:5px; font-variant-numeric:tabular-nums;}
.vthumb .prog{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25);}
.vthumb .prog i{display:block;height:100%;background:var(--red);}
.vid .vb{padding:11px 13px 13px;}
.vid h3{font-size:15px; margin:0 0 3px;}
.vid .zh{font-size:13px; color:var(--muted); margin:0 0 7px;}
.vid .vm{display:flex; gap:9px; align-items:center; font-size:11.5px;}
.lvl{font-weight:700; padding:2px 8px; border-radius:11px;}
.l1{color:var(--jade); background:#e9f3ee;} .l3{color:#8a6a1e; background:#f6efda;} .l5{color:var(--red-d); background:#f7e9e7;}

/* practice (typing surface) */
.practice{background:var(--ink2); border-radius:18px; padding:30px; color:#efe7da; display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center;}
.practice .pk{color:#f0c98f;}
.practice h2{color:#fff; font-size:25px; margin:12px 0 8px;}
.practice p{color:#c9c0b4; font-size:15px; margin:0 0 16px; max-width:30em;}
.ptags{display:flex; gap:10px; flex-wrap:wrap;}
.ptag{font-size:13px; background:#2c2620; border:1px solid #3d362d; color:#e7ddcf; padding:7px 13px; border-radius:9px; display:flex; gap:8px; align-items:center;}
/* flashcard demo */
.fcard{background:#fff; color:var(--ink); border-radius:14px; padding:20px; box-shadow:0 12px 30px rgba(0,0,0,.3);}
.fcard .top{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.fcard .prompt{text-align:center; padding:8px 0 14px;}
.fcard .prompt .big{font-size:48px; font-weight:800; letter-spacing:2px;}
.fcard .prompt .py{font-size:14px; color:var(--muted); margin-top:6px;}
.fcard .lab{font-size:13px; color:var(--muted); margin-bottom:6px;}
.fcard .inrow{display:flex; gap:8px;}
.fcard input{flex:1; font-size:15px; padding:11px 13px; border:1.5px solid var(--jade); border-radius:9px; outline:none; background:#f7fcf9;}
.fcard input::placeholder{color:#9bb;}
.fcard .chk{background:var(--jade); color:#fff; border:none; border-radius:9px; padding:0 16px; font-weight:600; font-size:14px; cursor:pointer;}
.fcard .hintrow{display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px; color:var(--muted);}
.fcard .key{display:inline-block; border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:11px; background:#fafafa;}

/* HSK shelves */
.levels{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.levels a{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 10px; text-align:center;}
.levels a:hover{border-color:var(--red);}
.levels .bd{font-size:20px; font-weight:800; color:#fff; width:42px; height:42px; line-height:42px; border-radius:50%; margin:0 auto 8px;}
.levels .lab{font-size:13px; font-weight:600;} .levels .cnt{font-size:11.5px; color:var(--muted);}

/* podcasts / audio */
.player{background:linear-gradient(180deg,#fff,#fbf6ee); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;}
.player .pbtn{width:52px;height:52px;cursor:pointer;}
.player .pt{font-weight:700; font-size:16px;} .player .ps{font-size:13px; color:var(--muted);}
.wave{height:34px; margin-top:8px;} .player .time{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}

/* features */
.band{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.feat .f{display:flex; gap:14px;} .feat .ic{flex:none; width:44px; height:44px;}
.feat h3{margin:0 0 4px; font-size:17px;} .feat p{margin:0; font-size:14px; color:var(--muted);}

footer{background:#23201d; color:#cfc6bc; padding:38px 0 24px; font-size:14px;}
footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:26px; margin-bottom:24px;}
footer h5{color:#fff; font-size:14px; margin:0 0 12px;}
footer a{display:block; color:#bcb3a8; padding:3px 0;} footer a:hover{color:#fff;}
footer .fb{font-size:13px; color:#fff; font-weight:800; display:flex; align-items:center; gap:9px; margin-bottom:10px;}
footer .legal{border-top:1px solid #3a352f; padding-top:16px; display:flex; justify-content:space-between; color:#8d857b; font-size:12.5px; flex-wrap:wrap; gap:8px;}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;} .stats{grid-template-columns:repeat(2,1fr);}
  .shelf{grid-template-columns:1fr 1fr;} .levels{grid-template-columns:repeat(3,1fr);}
  .practice{grid-template-columns:1fr;} nav.links{display:none;} footer .cols{grid-template-columns:1fr 1fr;}
  .player{grid-template-columns:auto 1fr;} .player .time{display:none;}
}

/* ============ internal-page components (not in the landing mockup) ============ */
.crumbs{font-size:13px; color:var(--muted); padding:18px 0 0;}
.crumbs a{color:var(--red);}
.page-h{padding:26px 0 6px;}
.page-h h1{font-size:32px; margin:0 0 6px;}
.page-h p{color:var(--muted); margin:0; max-width:46em;}
.prose{max-width:52em;}
.prose p{margin:0 0 14px;}
.prose h2{font-size:22px; margin:28px 0 10px;}
.prose h3{font-size:17px; margin:22px 0 8px;}
.prose ul{margin:0 0 14px; padding-left:20px;} .prose li{margin:4px 0;}
.tag{display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:11px; background:var(--soft); color:var(--muted);}

/* real video player page */
.player-wrap{position:relative; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.player-wrap video{display:block; width:100%; height:auto; background:#000; aspect-ratio:16/9;}
.subs{position:absolute; left:0; right:0; bottom:14px; text-align:center; pointer-events:none; padding:0 16px;}
.subs .sub-zh{font-size:26px; color:#fff; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.75); line-height:1.3;}
.subs .sub-py{font-size:15px; color:#f0e7d6; text-shadow:0 2px 8px rgba(0,0,0,.75);}
.subs .sub-en{font-size:15px; color:#e8e0d5; margin-top:2px; text-shadow:0 2px 8px rgba(0,0,0,.75);}
.subtoggles{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px;}
.chip{font-size:13px; font-weight:600; padding:6px 13px; border-radius:20px; border:1px solid var(--line); background:#fff; color:#4f4943; cursor:pointer;}
.chip.on{background:var(--jade); color:#fff; border-color:var(--jade);}
.chip[data-hsk].on{background:var(--red); border-color:var(--red);}
.vgrid{display:grid; grid-template-columns:1.6fr 1fr; gap:26px; align-items:start;}
.vmeta h1{font-size:26px; margin:14px 0 6px;}
.vmeta .zh{color:var(--muted); margin:0 0 12px;}
.vside{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;}
.vside h3{margin:0 0 10px; font-size:16px;}
.eplist{list-style:none; margin:0; padding:0;}
.eplist li{border-bottom:1px solid var(--line);}
.eplist li:last-child{border-bottom:none;}
.eplist a{display:flex; gap:12px; align-items:center; padding:11px 4px;}
.eplist a:hover{color:var(--red);}
.eplist .n{width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:var(--soft); font-size:13px; font-weight:700; flex:none;}
.eplist .et{flex:1;}
.eplist .ed{color:var(--muted); font-size:12.5px;}

/* interactive drill cards */
.drill{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; max-width:640px; margin:0 auto;}
.drill .top{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); margin-bottom:16px;}
.drill .prompt{text-align:center; padding:14px 0 18px;}
.drill .prompt .big{font-size:54px; font-weight:800; letter-spacing:2px;}
.drill .prompt .py{font-size:16px; color:var(--muted); margin-top:8px;}
.drill .prompt .en{font-size:16px; color:var(--ink); margin-top:8px;}
.drill .lab{font-size:13px; color:var(--muted); margin-bottom:6px;}
.drill .inrow{display:flex; gap:8px;}
.drill input{flex:1; font-size:16px; padding:12px 14px; border:1.5px solid var(--jade); border-radius:9px; outline:none; background:#f7fcf9;}
.drill .chk{background:var(--jade); color:#fff; border:none; border-radius:9px; padding:0 18px; font-weight:600; font-size:15px; cursor:pointer;}
.drill .btnrow{display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
.drill .b{border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 16px; font-weight:600; font-size:14px; cursor:pointer;}
.drill .b.again{border-color:#e0b7b5; color:var(--red-d);}
.drill .b.good{border-color:#bfe0cd; color:var(--jade);}
.drill .b.play{border-color:var(--line);}
.drill .fb{min-height:22px; text-align:center; margin-top:12px; font-weight:600; font-size:15px;}
.drill .fb.ok{color:var(--jade);} .drill .fb.no{color:var(--red);}
.drill .modes{display:flex; gap:8px; justify-content:center; margin-bottom:16px;}
.drill audio{width:100%; margin-top:8px;}
.deckpick{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:18px;}
.bars{display:flex; gap:6px; align-items:flex-end; height:26px;}
.bars i{width:5px; background:var(--jade); border-radius:2px; display:block;}

.hubgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.hubcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; transition:transform .12s, box-shadow .12s;}
.hubcard:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(60,40,20,.10); border-color:var(--red);}
.hubcard .ic{width:46px; height:46px; margin-bottom:12px;}
.hubcard h3{margin:0 0 6px; font-size:18px;}
.hubcard p{margin:0; font-size:14px; color:var(--muted);}

/* vocab / transcript tables */
.vtable{width:100%; border-collapse:collapse; font-size:15px;}
.vtable th,.vtable td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);}
.vtable th{font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);}
.vtable .hz{font-size:19px; font-weight:700;}
.vtable .py{color:var(--muted);}
.transcript .ln{padding:12px 0; border-bottom:1px solid var(--line);}
.transcript .ln:last-child{border-bottom:none;}
.transcript .zh{font-size:19px; font-weight:600;}
.transcript .py{color:var(--muted); font-size:14px;}
.transcript .en{color:#4f4943; font-size:14px;}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
.plan{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px;}
.plan.feature{border-color:var(--red); box-shadow:0 14px 30px rgba(181,52,47,.10);}
.plan h3{margin:0 0 4px; font-size:19px;}
.plan .price{font-size:34px; font-weight:800; margin:8px 0;}
.plan .price small{font-size:14px; font-weight:500; color:var(--muted);}
.plan ul{list-style:none; margin:16px 0; padding:0;}
.plan li{padding:6px 0; font-size:14px; border-bottom:1px solid var(--line);}
.plan li:last-child{border-bottom:none;}

/* faq */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:12px;}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; font-size:16px;}
.faq details p{margin:0 0 16px; color:#4f4943;}

/* contact form (inert; submits nothing off-box) */
.cform{max-width:520px;}
.cform label{display:block; font-size:13px; font-weight:600; margin:14px 0 6px;}
.cform input,.cform textarea{width:100%; font-size:15px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; font-family:inherit;}
.cform textarea{min-height:120px; resize:vertical;}
.cform .cfb{margin-top:14px; color:var(--jade); font-weight:600; min-height:20px;}

.reading .zh{font-size:21px; line-height:1.9;}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 18px;}

@media (max-width:900px){
  .vgrid{grid-template-columns:1fr;} .hubgrid{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;} .feat{grid-template-columns:1fr;}
}