/* Editorial refresh — shared SSR pages, no external fonts or assets. */
:root{--bg:#0d0e10;--surface:#161719;--surface-2:#202123;--text:#f4f0e8;--text-2:#c9c6c0;--muted:#95958f;--line:#333431;--line-soft:#272825;--accent:#ff503d;--wrap:1240px}
body{background:radial-gradient(ellipse at 90% 0,rgba(112,47,30,.13),transparent 48%),var(--bg)}
.nav{padding:18px max(28px,calc((100vw - 1184px)/2));gap:28px}
.nav::after{animation:none;opacity:.25;background:linear-gradient(90deg,transparent,#ff503d,transparent)}
.brand-mark{width:38px;height:38px;border-radius:11px;font-size:23px;box-shadow:none}
.brand-text{font-size:16px;gap:5px}
.brand-text em{font-size:10px}
.nav-links{font-size:13px;gap:24px}
.lang-toggle,.btn-feed{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.hero{max-width:none;padding:100px 0 88px;position:relative;isolation:isolate}
.hero::after{content:'脏';position:absolute;right:10px;top:42px;font:800 clamp(220px,28vw,370px)/1 var(--serif);color:rgba(255,92,63,.07);transform:rotate(-9deg);pointer-events:none;z-index:-1}
.hero-kicker{display:flex;align-items:center;gap:12px;letter-spacing:.16em;color:#ff8b74;margin-bottom:30px}
.hero-kicker::before{content:'';width:26px;height:1px;background:currentColor}
.hero-h{max-width:850px;font-size:clamp(42px,6.2vw,80px);line-height:1.08;letter-spacing:-.045em;font-weight:650;margin-bottom:28px}
html[data-lang=en] .hero-h{font-family:Georgia,'Times New Roman',serif}
.hero-sub{font-size:17px;line-height:1.85;max-width:620px;color:#aaa9a3}
.hero-cta{margin-top:36px;gap:14px}
.btn-primary{border-radius:10px;padding:14px 26px;box-shadow:0 4px 20px #ff503d16}
.btn-ghost{border-radius:10px;background:#ffffff03}
.sec{padding:40px 0 52px}
.sec-head{margin-bottom:24px;align-items:center}
.sec-head h2{font-size:24px;letter-spacing:-.035em}
.sec-head p{max-width:460px;line-height:1.6;color:var(--muted)}
.more{font-size:12px;border-bottom:1px solid #5b5b54;padding-bottom:4px}
.sevgrid{gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#ffffff02}
.sevcol{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;padding:22px 18px}
.sevcol:last-child{border-right:0}
.sevcol-head{flex-wrap:wrap;font-size:11px;gap:7px;margin-bottom:18px}
.sevcol-head b{font:500 18px var(--mono)}
.sevcol-items{gap:6px}
.sevcol-items a{background:#ffffff05;font-size:14px;padding:4px 8px;border:1px solid #ffffff07}
.wgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wgrid.big{grid-template-columns:repeat(4,minmax(0,1fr))}
.wcard{padding:24px;min-height:216px;border:1px solid var(--line-soft);border-radius:14px;background:linear-gradient(145deg,#ffffff04,#ffffff00),var(--surface);gap:9px}
.wcard::after{inset:auto 24px 0;height:2px;width:30px;opacity:.65}
.wcard:hover{background:#1c1d1f;border-color:#55534d;transform:translateY(-4px);box-shadow:0 16px 30px #0003;backdrop-filter:none}
.wcard:hover::before{animation:none;opacity:0}
.wc-top{margin-bottom:12px}
.wc-sev{width:28px;height:28px;border-radius:8px;font-size:12px}
.wc-cat{font-size:9px;letter-spacing:.14em}
.wc-hanzi{font-size:38px;font-weight:650;line-height:1.3}
.wc-py{font-size:12px;color:#b1aa9d}
.wc-eq{font-size:14px;line-height:1.6;margin-top:auto;padding-top:8px}
.wcard.lesson{min-height:230px}
.wcard.lesson .chip{align-self:flex-start}
.wc-hanzi.small{font-size:23px;line-height:1.45}
.page-head{padding-top:64px;padding-bottom:32px}
.page-head h1{font-size:44px;letter-spacing:-.045em}
.filters{gap:10px;margin-bottom:30px}
.filters .chip{padding:7px 14px}
.word-page{gap:40px;padding-top:36px}
.word-head{padding-bottom:36px}
.block{padding:32px 0}
.block-h{color:#b5b0a5;letter-spacing:.13em}
.block p{line-height:1.9}
.ex,.side-card,.ns-card{background:linear-gradient(130deg,#ffffff03,transparent),var(--surface);border-color:var(--line-soft)}
.foot{padding:48px 24px;color:#a29e95}
.sevbar-fill::after{animation:none;opacity:0}
@media(max-width:1000px){
 .nav{padding:14px 24px;gap:16px}.nav-search{display:none}
 .hero{padding:72px 0}.hero-h{max-width:720px}
 .wgrid,.wgrid.big{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sevgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
 .sevcol{padding:18px 10px}.sevcol-head .i18n{flex-basis:100%}
}
@media(max-width:760px){
 .nav{padding:12px 18px;gap:12px}.nav-links{gap:24px;font-size:13px}
 .brand-mark{width:32px;height:32px;font-size:20px}.brand-text{font-size:14px}
 .hero{padding:54px 0 46px}.hero::after{font-size:240px;top:30px;right:10px;opacity:.65}
 .hero-kicker{font-size:9px;letter-spacing:.09em;margin-bottom:24px}
 .hero-h{font-size:clamp(39px,8.5vw,60px);letter-spacing:-.04em}
 .hero-sub{font-size:15px;line-height:1.8}.hero-cta{margin-top:28px}
 .hero-cta a{padding:12px 18px;font-size:14px}
 .sec{padding:30px 0 36px}.sec-head{align-items:flex-start}.sec-head h2{font-size:21px}
 .sec-head p{font-size:13px;max-width:none}
 .sevgrid{grid-template-columns:1fr}.sevcol{padding:15px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}
 .sevcol:last-child{border-bottom:0}.sevcol-head{margin:0}.sevcol-head .i18n{flex-basis:auto}
 .sevcol-items a{font-size:13px;padding:3px 6px}
 .wgrid,.wgrid.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .wcard{padding:17px;min-height:205px}.wc-hanzi{font-size:30px}.wc-cat{font-size:8px;letter-spacing:0}.wc-eq{font-size:13px}
 .wc-hanzi.small{font-size:20px}.page-head{padding-top:40px}.page-head h1{font-size:36px}
 .word-page{gap:24px}.word-side{top:auto}.block-key,.block-danger,.block-why{margin-left:0;padding-left:16px}
}
@media(prefers-reduced-motion:reduce){.wcard:hover{transform:none}}

.hero-h{animation:headline-in .65s ease-out both}
@keyframes headline-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Learning and decoding share the same type and surface hierarchy. */
.hub,.dec{padding-top:48px}
.hub-h,.dec-h{font-weight:650;letter-spacing:-.035em}
.hub-sub,.dec-sub{font-size:16px;line-height:1.8;margin-top:16px;margin-bottom:32px}
.hub-sec{padding-top:28px;border-top:1px solid var(--line-soft);margin-top:34px}
.hub-sec h2,.hub-sec h2 span{font-size:20px;color:var(--text);font-weight:600}
.hub-card{padding:22px;border-radius:14px;background:linear-gradient(135deg,#ffffff04,transparent),var(--surface)}
.hub-card .n{font-size:36px;font-weight:500;margin:8px 0}
.dec-in{padding:24px;min-height:170px;border-radius:14px;background:linear-gradient(145deg,#ffffff03,transparent),var(--surface)}
.dec-in:focus{box-shadow:0 0 0 3px #ff503d15}
.dec-out{padding:24px;line-height:1.9}
.demo button{padding:9px 14px;border-radius:8px}
.hitcard{padding:20px;transition:background .2s,border-color .2s}
@media(max-width:760px){
 .hub,.dec{padding-top:28px}.hub-sub,.dec-sub{font-size:14px}
 .hub-card{padding:17px}.hub-card .n{font-size:30px}
 .hitcard{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px}
 .hitcard .e{grid-column:1/-1;grid-row:2;overflow-wrap:anywhere}
 .hitcard .h{line-height:1.4}.hitcard .p{overflow-wrap:anywhere}
 .dec-in,.dec-out{padding:18px}
}