/* wangruijie132435.com home — a bespoke page powered by universal tokens. */
:root { color-scheme:light dark; }
body.home-page { min-height:100vh; }
.home-wrap { width:min(1180px,100%); margin:0 auto; padding:clamp(32px,6vw,78px) clamp(20px,5vw,58px) 34px; }
.home-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:var(--ui-border-width) solid var(--ui-border); }
.home-mark { display:flex; align-items:center; gap:10px; color:var(--ui-ink); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.02em; }
.home-mark::before { width:9px; height:9px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-accent) 16%,transparent); content:""; }
.home-nav-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 20px; }
.home-nav-links a { position:relative; color:var(--ui-text-secondary); text-decoration:none; font-size:13px; transition:color var(--ui-fast) var(--ui-ease-out); }
.home-nav-links a::after { position:absolute; right:0; bottom:-6px; left:0; height:1px; background:var(--ui-brand); content:""; scale:0 1; transform-origin:left; transition:scale var(--ui-fast) var(--ui-ease-out); }
.home-nav-links a:hover { color:var(--ui-brand); }.home-nav-links a:hover::after { scale:1 1; }
.home-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr); gap:clamp(24px,7vw,92px); align-items:end; padding:clamp(62px,11vw,138px) 0 clamp(48px,8vw,92px); }
.home-kicker { margin:0 0 18px; color:var(--ui-brand); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.home-title { max-width:850px; margin:0; color:var(--ui-ink); font-size:clamp(48px,8vw,112px); font-weight:760; letter-spacing:-.075em; line-height:.94; }
.home-title em { color:var(--ui-brand); font-style:normal; }
.home-intro { margin:0; padding-bottom:8px; color:var(--ui-text-secondary); font-size:clamp(15px,1.7vw,19px); line-height:1.8; }
.home-intro b { color:var(--ui-ink); font-weight:700; }
.home-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 16px; }
.home-section-head h2 { margin:0; color:var(--ui-ink); font-size:13px; font-weight:800; letter-spacing:.08em; }.home-section-head span { color:var(--ui-muted); font-size:12px; }
.home-places { display:grid; grid-template-columns:1.35fr .9fr .9fr; grid-template-areas:"blog notes music" "blog games ai"; gap:var(--ui-space-3); }
.home-place { position:relative; display:flex; min-height:176px; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(20px,3vw,32px); border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius-lg); color:var(--ui-text); background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); text-decoration:none; transition:transform var(--ui-motion) var(--ui-ease-out),box-shadow var(--ui-motion) var(--ui-ease-out),border-color var(--ui-motion) var(--ui-ease-out),background var(--ui-motion) var(--ui-ease-out); }
.home-place:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--ui-brand) 55%,var(--ui-border)); box-shadow:var(--ui-shadow-lg); }
.home-place::before { position:absolute; top:22px; right:23px; color:var(--ui-muted); font-size:11px; font-weight:800; letter-spacing:.12em; content:attr(data-index); }
.home-place--blog { grid-area:blog; min-height:376px; justify-content:flex-end; background:linear-gradient(145deg,var(--ui-brand-soft),var(--ui-surface) 62%); }.home-place--blog:hover { background:linear-gradient(145deg,var(--ui-brand-soft),var(--ui-surface)); }
.home-place--notes { grid-area:notes; }.home-place--music { grid-area:music; }.home-place--games { grid-area:games; }.home-place--ai { grid-area:ai; }
.home-place--music { background:color-mix(in srgb,var(--ui-accent) 11%,var(--ui-surface)); }.home-place--ai { background:color-mix(in srgb,var(--ui-brand) 6%,var(--ui-surface)); }
.home-place-type { margin:0 0 10px; color:var(--ui-brand); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.home-place h3 { margin:0; color:var(--ui-ink); font-size:clamp(21px,2vw,30px); letter-spacing:-.045em; }.home-place p { margin:8px 0 0; color:var(--ui-text-secondary); font-size:14px; line-height:1.6; }.home-place-arrow { align-self:flex-end; margin-top:24px; color:var(--ui-brand); font-size:24px; line-height:1; transition:transform var(--ui-fast) var(--ui-ease-out); }.home-place:hover .home-place-arrow { transform:translate(4px,-4px); }
.home-more { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--ui-space-3); margin-top:var(--ui-space-3); }.home-more a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px; padding:0 22px; border-bottom:var(--ui-border-width) solid var(--ui-border); color:var(--ui-text-secondary); text-decoration:none; transition:color var(--ui-fast) var(--ui-ease-out),background var(--ui-fast) var(--ui-ease-out); }.home-more a:hover { color:var(--ui-brand); background:var(--ui-surface-subtle); }.home-more strong { color:inherit; font-size:14px; }.home-more span { color:var(--ui-muted); font-size:12px; }
.home-footer { display:flex; justify-content:space-between; gap:20px; margin-top:clamp(68px,12vw,150px); padding-top:18px; border-top:var(--ui-border-width) solid var(--ui-border); color:var(--ui-muted); font-size:12px; }.home-footer a { color:inherit; text-decoration:none; }.home-footer a:hover { color:var(--ui-brand); }
@media (max-width:800px) { .home-hero { grid-template-columns:1fr; gap:22px; padding-block:76px 54px; }.home-intro { max-width:540px; }.home-places { grid-template-columns:1fr 1fr; grid-template-areas:"blog blog" "notes music" "games ai"; }.home-place--blog { min-height:276px; } }
@media (max-width:540px) { .home-wrap { padding-inline:20px; }.home-nav { align-items:flex-start; flex-direction:column; }.home-nav-links { justify-content:flex-start; }.home-places { display:grid; grid-template-columns:1fr; grid-template-areas:"blog" "notes" "music" "games" "ai"; }.home-place,.home-place--blog { min-height:178px; }.home-more { grid-template-columns:1fr; }.home-footer { align-items:flex-start; flex-direction:column; margin-top:76px; } }