:root { color-scheme:dark; --bg:#101111; --surface:#171919; --surface-2:#1c1e1d; --text:#f3f2ed; --muted:#a2a5a0; --line:rgba(235,241,229,.14); --accent:#d5f795; --accent-ink:#1b2510; --nav-bg:rgba(16,17,17,.88); --card:#171a18; --radius:20px; }
:root[data-theme="light"] { color-scheme:light; --bg:#f1f1e9; --surface:#e6e8dd; --surface-2:#dfe3d6; --text:#20241c; --muted:#626959; --line:rgba(30,45,25,.18); --accent:#c3e88a; --accent-ink:#223113; --nav-bg:rgba(241,241,233,.9); --card:#e6e8de; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; scroll-padding-top:110px; }
/* JS enables this only during initial localization; no fixed delay or fade-in. */
html.i18n-pending body { visibility:hidden; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; transition:background .35s,color .35s; }
body.modal-open { overflow:hidden; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
[data-theme="light"] button:focus-visible,[data-theme="light"] a:focus-visible { outline-color:#477324; }
::selection { background:var(--accent); color:var(--accent-ink); }
svg { display:block; }
.container { width:min(1280px,calc(100% - 112px)); margin-inline:auto; }
.eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.mono { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.muted { color:var(--muted); }
.skip { position:fixed; top:10px; left:10px; z-index:100; padding:12px 20px; border-radius:8px; background:var(--accent); color:var(--accent-ink); transform:translateY(-160%); }
.skip:focus { transform:translateY(0); }
.site-header { height:98px; position:relative; z-index:20; }
.header-inner { height:100%; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); gap:30px; }
.logo { display:inline-flex; align-items:center; gap:11px; font-size:26px; letter-spacing:-1.7px; font-weight:700; }
.logo-mark { width:27px; height:27px; color:var(--accent); }
[data-theme="light"] .logo-mark { color:#50762d; }
.desktop-nav { display:flex; align-items:center; gap:39px; font-size:13px; }
.desktop-nav a { position:relative; color:var(--muted); padding:14px 0; transition:color .2s; }
.desktop-nav a:hover,.desktop-nav a.active { color:var(--text); }
.desktop-nav a.active::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent); left:calc(50% - 2px); bottom:3px; }
[data-theme="light"] .desktop-nav a.active::after { background:#50762d; }
.header-actions { display:flex; align-items:center; gap:23px; }
.header-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.status-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; box-shadow:0 0 12px rgba(213,247,149,.35); }
[data-theme="light"] .status-dot { background:#54722e; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; transition:background .2s,border-color .2s; }
.icon-button:hover { background:var(--surface-2); border-color:var(--muted); }
.icon-button svg { width:16px; height:16px; }
.moon-icon { display:none; }
[data-theme="light"] .sun-icon { display:none; }
[data-theme="light"] .moon-icon { display:block; }
.menu-toggle { display:none; }
.mobile-nav { display:none; }
.hero { position:relative; min-height:696px; display:grid; grid-template-columns:1.06fr 1fr; align-items:center; }
.hero-copy { position:relative; z-index:2; padding:63px 0 78px; }
.hero-kicker { display:flex; align-items:center; gap:12px; color:var(--muted); margin-bottom:35px; }
.tiny-line { width:24px; height:1px; background:var(--accent); }
[data-theme="light"] .tiny-line { background:#668345; }
h1 { font-size:clamp(48px,5.9vw,85px); font-weight:500; letter-spacing:-.065em; line-height:1.22; margin:0; }
h1 .line { display:block; }
h1 .second-line { color:var(--accent); margin-top:8px; }
[data-theme="light"] h1 .second-line { color:#657747; }
.title-dot { color:var(--text); }
.hero-description { font-size:14px; line-height:2; letter-spacing:.04em; color:var(--muted); margin:29px 0 34px; max-width:350px; }
.hero-actions { display:flex; align-items:center; gap:29px; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:30px; background:var(--accent); color:var(--accent-ink); padding:16px 22px; border-radius:7px; font-size:13px; font-weight:600; transition:transform .25s,box-shadow .25s; }
.primary-link:hover { transform:translateY(-3px); box-shadow:0 8px 32px #b3d77d16; }
.arrow { width:16px; height:16px; flex-shrink:0; }
.text-link { display:inline-flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); padding:12px 0; transition:color .2s; }
.text-link:hover { color:var(--text); }
.hero-footnote { position:absolute; left:0; bottom:25px; display:flex; gap:13px; align-items:center; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.hero-footnote span + span::before { content:"/"; margin-right:13px; opacity:.4; }
.hero-art { position:relative; height:610px; margin-right:-20px; overflow:visible; }
.art-grid { position:absolute; inset:65px 12px 60px; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:70px 70px; opacity:.19; mask-image:radial-gradient(ellipse,black,transparent 68%); -webkit-mask-image:radial-gradient(ellipse,black,transparent 68%); }
.art-halo { position:absolute; inset:100px 10px 85px; border-radius:50%; background:radial-gradient(ellipse,rgba(176,211,120,.075),transparent 65%); }
.orbit { position:absolute; inset:51px -14px 50px; width:calc(100% + 28px); height:calc(100% - 101px); color:var(--muted); opacity:.4; }
.sculpture { width:100%; height:100%; position:absolute; inset:0; touch-action:pan-y; }
.sculpture canvas { width:100%; height:100%; display:block; }
.fallback-art { position:absolute; inset:0; width:100%; height:100%; animation:form-float 12s ease-in-out infinite; }
@keyframes form-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(3deg); } }
[data-motion="paused"] .fallback-art,.sculpture.is-offscreen .fallback-art { animation-play-state:paused; }
.motion-toggle { position:absolute; bottom:17px; right:0; z-index:3; width:28px; height:28px; color:var(--muted); }
.motion-toggle svg { width:10px; height:10px; }
.motion-toggle:disabled { opacity:.4; cursor:default; }
.play-icon { display:none; }
[data-motion="paused"] .pause-icon { display:none; }
[data-motion="paused"] .play-icon { display:block; }
.webgl-ready .fallback-art { display:none; }
.art-label { position:absolute; color:var(--muted); font-size:9px; letter-spacing:.13em; line-height:1.7; }
.art-label-top { top:64px; right:23px; text-align:right; }
.art-label-left { top:295px; left:-5px; display:flex; align-items:center; gap:10px; }
.art-label-left::before { content:""; width:18px; height:1px; background:var(--muted); opacity:.5; }
.art-label-bottom { bottom:69px; right:16px; }
.art-caption { position:absolute; bottom:27px; left:50%; transform:translateX(-50%); text-align:center; white-space:nowrap; font-size:9px; letter-spacing:.2em; color:var(--muted); }
.art-caption b { font-weight:400; margin:0 10px; opacity:.35; }
.art-cross { position:absolute; width:12px; height:12px; color:var(--muted); opacity:.6; }
.art-cross::before,.art-cross::after { content:""; position:absolute; background:currentColor; }
.art-cross::before { width:12px; height:1px; top:5px; }
.art-cross::after { height:12px; width:1px; left:5px; }
.cross-one { top:102px; left:44px; }.cross-two { right:62px; bottom:115px; }
.section-divider { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:23px 0; }
.divider-left { display:flex; align-items:center; gap:11px; font-size:10px; letter-spacing:.13em; color:var(--muted); }
.divider-left svg { width:12px; height:12px; }
.divider-right { display:flex; align-items:center; gap:15px; font-size:10px; color:var(--muted); letter-spacing:.06em; }
.divider-right .arrow { width:12px; height:12px; }
.explore { padding:74px 0 100px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:33px; }
.section-kicker { color:var(--muted); display:flex; gap:16px; align-items:center; margin-bottom:18px; font-size:10px; letter-spacing:.13em; }
.section-kicker .number { color:var(--accent); }
[data-theme="light"] .section-kicker .number { color:#53712f; }
h2 { font-size:34px; font-weight:450; letter-spacing:-.035em; margin:0; line-height:1.4; }
.section-description { margin:0 0 6px; font-size:12px; line-height:1.8; color:var(--muted); }
.card-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px; }
.explore-card { text-align:left; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:0; transition:transform .35s,border-color .35s,background .35s; }
.explore-card:hover { transform:translateY(-6px); border-color:rgba(213,247,149,.42); }
[data-theme="light"] .explore-card:hover { border-color:#819465; }
.card-art { height:222px; position:relative; display:grid; place-items:center; overflow:hidden; }
.card-category { position:absolute; top:22px; left:24px; font-size:8px; letter-spacing:.16em; color:#a0ad97; z-index:2; }
.card-index { position:absolute; top:22px; right:24px; color:#a0ad97; font-size:8px; letter-spacing:.1em; }
.card-art-tech { background:#1a211b; }
.tech-grid { position:absolute; inset:0; background-image:linear-gradient(#c3dd9710 1px,transparent 1px),linear-gradient(90deg,#c3dd9710 1px,transparent 1px); background-size:27px 27px; mask-image:radial-gradient(ellipse at 50% 60%,black,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 60%,black,transparent 75%); }
.tech-stack { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-38deg); transform-style:preserve-3d; width:106px; height:106px; transition:transform .8s; }
.tech-layer { position:absolute; inset:0; border:1px solid #cceaa25c; border-radius:13px; background:linear-gradient(145deg,#c0dca426,#36442c0a); box-shadow:10px 14px 24px #0002,inset 1px 1px 0 #e1fbc326; }
.tech-layer:nth-child(1) { transform:translate(-28px,28px); opacity:.4; }
.tech-layer:nth-child(2) { transform:translate(-14px,14px); opacity:.7; }
.tech-layer:nth-child(3) { background:linear-gradient(145deg,#9aaf7a88,#2c3a25); }
.tech-layer:nth-child(3)::after { content:"+"; display:grid; place-items:center; width:100%; height:100%; color:#e0f7bb; font:300 40px monospace; }
.explore-card:hover .tech-stack { transform:translate(-50%,-56%) rotateX(55deg) rotateZ(-29deg); }
.card-art-design { background:#20201f; }
.card-art-design .card-category,.card-art-design .card-index { color:#b4b2a6; }
.design-disc { width:116px; height:116px; position:absolute; top:69px; left:calc(50% - 74px); border-radius:50%; background:conic-gradient(from 35deg,#d8dacd,#92968a 15%,#e6e8d8 31%,#575d50 52%,#e6e8dc 72%,#a0a78d 82%,#d8dacd); box-shadow:inset -10px -4px 19px #10150955,10px 12px 30px #0003; transition:transform .8s; }
.design-disc::after { content:""; position:absolute; inset:18px; border:1px solid #f3f8dc45; border-radius:50%; box-shadow:inset 0 0 14px #292d1e77; }
.design-glass { position:absolute; width:85px; height:111px; top:93px; left:calc(50% - 2px); border:1px solid #d5e0ba5c; border-radius:9px; background:linear-gradient(130deg,#bacc9833,#76895511); backdrop-filter:blur(8px); transform:rotate(15deg); box-shadow:6px 10px 25px #0002; transition:transform .8s; }
.explore-card:hover .design-disc { transform:rotate(35deg); }
.explore-card:hover .design-glass { transform:translate(5px,-5px) rotate(22deg); }
.card-art-life { background:#252923; }
.life-sun { position:absolute; width:90px; height:90px; border-radius:50%; background:linear-gradient(160deg,#d2e7aa,#94aa72); top:63px; left:calc(50% - 45px); box-shadow:0 0 38px #c1d79910; transition:transform .8s; }
.life-hill { position:absolute; width:130%; height:180px; border:1px solid #b9c7992b; border-radius:50%; background:linear-gradient(180deg,#3e4a31,#252e22); left:-35%; bottom:-114px; transform:rotate(-14deg); }
.life-hill.second { left:20%; bottom:-112px; background:linear-gradient(180deg,#526241,#283123); transform:rotate(15deg); }
.life-line { position:absolute; height:1px; width:100%; top:142px; background:#d3e6b42e; }
.explore-card:hover .life-sun { transform:translateY(-8px); }
.card-copy { padding:25px 24px 26px; }
.card-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-title { font-size:18px; font-weight:500; margin:0; letter-spacing:-.02em; }
.card-arrow { display:grid; place-items:center; border:1px solid var(--line); width:29px; height:29px; border-radius:50%; transition:background .25s,color .25s; }
.card-arrow svg { width:12px; height:12px; }
.explore-card:hover .card-arrow { background:var(--accent); color:var(--accent-ink); }
.card-desc { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
.about { border-top:1px solid var(--line); padding:88px 0 94px; display:grid; grid-template-columns:.78fr 1.5fr; gap:80px; }
.about-left .section-kicker { margin-top:10px; }
.about-symbol { color:var(--accent); margin-top:37px; width:64px; height:64px; }
[data-theme="light"] .about-symbol { color:#6f874b; }
.about h2 { font-size:clamp(27px,3.2vw,42px); font-weight:400; line-height:1.65; }
.about h2 .about-subtitle { color:var(--muted); }
.about-body { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:27px; }
.about-body p { font-size:12px; line-height:2.1; color:var(--muted); max-width:350px; margin:0; }
.about-signature { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:38px; letter-spacing:-2px; transform:rotate(-8deg); margin:0 14px 7px 0; }
.closing { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); padding:44px 42px; display:flex; justify-content:space-between; align-items:center; gap:32px; background:var(--surface); }
.closing .eyebrow { color:var(--muted); font-size:9px; margin:0 0 13px; }
.closing h2 { font-size:25px; font-weight:400; }
.closing a { display:inline-flex; align-items:center; gap:15px; white-space:nowrap; font-size:12px; padding:13px 0; border-bottom:1px solid var(--muted); }
.closing a:hover { color:var(--accent); border-color:var(--accent); }
[data-theme="light"] .closing a:hover { color:#4a682d; border-color:#4a682d; }
.site-footer { display:flex; align-items:center; justify-content:space-between; padding:33px 0 30px; gap:25px; }
.footer-left { display:flex; align-items:center; gap:17px; }
.footer-logo { font-weight:600; letter-spacing:-1px; font-size:16px; }
.copyright,.footer-note { color:var(--muted); font-size:9px; letter-spacing:.03em; }
.footer-note { display:flex; gap:8px; align-items:center; }
.footer-note .status-dot { width:4px; height:4px; }
.reveal { opacity:1; transform:none; }
.js-motion .reveal:not(.visible) { opacity:0; transform:translateY(22px); }
.js-motion .reveal { transition:opacity .7s ease,transform .7s ease; }
dialog { width:min(600px,calc(100% - 36px)); max-height:calc(100dvh - 64px); background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:22px; padding:42px; box-shadow:0 30px 100px #0008; }
dialog::backdrop { background:#050705b8; backdrop-filter:blur(9px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.dialog-top .eyebrow { color:var(--muted); font-size:9px; }
dialog h2 { font-size:29px; margin-bottom:14px; }
.dialog-lead { color:var(--muted); font-size:13px; line-height:1.9; margin:0 0 26px; }
.dialog-items { display:grid; gap:22px; border-top:1px solid var(--line); padding-top:26px; }
.dialog-item { display:grid; grid-template-columns:25px 1fr; gap:15px; }
.dialog-number { color:var(--muted); font:11px Consolas,monospace; padding-top:4px; }
.dialog-item h3 { font-size:14px; margin:0 0 8px; font-weight:500; }
.dialog-item p { font-size:12px; line-height:1.9; margin:0; color:var(--muted); }
.dialog-bottom { font-size:9px; letter-spacing:.11em; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; margin:28px 0 0; }
@media(min-width:1500px) { .hero { min-height:745px; }.hero-art { height:660px; } }
@media(max-width:1150px) { .container { width:calc(100% - 72px); }.hero { min-height:625px; }.hero-art { height:540px; margin-right:-14px; } h1 { font-size:clamp(48px,6.4vw,74px); }.art-label-left { left:6px; top:266px; }.art-label-top { right:12px; }.hero-description { max-width:300px; }.card-art { height:205px; }.card-copy { padding:22px 20px; }.card-title { font-size:16px; }.about { gap:50px; } }
@media(max-width:850px) { .container { width:calc(100% - 48px); }.site-header { height:82px; }.header-note { display:none; }.desktop-nav { gap:27px; }.hero { min-height:572px; grid-template-columns:1.05fr 1fr; }.hero-copy { padding-top:42px; } h1 { font-size:clamp(43px,6.4vw,56px); }.hero-kicker { font-size:8px; gap:9px; margin-bottom:25px; }.hero-description { font-size:12px; max-width:255px; margin-top:24px; }.hero-art { height:470px; margin-left:-14px; margin-right:-8px; }.hero-actions { gap:20px; }.primary-link { padding:14px 17px; gap:16px; font-size:12px; }.text-link { font-size:11px; gap:6px; }.art-label { font-size:7px; }.art-label-left { display:none; }.art-label-top { top:56px; right:3px; }.art-label-bottom { bottom:64px; right:6px; }.cross-one { top:100px; left:20px; }.orbit { inset:50px -10px; width:calc(100% + 20px); height:calc(100% - 100px); }.hero-footnote { font-size:7px; }.section-description { font-size:11px; } .explore { padding-top:54px; padding-bottom:65px; }.card-grid { gap:12px; grid-template-columns:1fr 1fr 1fr; }.card-art { height:190px; }.card-copy { padding:18px 15px 22px; }.card-title { font-size:14px; }.card-desc { font-size:10px; }.card-arrow { width:24px; height:24px; }.card-category { left:16px; font-size:7px; }.card-index { right:16px; font-size:7px; }.design-disc { transform:scale(.9); top:52px; }.design-glass { top:78px; transform:scale(.9) rotate(15deg); }.life-sun { top:52px; }.about { padding:64px 0; grid-template-columns:.7fr 1.5fr; gap:32px; }.about h2 { font-size:28px; }.about-body { gap:20px; }.about-signature { font-size:30px; }.closing { padding:35px 30px; }.closing h2 { font-size:22px; } }
@media(max-width:620px) { html { scroll-padding-top:24px; }.container { width:calc(100% - 40px); }.site-header { height:76px; }.logo { font-size:24px; }.logo-mark { width:23px; height:23px; }.desktop-nav { display:none; }.header-actions { gap:10px; }.menu-toggle { display:grid; }.mobile-nav { display:flex; position:absolute; top:68px; right:20px; left:20px; background:var(--surface); border:1px solid var(--line); border-radius:13px; flex-direction:column; padding:10px; box-shadow:0 16px 40px #0004; }.mobile-nav[hidden] { display:none; }.mobile-nav a { padding:15px; font-size:14px; border-radius:6px; }.mobile-nav a:hover { background:var(--surface-2); }.hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; }.hero-copy { padding:53px 0 0; }.hero-kicker { font-size:9px; margin-bottom:26px; } h1 { font-size:clamp(44px,10.7vw,66px); letter-spacing:-.06em; } h1 .second-line { margin-top:6px; }.hero-description { font-size:12px; max-width:290px; margin:23px 0 24px; line-height:1.95; }.hero-actions { gap:25px; }.primary-link { padding:15px 20px; gap:27px; }.text-link { font-size:12px; }.hero-art { width:min(100%,440px); height:370px; margin:-12px auto 0; }.art-label-top { top:58px; right:5px; }.art-label-bottom { bottom:58px; right:12px; }.art-label { font-size:7px; }.art-caption { font-size:8px; bottom:24px; }.orbit { inset:23px 0 32px; width:100%; height:calc(100% - 55px); }.art-grid { inset:30px 0; }.art-halo { inset:40px 0; }.cross-one { top:85px; left:23px; }.cross-two { bottom:83px; right:38px; }.hero-footnote { position:relative; bottom:auto; padding:0 0 24px; font-size:7px; }.section-divider { padding:20px 0; }.divider-left { font-size:8px; gap:8px; }.divider-right { font-size:9px; gap:8px; }.explore { padding-top:42px; padding-bottom:54px; }.section-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:25px; }.section-kicker { font-size:9px; margin-bottom:14px; } h2 { font-size:29px; }.section-description { font-size:11px; }.card-grid { grid-template-columns:1fr; gap:18px; }.card-art { height:223px; }.card-copy { padding:23px 23px 24px; }.card-title { font-size:19px; }.card-desc { font-size:12px; }.card-arrow { width:30px; height:30px; }.card-category { font-size:9px; left:24px; }.card-index { font-size:9px; right:24px; }.design-disc { top:65px; transform:scale(1); }.design-glass { top:92px; transform:rotate(15deg); }.life-sun { top:61px; }.about { grid-template-columns:1fr; padding:45px 0 52px; gap:18px; }.about-left { display:flex; align-items:center; justify-content:space-between; }.about-left .section-kicker { margin:0; }.about-symbol { width:31px; height:31px; margin:0; }.about h2 { font-size:27px; }.about-body { margin-top:22px; align-items:center; }.about-body p { font-size:12px; max-width:260px; }.about-signature { font-size:30px; margin-right:6px; }.closing { flex-direction:column; align-items:flex-start; padding:29px 25px; gap:18px; border-radius:16px; }.closing h2 { font-size:23px; }.closing a { font-size:11px; padding-bottom:8px; }.site-footer { padding:27px 0; align-items:flex-start; }.footer-left { gap:9px; }.copyright { font-size:8px; }.footer-note { font-size:8px; max-width:95px; line-height:1.7; text-align:right; }.footer-note .status-dot { display:none; } dialog { padding:27px 24px; max-height:calc(100dvh - 32px); }.dialog-top { margin-bottom:24px; } dialog h2 { font-size:26px; } }
@media(max-width:360px) { .container { width:calc(100% - 32px); } h1 { font-size:42px; }.hero-description { font-size:11px; }.hero-art { height:335px; }.about h2 { font-size:24px; }.about-body p { font-size:11px; }.hero-footnote { font-size:6px; gap:7px; }.hero-footnote span+span::before { margin-right:7px; }.divider-right { font-size:8px; }.footer-note { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }.js-motion .reveal:not(.visible) { opacity:1; transform:none; } }

/* Bilingual typography. */
.logo,.header-actions,.icon-button,.card-arrow { flex-shrink:0; }
.logo { letter-spacing:-1.2px; }
.header-actions { gap:15px; }
.hero-copy,.card-copy,.about > div { min-width:0; }
.hero-description > span { letter-spacing:inherit; }
html[lang="en"] h1 { font-size:clamp(44px,5.5vw,78px); line-height:1.17; letter-spacing:-.06em; }
html[lang="en"] .hero-description { letter-spacing:0; max-width:370px; }
html[lang="en"] .hero-actions { gap:24px; }
html[lang="en"] .primary-link { gap:23px; }
html[lang="en"] .card-title { font-size:18px; line-height:1.4; }
html[lang="en"] .card-desc { min-height:2em; }
html[lang="en"] .about h2 { font-size:clamp(29px,3.1vw,42px); line-height:1.5; }
html[lang="en"] .about-body p { max-width:380px; }
.about-signature { flex-shrink:0; }
html[lang="zh-CN"] .hero-kicker { letter-spacing:.13em; }
@media(max-width:1150px) {
  .header-note { display:none; }
  html[lang="en"] h1 { font-size:clamp(43px,5.6vw,65px); }
  html[lang="en"] .card-title { font-size:16px; }
  html[lang="en"] .hero-description { max-width:310px; }
}
@media(max-width:850px) {
  .header-inner { gap:18px; }
  .desktop-nav { gap:22px; }
  html[lang="en"] h1 { font-size:clamp(39px,5.5vw,48px); }
  html[lang="en"] .hero-actions { gap:14px; }
  html[lang="en"] .primary-link { padding:14px 15px; gap:12px; }
  html[lang="en"] .text-link { gap:4px; }
  html[lang="en"] .card-title { font-size:14px; }
  html[lang="en"] .about h2 { font-size:28px; }
  .about-body { align-items:flex-start; }
  .about-signature { font-size:29px; }
}
@media(max-width:620px) {
  .header-inner { gap:12px; }
  .logo { gap:7px; font-size:23px; }
  .logo-mark { width:21px; height:21px; }
  .header-actions { gap:7px; }
  .header-actions .icon-button { width:34px; height:34px; }
  html[lang="en"] h1 { font-size:clamp(41px,10.4vw,62px); }
  html[lang="en"] .hero-actions { gap:19px; }
  html[lang="en"] .hero-description { max-width:325px; }
  html[lang="en"] .primary-link { padding:15px 18px; gap:18px; }
  html[lang="en"] .text-link { font-size:11px; }
  html[lang="en"] .card-title { font-size:19px; }
  html[lang="en"] .about h2 { font-size:27px; }
  .about-body { flex-wrap:wrap; gap:18px; }
  .about-signature { margin-left:auto; }
  .footer-left { flex-wrap:wrap; max-width:72%; }
  .site-footer { gap:15px; }
}
@media(max-width:360px) {
  .header-inner { gap:8px; }
  .logo { gap:6px; font-size:21px; }
  .logo-mark { width:19px; height:19px; }
  .header-actions { gap:5px; }
  .header-actions .icon-button { width:32px; height:32px; }
  html[lang="en"] .hero-actions { gap:12px; }
  html[lang="en"] .primary-link { gap:12px; padding:14px 15px; font-size:11px; }
  html[lang="en"] .text-link { font-size:10px; }
  html[lang="en"] .divider-left { font-size:7px; letter-spacing:.06em; }
  html[lang="en"] .divider-right { font-size:7px; gap:5px; }
  .footer-left { max-width:100%; }
}

/* Refined header: centered navigation and one compact preference capsule. */
.header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:30px; }
.header-inner > .logo { justify-self:start; }
.header-actions { justify-self:end; gap:22px; }
.preference-control { display:flex; align-items:center; gap:7px; padding:4px; height:42px; border:1px solid var(--line); border-radius:999px; background:rgba(240,246,233,.025); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.language-switch { position:relative; display:flex; gap:2px; isolation:isolate; }
.language-switch::before { content:""; position:absolute; inset:0 auto 0 0; width:32px; border-radius:999px; background:rgba(213,247,149,.11); box-shadow:inset 0 0 0 1px rgba(213,247,149,.035); transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s; z-index:-1; }
html[lang="en"] .language-switch::before { transform:translateX(34px); }
.language-option,.theme-control { -webkit-appearance:none; appearance:none; font-family:inherit; margin:0; min-width:0; min-height:0; line-height:1; text-align:center; display:grid; place-items:center; border:0; border-radius:999px; background:transparent; color:var(--muted); width:32px; height:32px; padding:0; transition:color .2s,background .2s; }
.language-option { font-size:10px; font-weight:500; line-height:1; letter-spacing:.025em; }
.language-option[lang="zh-CN"] { font-size:12px; }
.language-option.is-active { color:var(--accent); }
.language-option:hover,.theme-control:hover { color:var(--text); }
.theme-control:hover { background:rgba(235,241,229,.06); }
.theme-control svg { width:15px; height:15px; }
.preference-divider { height:14px; width:1px; background:var(--line); }
.language-option:focus-visible,.theme-control:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
[data-theme="light"] .preference-control { background:rgba(22,40,14,.025); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
[data-theme="light"] .language-switch::before { background:rgba(103,131,67,.13); box-shadow:none; }
[data-theme="light"] .language-option.is-active { color:#3b5726; }
[data-theme="light"] .theme-control:hover { background:rgba(22,40,14,.055); }
[data-theme="light"] .language-option:focus-visible,[data-theme="light"] .theme-control:focus-visible { outline-color:#477324; }
@media(max-width:850px) {
  .header-inner { column-gap:20px; }
  .header-actions { gap:12px; }
}
@media(max-width:620px) {
  .header-inner { grid-template-columns:minmax(0,1fr) auto; column-gap:16px; }
  .header-actions { gap:10px; }
  .preference-control { height:40px; padding:3px; gap:6px; }
  .header-actions .menu-toggle { width:36px; height:36px; }
}
@media(max-width:360px) {
  .header-inner { column-gap:10px; }
  .header-actions { gap:7px; }
  .preference-control { gap:5px; }
  .header-actions .menu-toggle { width:32px; height:32px; }
}