body{background:#fcf9f1;color:#111}.wrap{width:min(1120px,calc(100% - 32px))}.site-head{padding:18px 0;isolation:auto;background:#fcf9f1}.brand{font-weight:800}.site-head .brand img{width:78px;height:78px;background:none;mix-blend-mode:multiply;padding:0}.brand small{font-weight:400}
.hero.hero-viva{position:relative;isolation:isolate;display:grid;grid-template-columns:1.13fr .87fr;grid-template-rows:auto auto;column-gap:26px;row-gap:28px;border:0;border-radius:0;min-height:0;padding:48px 44px 50px;background:#fcf9f1 url('/marca-v364/papel-tinta-pincelada.png') center bottom/100% 100% no-repeat;overflow:hidden}
.hero-viva:before{content:'学';font:280px/1 Brush;color:#dfcd9b;opacity:.30;right:12px;top:0;z-index:-1}.hero-viva:after{content:'';position:absolute;inset:0 40% 115px 0;background:linear-gradient(90deg,#fcf9f1ed 65%,#fcf9f100);opacity:1;border-radius:0;pointer-events:none;z-index:-1}.hero-viva .hero-copy{max-width:none;grid-column:1;grid-row:1;z-index:2}.hero.hero-viva .eyebrow{font:700 11px/1.5 DM;letter-spacing:1.6px;color:#9c1724;margin-bottom:16px}
.hero.hero-viva h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(46px,5.3vw,73px);line-height:1.04;letter-spacing:-.5px;margin:0 0 24px;text-transform:uppercase;color:#080808}.hero.hero-viva h1 span{color:#c80000}
.hero.hero-viva .viva-lead{font:600 23px/1.4 DM;color:#394c5f;max-width:520px;margin:0}
.viva-example{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center;padding:36px 10px 16px;min-width:0;z-index:2}
.study-card{position:relative;width:100%;padding:34px 25px 30px;border:8px solid #fffcf4;border-radius:24px;background:#fcf7e9;box-shadow:0 18px 26px #291d123d,0 1px 0 #b99a6680;transform:rotate(-5deg);text-align:center;color:#111;outline:1px solid #e4d3b7;outline-offset:-16px}
.hero.hero-viva .study-caption{font:700 10px/1.4 DM;letter-spacing:2px;color:#79654c;margin:0 0 16px;max-width:none}
.hero.hero-viva .study-hanzi{font:700 105px/1.2 'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;color:#080808;margin:0 0 4px;max-width:none}
.hero.hero-viva .study-pinyin{font:500 32px/1.3 DM;color:#45576a;margin:0;max-width:none}.hero.hero-viva .study-meaning{font:700 30px/1.4 DM;color:#111;margin:3px 0 0;max-width:none}
.study-mark{display:block;margin:18px auto 0;width:95px;height:6px;background:#da0704;clip-path:polygon(0 50%,18% 15%,100% 0,91% 45%,14% 100%);transform:rotate(-3deg)}
.viva-action{grid-column:1;grid-row:2;z-index:2}.hero.hero-viva .cta{display:inline-flex;justify-content:center;align-items:center;background:linear-gradient(110deg,#b80019,#d90011);box-shadow:0 4px 0 #7f0017;border:1px solid #fff9;color:white;font:800 21px/1.25 DM;padding:18px 24px;min-height:56px;margin:0;border-radius:14px}
.hero.hero-viva .viva-action p{display:inline-block;background:#fffcf1e8;border-radius:6px;color:#3b414b;font:500 13px/1.5 DM;margin:14px 0 0;padding:3px 8px}
.proof{border-radius:0 0 16px 16px;margin-top:0}.proof div{background:#fffdf7}.proof b{color:#b90015}.proof span{color:#454d57}.content-grid{margin-top:34px}.panel{border-radius:14px;background:#fffdf8}.why{background:#f0e3c9}.why .checks li:before{color:#a51d2d}.final{background:#bd0018}
@media(max-width:760px){
 .wrap{width:100%}.site-head,.cpe-breadcrumbs{margin-left:20px;margin-right:20px}.site-head{padding:10px 0 16px}.site-head .brand img{width:68px;height:68px}.brand{font-size:17px;gap:12px}.brand small{font-size:11px}
 .hero.hero-viva{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:28px 24px 32px;background-size:auto 100%;background-position:center bottom}
 .hero.hero-viva:after{content:none}.hero.hero-viva:before{font-size:205px;right:-15px;top:6px;opacity:.25}.hero.hero-viva h1{font-size:clamp(37px,10.7vw,54px);line-height:1.04;letter-spacing:-.35px;margin:0 0 17px}.hero.hero-viva .eyebrow{font-size:9px;letter-spacing:1.35px;margin-bottom:12px}
 .hero.hero-viva .viva-lead{font-size:18px;line-height:1.4;font-weight:600}.viva-example{display:block;padding:22px 14px 24px}.study-card{max-width:320px;margin:auto;padding:21px 20px 18px;border-width:7px;border-radius:20px;transform:rotate(-4deg);box-shadow:0 12px 18px #291d1233;outline-offset:-13px}
 .hero.hero-viva .study-caption{font-size:9px;margin:0 0 7px}.hero.hero-viva .study-hanzi{font-size:76px;line-height:1.1;margin:0 0 4px}.hero.hero-viva .study-pinyin{font-size:25px}.hero.hero-viva .study-meaning{font-size:24px}.study-mark{margin-top:10px;width:75px;height:5px}
 .viva-action{text-align:center;margin-top:4px}.hero.hero-viva .cta{width:100%;font-size:19px;min-height:54px;padding:16px 14px;border-radius:12px;box-shadow:0 3px 0 #7f0017}.hero.hero-viva .viva-action p{font-size:12px;margin-top:10px}
 .proof{margin:0 20px 28px;grid-template-columns:1fr;border-radius:14px}.proof div{padding:15px 16px}.content-grid,.panel.full,.final,.note,.seo-instagram{margin-left:20px;margin-right:20px}.content-grid{margin-top:24px}.panel{padding:24px}.faq-grid{gap:12px}.full{margin-bottom:20px}.final{margin-top:24px}.note{margin-top:0}
}

/* Shared article layout, not just the landing page. */
.hero.hero-viva:before,.hero.hero-viva:after{position:absolute;pointer-events:none}
.hero.hero-viva .cta{text-decoration:none;gap:10px}
.head{isolation:auto;background:#fcf9f1;padding:18px 0}.head .brand img{width:78px;height:78px;background:none;mix-blend-mode:multiply;padding:0}.head .brand{color:#111}
.hero.hero-viva .byline{font:400 12px/1.5 DM;color:#5c5c5c;margin-top:15px;max-width:520px}
.hero.hero-viva .viva-lead{font-size:21px;font-weight:500}
.hero.hero-viva.long-title h1{font-size:58px}.hero.hero-viva .study-hanzi.three-hanzi{font-size:80px}
.hero.hero-viva .viva-action p{display:block;width:max-content;max-width:100%}
.hero.hero-viva .cta:focus-visible{outline:3px solid #111;outline-offset:4px}
.visual .eyebrow{color:#a51d2d}.visual{border-left-color:#c80000}
@media(max-width:760px){.head{margin:0 20px;padding:10px 0 16px}.head .brand img{width:68px;height:68px}.head .back{display:none}.head .brand{font-size:17px}.hero.hero-viva .viva-lead{font-size:18px;line-height:1.4}.hero.hero-viva.long-title h1{font-size:clamp(34px,9.8vw,46px)}.hero.hero-viva .study-hanzi.three-hanzi{font-size:60px}.hero.hero-viva .byline{font-size:11px;margin-top:12px}.viva-action{display:flex;flex-direction:column;align-items:center}.visual,.article,.related{margin-left:20px;margin-right:20px}.visual{padding:18px 20px}.article{padding:26px 22px}.related{padding:24px}.hero.hero-viva .viva-action p{margin-left:auto;margin-right:auto}.cpe-breadcrumbs{padding-left:20px!important;padding-right:20px!important}}
@media(max-width:350px){.head .brand{font-size:15px;gap:8px}.head .brand small{font-size:10px}.head .brand img{width:60px;height:60px}}