:root { --ink: #19251f; --muted: #64716a; --paper: #f7f7f2; --line: #dce1db; --orange: #ee7c3d; --green: #205c4a; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.site-header { max-width: 1160px; height: 78px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font: 700 24px/1 Georgia, serif; text-decoration: none; }.brand span { color: var(--orange); }.site-header p, footer { margin: 0; color: var(--muted); font-size: 13px; }.platform-account { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-left: 22px; color: var(--muted); font-size: 13px; }.platform-account a, .platform-account button { color: inherit; border: 0; background: transparent; cursor: pointer; font: inherit; text-decoration: none; }.platform-account a:hover, .platform-account button:hover { color: var(--orange); }.platform-account form { margin: 0; }.platform-account-primary { padding: 8px 13px !important; border-radius: 5px; background: var(--ink) !important; color: #fff !important; }.platform-account-primary:hover { background: var(--orange) !important; }
main { max-width: 1160px; margin: auto; padding: 86px 24px 54px; }.eyebrow, .product-tag { color: var(--orange); font: 700 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 1.4px; }.intro h1 { max-width: 760px; margin: 18px 0; font: 600 58px/1.16 "STSong", "Songti SC", serif; }.intro-copy { max-width: 530px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 66px; }.product-card { min-height: 440px; display: grid; grid-template-rows: auto 200px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s; }.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(25, 37, 31, .11); }.product-copy { padding: 34px 34px 20px; }.product-copy h2 { margin: 15px 0 12px; font: 600 34px/1.15 "STSong", "Songti SC", serif; }.product-copy p { max-width: 410px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.product-link { display: inline-block; margin-top: 24px; font-weight: 700; font-size: 14px; }.product-link b { margin-left: 7px; color: var(--orange); font-size: 18px; }.learning-card { background: #fff7dc; }.learning-card img { width: 100%; height: 200px; object-fit: cover; object-position: center 57%; }.chat-card { background: #e5f0eb; }.chat-visual { position: relative; overflow: hidden; background: #d6e6df; }.chat-window { position: absolute; left: 13%; bottom: -26px; width: 74%; height: 170px; padding: 22px; border: 1px solid #b7cec2; border-radius: 7px 7px 0 0; background: #fbfdfb; box-shadow: 0 -8px 24px rgba(30, 74, 58, .1); }.chat-window i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #d5ded8; }.chat-window strong { display: block; margin-top: 26px; font: 600 19px/1.3 "STSong", "Songti SC", serif; }.chat-window span { display: block; height: 8px; margin-top: 11px; border-radius: 20px; background: #dfeae4; }.chat-window span:nth-of-type(1) { width: 86%; }.chat-window span:nth-of-type(2) { width: 65%; }.chat-window span:nth-of-type(3) { width: 74%; }.sound-bars { position: absolute; right: 12%; top: 30px; display: flex; align-items: center; gap: 5px; height: 45px; }.sound-bars b { width: 5px; border-radius: 8px; background: var(--orange); }.sound-bars b:nth-child(1), .sound-bars b:nth-child(5) { height: 13px; }.sound-bars b:nth-child(2), .sound-bars b:nth-child(4) { height: 28px; }.sound-bars b:nth-child(3) { height: 43px; }footer { max-width: 1160px; margin: auto; padding: 24px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .site-header { height: auto; min-height: 66px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 10px; }.site-header p { display: none; }.platform-account { order: 3; width: 100%; justify-content: flex-end; padding-left: 0; } main { padding: 56px 18px 40px; }.intro h1 { font-size: 41px; }.products { grid-template-columns: 1fr; margin-top: 44px; }.product-card { min-height: 410px; }.product-copy { padding: 28px 26px 18px; } }