:root{--paper:#f7f7f5;--ink:#171717;--muted:#70706f;--line:#dededb;--orange:#f05216;--orange-dark:#bf3b0b;--font:Arial,'Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.55}a{color:inherit;text-decoration:none}button,select{font:inherit}.topline{min-height:34px;background:var(--ink);color:#eee;display:flex;justify-content:center;gap:12px;align-items:center;font-size:11px}.topline a{color:#ff9b72;font-weight:700}.site-header{height:76px;padding:0 max(20px,calc((100vw - 1240px)/2));background:#fff;border-bottom:1px solid #ececea;display:flex;align-items:center;gap:28px;position:sticky;top:0;z-index:3}.brand{width:170px;display:block}.brand img{display:block;width:100%;height:auto}.site-header nav{display:flex;gap:30px;margin:auto;font-size:13px;font-weight:600;color:#555}.header-actions{display:flex;gap:9px}.language-select{border:1px solid var(--line);background:#fff;padding:8px;font-size:12px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:0;border-radius:4px;font-size:12px;font-weight:700;cursor:pointer}.button-dark{background:var(--ink);color:#fff}.button-orange{background:var(--orange);color:#fff}.hero{max-width:1240px;margin:24px auto 0;background:#171717;color:#fff;min-height:490px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;padding:62px 7% 80px}.hero-copy{max-width:570px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1px;color:#c8c8c4;margin:0 0 17px}.hero h1{font-size:clamp(40px,5vw,65px);line-height:1.06;margin:0}.hero h1 em{font-style:normal;color:#ff7040}.hero-lede{max-width:500px;color:#bdbdb9;font-size:15px;line-height:1.8;margin:20px 0}.hero-note{font-size:11px;color:#93938f}.hero-visual{background:#252523;border:1px solid #444440;padding:18px 20px;max-width:410px;justify-self:end;width:100%}.visual-top{display:flex;justify-content:space-between;color:#b4b4af;font-size:9px;letter-spacing:.7px}.visual-top b{color:#ff7547}.character-stage{height:218px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #444440}.character-ghost{font-family:serif;font-size:180px;color:#fff}.character-caption{position:absolute;right:20px;bottom:21px;text-align:right;display:grid;gap:1px}.character-caption span{font-size:9px;color:#a3a39e;text-transform:uppercase}.character-caption b{font-size:18px;color:#ff7040}.character-caption small{font-size:10px;color:#b6b6b1}.practice-line{padding:15px 0;font-size:15px}.practice-line i{font-style:normal;color:#ff7547}.practice-line span{float:right;color:#ff7547}.visual-bottom{border-top:1px solid #444440;padding-top:12px;color:#aaa9a4;font-size:9px}.hero-foot{position:absolute;left:7%;right:7%;bottom:19px;border-top:1px solid #42423f;padding-top:10px;display:flex;justify-content:space-between;color:#81817c;font-size:8px;letter-spacing:.8px}.site-footer{background:#1a1a19;color:#fff;padding:30px max(20px,calc((100vw - 1120px)/2));margin-top:55px}.site-footer:after{content:'© 2026 HSKBuddy · Learning materials are for reference and practice only. They do not replace regular instruction.';display:block;border-top:1px solid #42423f;margin-top:18px;padding-top:12px;color:#aaa;font-size:9px}.footer-logo{width:140px;background:#fff;padding:4px}.footer-main{display:flex;gap:20px;align-items:center}.footer-main p{font-size:11px;color:#aaa}.footer-links{margin-left:auto;display:flex;gap:18px;font-size:10px}.auth-dialog{border:1px solid var(--line);padding:30px;width:min(420px,calc(100vw - 30px))}.auth-dialog::backdrop{background:#0009}.auth-dialog h2{margin:0 0 8px}.auth-intro{font-size:12px;color:var(--muted)}.email-form label{font-size:11px;font-weight:700;display:block;margin:14px 0 6px}.email-row{display:flex;gap:7px}.email-row input{flex:1;min-width:0;height:42px;border:1px solid var(--line);padding:0 10px}.social-row{display:flex;gap:8px;margin-top:18px}.social-row button{flex:1;height:38px;background:#fff;border:1px solid var(--line)}.auth-status{font-size:11px;color:#355d4b}.icon-button{float:right;border:0;background:transparent;font-size:25px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#171717;color:#fff;padding:10px 15px;font-size:11px;display:none}.toast.show{display:block}
@media(max-width:700px){.site-header{height:auto;min-height:65px;padding:10px 14px;gap:10px}.brand{width:125px}.site-header nav{gap:12px;font-size:10px}.language-select{width:40px;font-size:0}.hero{margin:12px 10px 0;display:flex;flex-direction:column;padding:38px 22px 70px;gap:28px}.hero h1{font-size:42px}.hero-visual{max-width:none}.hero-foot{left:22px;right:22px}.footer-main{flex-wrap:wrap}.footer-links{margin-left:0;width:100%}}