:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#123d47;background:#f4faf7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #087b70;outline-offset:5px}a:hover{color:#087b70}.skip{position:absolute;top:-80px;padding:12px;background:white;z-index:10}.skip:focus{top:8px}.blog-nav{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 32px;gap:24px}.brand img{display:block;object-fit:contain}.blog-nav nav,footer nav{display:flex;gap:28px;flex-wrap:wrap;font-size:14px}.blog-nav [aria-current=page]{font-weight:750;border-bottom:2px solid #087b70;padding-bottom:5px}main{max-width:1200px;margin:auto;padding:0 32px 80px}.blog-hero{position:relative;overflow:hidden;background:#80f7e2;border-radius:28px;padding:58px 56px 48px;margin:16px 0 56px}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700}.blog-hero h1{position:relative;z-index:1;font-size:clamp(36px,5.4vw,64px);letter-spacing:-.05em;line-height:1.24;margin:25px 0}.blog-hero h1 span{color:#087b70}.blog-hero p:not(.eyebrow){line-height:1.9;color:#315c62}.hero-link{display:inline-block;margin-top:22px;font-weight:650}.hero-decoration{position:absolute;right:45px;top:48px;font-size:300px;line-height:1;color:#20c8ad;transform:rotate(12deg)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.section-title h2{margin:0;font-size:25px}.section-title span,.meta{font-size:12px;color:#617b7f}.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.post-card{overflow:hidden;background:#fff;border:1px solid #dce9e2;border-radius:20px;display:flex;flex-direction:column}.card-art{height:190px;display:flex;align-items:center;justify-content:center;position:relative;font-size:64px;font-weight:900;letter-spacing:-.06em;background:#d6f4bb;color:#3d6d3f}.card-art span{position:absolute;bottom:18px;left:24px;font-size:10px;letter-spacing:.16em}.art-browser-game-loading{background:#c7e9ff;color:#2a637a}.art-browser-game-saves{background:#e4dcff;color:#6b5790}.card-copy{padding:24px;display:flex;flex-direction:column;flex:1}.card-copy h2{font-size:22px;line-height:1.5;margin:8px 0 12px;letter-spacing:-.02em}.card-copy>p:not(.meta){font-size:14px;color:#617b7f;line-height:1.85;margin:0 0 24px}.read-more{margin-top:auto;font-size:14px;font-weight:700;display:flex;justify-content:space-between}.article-wrap{max-width:820px;margin:24px auto 0}.breadcrumb{font-size:13px;color:#617b7f;margin-bottom:36px}.article-header{border-bottom:1px solid #dce9e2;padding-bottom:28px}.article-header h1{font-size:clamp(30px,4.8vw,48px);line-height:1.35;letter-spacing:-.03em}.lead{font-size:18px;line-height:1.8;color:#617b7f}.article-body{font-size:17px;line-height:1.95}.article-body section{margin:36px 0}.article-body h2,.related h2{font-size:23px;line-height:1.5}.article-body p{color:#3e5e64}.sources{padding:20px 28px;background:#e8f3ee;border-radius:16px;font-size:14px;overflow-wrap:anywhere}.sources h2{font-size:18px}.sources a{text-decoration:underline;text-underline-offset:4px}.sources ul{padding-left:20px}.related{margin:40px 0;padding-top:20px;border-top:1px solid #dce9e2}.related a{display:block;margin:18px 0;line-height:1.6}.back-link{display:inline-block;font-weight:700;margin-top:16px}footer{border-top:1px solid #dce9e2;max-width:1136px;margin:auto;padding:32px 0 40px;display:flex;justify-content:space-between;gap:24px;color:#617b7f;font-size:12px}footer nav{font-size:12px;gap:20px}@media(max-width:850px){.post-grid{grid-template-columns:1fr}.post-card{display:grid;grid-template-columns:220px 1fr}.card-art{height:100%;min-height:230px}.hero-decoration{right:-65px;opacity:.35}footer{margin:0 32px;flex-direction:column}}@media(max-width:520px){.blog-nav{padding:20px;gap:16px}.brand img{width:95px;height:40px}.blog-nav nav{gap:16px;font-size:13px}main{padding:0 20px 48px}.blog-hero{padding:32px 24px;margin:8px 0 36px;border-radius:22px}.blog-hero .eyebrow{font-size:10px;letter-spacing:.07em}.hero-decoration{top:100px;font-size:240px}.section-title{align-items:flex-start;flex-direction:column}.post-card{display:flex}.card-art{height:170px;min-height:170px}.card-copy{padding:22px}.article-body{font-size:16px}.sources{padding:16px 20px}.article-header h1{font-size:32px}footer{margin:0 20px}}

/* The palette and preference follow the game portal. */
:root{--blog-bg:#f7fbff;--blog-surface:#fff;--blog-ink:#142343;--blog-muted:#667695;--blog-border:#dce8f7;--blog-body:#3e5e64;--blog-accent:#087b70;--blog-note:#e8f3ee;color:var(--blog-ink);background:var(--blog-bg);color-scheme:light}
html[data-theme=dark]{--blog-bg:#101827;--blog-surface:#1d2a3e;--blog-ink:#eff5ff;--blog-muted:#acbcd3;--blog-border:#344761;--blog-body:#c2d0e2;--blog-accent:#80f7e2;--blog-note:#223b43;color-scheme:dark}
body{background:var(--blog-bg);color:var(--blog-ink)}.post-card,.skip{background:var(--blog-surface)}.post-card,.article-header,.related,footer{border-color:var(--blog-border)}.section-title span,.meta,.card-copy>p:not(.meta),.breadcrumb,.lead,footer{color:var(--blog-muted)}.article-body p{color:var(--blog-body)}.sources{background:var(--blog-note)}a:hover{color:var(--blog-accent)}a:focus-visible,button:focus-visible{outline:3px solid var(--blog-accent);outline-offset:5px}.blog-nav [aria-current=page]{border-color:var(--blog-accent)}.blog-nav nav{margin-left:auto}.theme-toggle{flex-shrink:0;width:42px;height:42px;border:0;border-radius:50%;background:#edf3ff;color:#1259d8;font-size:24px;cursor:pointer}.blog-hero{color:#123d47}.blog-hero a:hover{color:#087b70}.hero-decoration{pointer-events:none}.blog-hero>p,.hero-link{position:relative;z-index:1}html[data-theme=dark] .theme-toggle{background:#30435e;color:#c9dbff}html[data-theme=dark] .blog-hero{background:#153f46;color:#e5fff7}html[data-theme=dark] .blog-hero p:not(.eyebrow){color:#b7dcd6}html[data-theme=dark] .blog-hero h1 span,html[data-theme=dark] .blog-hero a:hover{color:#80f7e2}html[data-theme=dark] .hero-decoration{color:#22635f}html[data-theme=dark] .card-art{background:#294633;color:#c8ecb2}html[data-theme=dark] .art-browser-game-loading{background:#243e58;color:#b6deff}html[data-theme=dark] .art-browser-game-saves{background:#393255;color:#dbceff}
@media(max-width:520px){.blog-nav{gap:12px;flex-wrap:wrap}.blog-nav nav{order:3;width:100%;justify-content:space-between;margin:0}.theme-toggle{margin-left:auto;width:38px;height:38px}.blog-hero h1{font-size:clamp(30px,8vw,40px)}.blog-hero p:not(.eyebrow){font-size:14px}}