@charset "UTF-8";
:root { --sf31ae52b7-canvas:#1ac771; --sf31ae52b7-ink:#8d6900; --sf31ae52b7-accent:#89f55f; --sf31ae52b7-secondary:#f21988; --sf31ae52b7-surface:#b5ab93; --sf31ae52b7-text:#17251d; --sf31ae52b7-paper:#f2f0eb; }
* { box-sizing:border-box; } body { margin:0; color:var(--sf31ae52b7-text); background:var(--sf31ae52b7-paper); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.75; }
a { color:inherit; } .sf31ae52b7-topline { height:8px; background:var(--sf31ae52b7-secondary); } .sf31ae52b7-brandbar { display:flex; align-items:center; gap:20px; padding:12px max(5vw,20px); background:#20312a; color:#fff; }
.sf31ae52b7-brand { color:var(--sf31ae52b7-accent); font-size:28px; font-weight:900; text-decoration:none; } .sf31ae52b7-brandbar p { margin:0; letter-spacing:.12em; }
.sf31ae52b7-navigation { display:flex; flex-wrap:wrap; gap:4px 14px; padding:10px max(4vw,16px); background:#fff; border-bottom:1px solid #d5d1c8; position:sticky; top:0; z-index:4; } .sf31ae52b7-navigation a { text-decoration:none; font-size:14px; padding:5px 7px; border-bottom:2px solid transparent; } .sf31ae52b7-navigation a:hover { border-color:var(--sf31ae52b7-secondary); }
.sf31ae52b7-main { max-width:1240px; margin:auto; padding:30px 24px 65px; } .sf31ae52b7-home-main > section { margin:0 auto 25px; } .sf31ae52b7-hero { padding:32px clamp(20px,6vw,76px); background:var(--sf31ae52b7-canvas); border-radius:0 0 46px 0; } .sf31ae52b7-hero h1 { font-size:clamp(28px,4vw,48px); line-height:1.2; margin:8px 0 20px; } .sf31ae52b7-hero p:last-child { max-width:940px; font-size:17px; } .sf31ae52b7-eyebrow { color:#243d30; font-weight:900; letter-spacing:.2em; }
.sf31ae52b7-home-main h2 { margin:0 0 12px; } .sf31ae52b7-section-no { color:var(--sf31ae52b7-ink); font-weight:800; font-size:12px; letter-spacing:.1em; } .sf31ae52b7-live-reading,.sf31ae52b7-result-summary,.sf31ae52b7-schedule-ledger,.sf31ae52b7-rank-panel,.sf31ae52b7-highlight-panel,.sf31ae52b7-qa-note,.sf31ae52b7-fixture-note { padding:24px 30px; background:#fff; border-left:7px solid var(--sf31ae52b7-accent); }
.sf31ae52b7-clock-band { display:flex; justify-content:space-around; align-items:center; gap:16px; margin-top:18px; padding:13px; background:#eff8ef; } .sf31ae52b7-clock-band b { color:#31543a; }
.sf31ae52b7-zh-strip { padding:24px 30px; background:var(--sf31ae52b7-accent); } .sf31ae52b7-zh-strip a { font-weight:800; text-decoration-thickness:2px; } .sf31ae52b7-schedule-ledger dl { display:grid; grid-template-columns:150px 1fr; max-width:650px; } .sf31ae52b7-schedule-ledger dt,.sf31ae52b7-schedule-ledger dd { padding:8px; border-bottom:1px solid #d7d3c9; margin:0; }
.sf31ae52b7-community > div { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } .sf31ae52b7-community article { padding:20px; background:#fff; border-top:5px solid var(--sf31ae52b7-secondary); } .sf31ae52b7-community h3 { margin-top:0; }
.sf31ae52b7-news-teaser,.sf31ae52b7-faq { padding:24px 30px; background:#fff; } .sf31ae52b7-news-teaser header { display:flex; justify-content:space-between; align-items:center; } .sf31ae52b7-news-teaser > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .sf31ae52b7-story { min-width:0; } .sf31ae52b7-news-teaser .sf31ae52b7-story { padding:12px; background:#f4f2eb; border-bottom:3px solid var(--sf31ae52b7-canvas); } .sf31ae52b7-story h3 { line-height:1.4; } .sf31ae52b7-story a { color:#254d37; } .sf31ae52b7-story p { font-size:14px; } .sf31ae52b7-story img { max-height:135px; margin:auto; } .sf31ae52b7-faq > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .sf31ae52b7-faq-item { background:#f4f1e9; padding:14px 17px; border-left:4px solid var(--sf31ae52b7-secondary); } .sf31ae52b7-faq-item summary { font-weight:800; cursor:pointer; }
.sf31ae52b7-about-heading { padding:26px; background:#e1ddd1; border-top:9px solid var(--sf31ae52b7-canvas); } .sf31ae52b7-about-heading h1,.sf31ae52b7-table-heading h1,.sf31ae52b7-news-heading h1 { margin:0 0 10px; font-size:clamp(28px,4vw,42px); } .sf31ae52b7-about-frame { display:grid; grid-template-columns:.65fr 1.35fr; gap:28px; margin:24px 0; } .sf31ae52b7-about-rail { align-self:start; position:sticky; top:95px; padding:18px; background:#fff; } .sf31ae52b7-about-rail > p { display:inline-block; margin:3px; padding:5px 8px; background:#eef3e9; font-size:13px; } .sf31ae52b7-about-visuals,.sf31ae52b7-data-stamps,.sf31ae52b7-language-visuals,.sf31ae52b7-app-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; } .sf31ae52b7-gallery-picture { max-width:100%; max-height:100px; margin:auto; } .sf31ae52b7-about-card { padding:22px 24px; margin-bottom:16px; background:#fff; border-bottom:2px solid #c9c2b3; }
.sf31ae52b7-news-heading { padding:24px; background:#253d31; color:#fff; border-left:11px solid var(--sf31ae52b7-secondary); } .sf31ae52b7-news-heading p:first-child { color:var(--sf31ae52b7-accent); } .sf31ae52b7-news-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; } .sf31ae52b7-news-wall .sf31ae52b7-story { padding:14px; background:#fff; } .sf31ae52b7-news-wall .sf31ae52b7-story:nth-child(4n+1) { grid-column:span 2; } .sf31ae52b7-article-picture { max-width:100%; max-height:180px; object-fit:contain; margin:auto; }
.sf31ae52b7-table-heading { padding:22px 28px; background:#e4dfd4; } .sf31ae52b7-data-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:22px; margin:24px 0; } .sf31ae52b7-data-explain { overflow-x:auto; } .sf31ae52b7-data-explain dl { min-width:600px; margin:0; background:#fff; } .sf31ae52b7-data-row { display:grid; grid-template-columns:170px 1fr; border-bottom:1px solid #dedbd2; } .sf31ae52b7-data-row dt { padding:18px; background:#e8e5dc; font-weight:900; } .sf31ae52b7-data-row dd { padding:18px; margin:0; } .sf31ae52b7-data-stamps { background:#fff; padding:15px; margin:0; }
.sf31ae52b7-language-head { display:grid; grid-template-columns:1fr .7fr; gap:26px; align-items:center; padding:25px; background:#fff; } .sf31ae52b7-language-head h1 { color:#25673e; font-size:38px; } .sf31ae52b7-language-visuals { margin:0; } .sf31ae52b7-language-card { padding:22px; margin:20px 0; background:#e9e5da; border-left:6px solid var(--sf31ae52b7-canvas); } .sf31ae52b7-language-card:nth-child(2) { margin-left:12%; }
.sf31ae52b7-app-heading { display:grid; grid-template-columns:1fr 260px; align-items:center; gap:26px; padding:24px; background:#e5e0d4; } .sf31ae52b7-app-heading h1 { font-size:38px; } .sf31ae52b7-app-feature { max-height:190px; margin:auto; } .sf31ae52b7-app-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin:22px 0; } .sf31ae52b7-app-card { padding:23px; background:#fff; } .sf31ae52b7-app-card:nth-child(2) { transform:translateY(28px); border-top:5px solid var(--sf31ae52b7-secondary); } .sf31ae52b7-app-card span { color:var(--sf31ae52b7-ink); font-weight:900; } .sf31ae52b7-app-gallery { display:flex; justify-content:center; gap:14px; padding:20px; background:#fff; } .sf31ae52b7-app-gallery .sf31ae52b7-gallery-picture { max-height:95px; }
.sf31ae52b7-footer { background:#20312a; color:#fff; padding:24px max(5vw,20px); font-size:14px; } .sf31ae52b7-footer a { color:var(--sf31ae52b7-accent); margin-right:20px; }
@media(max-width:850px) { .sf31ae52b7-main { padding:20px 14px 42px; } .sf31ae52b7-about-frame,.sf31ae52b7-data-layout,.sf31ae52b7-language-head,.sf31ae52b7-app-heading { grid-template-columns:1fr; } .sf31ae52b7-about-rail { position:static; } .sf31ae52b7-news-wall { grid-template-columns:repeat(2,minmax(0,1fr)); } .sf31ae52b7-news-wall .sf31ae52b7-story:nth-child(4n+1) { grid-column:span 2; } .sf31ae52b7-news-teaser > div { grid-template-columns:1fr 1fr; } .sf31ae52b7-community > div { grid-template-columns:1fr; } }
@media(max-width:560px) { .sf31ae52b7-news-wall,.sf31ae52b7-news-teaser > div { grid-template-columns:1fr; } .sf31ae52b7-news-wall .sf31ae52b7-story:nth-child(4n+1) { grid-column:auto; } .sf31ae52b7-faq > div { grid-template-columns:1fr; } .sf31ae52b7-clock-band { flex-wrap:wrap; } .sf31ae52b7-schedule-ledger dl { grid-template-columns:1fr; } .sf31ae52b7-schedule-ledger dt { font-weight:800; } .sf31ae52b7-language-card:nth-child(2) { margin-left:0; } .sf31ae52b7-app-grid { grid-template-columns:1fr; } .sf31ae52b7-app-card:nth-child(2) { transform:none; } }