/* Brand alignment: same forest, jade, cotton and typography as the main site. */
:root{--ink:#101713;--green:#1b4332;--muted:#6c7e6b;--line:#d2d9ca;--white:#fbfaf4}body{background:#f2efe6;font-family:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 标题基准：与官网一致。官网不给 h1-h3 设全局字重，靠各组件显式声明；
   活动页混有旧主题样式，这里补一条 400 基准，避免漏声明的标题落回浏览器默认 700。 */
h1,h2,h3{font-weight:400}.demo-bar{background:#10291a;color:#a9c6b0;border-bottom:1px solid #234632}.demo-bar button{color:#b7e4c7}.site-header{max-width:none;width:100%;padding-inline:4.5%;height:88px;background:#07150d;color:#f2efe6;gap:24px;position:relative;z-index:15}.brand{font-family:inherit;font-style:normal;font-weight:600}.brand img{display:block;width:169px;height:auto}.site-header nav{margin-left:auto;font-size:12px;gap:25px}.site-header nav a{color:#b2c1b2}.site-header nav a.active{color:#b7e4c7}.site-header nav a.active:after{background:#52b788}.contact-link{font-size:12px;color:#b2c1b2;white-space:nowrap;text-decoration:none}.site-header .login-button{color:#b7e4c7;border-color:#63836b}.site-header [hidden]{display:none!important}.wrap{max-width:1400px;width:91%}.hero{background:#0d2818;border-radius:10px;margin-top:30px;border:1px solid #274a33}.hero-copy{color:#f2efe6;background:linear-gradient(140deg,#0d2818,#133a24)}.hero h1{color:#f2efe6;font-weight:300;letter-spacing:-.06em}.hero h1 em{color:#b7e4c7;font-family:inherit;font-style:normal;font-weight:300}.hero .eyebrow{color:#73b58a;font-size:10px;letter-spacing:.16em}.hero .pill{border-color:#3a5c41;color:#bbd2b9;background:#193d28}.hero-copy>p{color:#aec3af;line-height:2}.hero .button{background:#b7e4c7;color:#14351f;border-radius:999px}.hero .text-link{color:#b7e4c7}.hero-bottom{color:#9bb69b;border-color:#39563d}.hero-art{border-radius:0}.hero-art .reward-sticker{border-radius:4px;background:#f2efe6}.hero-art .art-label{color:#cfdfca}.button{border-radius:999px;background:#1b4332}.panel,.board-preview,.step,.prize{border-radius:10px}.step{background:#fbfaf4}.benefits{border-color:#cbd5c2}.icon-bubble{background:#e2e9dc;color:#316444}.section-head h2,.page-head h1{font-weight:400;letter-spacing:-.04em}.sub-eyebrow{color:#408361}.prize:first-child{background:#173c27}.prize:first-child h3{color:#f2efe6}.page-head{padding-top:50px}footer{width:91%;max-width:1400px}footer .brand{font-style:italic;color:#1b4332}.hero .mini-avatars b{background:#2b5738;color:#d2e7ce;border-color:#153723}.cs-account-center h1{overflow-wrap:anywhere}
@media(max-width:1100px){.site-header{gap:18px}.site-header nav{gap:17px}.brand img{width:139px}.contact-link{font-size:11px}}
@media(max-width:720px){.site-header{height:auto;min-height:116px;padding:14px 5% 0;gap:10px;flex-wrap:wrap}.brand img{width:139px}.site-header [data-cs-account]{margin-left:auto}.contact-link{display:none}.site-header nav{margin:0;width:100%;order:3;justify-content:space-between;height:43px;font-size:12px}.hero{margin-top:18px}.hero h1{font-size:46px}.hero-copy{padding:32px 24px}.hero-art{min-height:320px}.wrap{width:90%}.page-head{padding-top:30px}}
/* Brand footer for the account and experience area. */
body{min-height:100dvh;display:flex;flex-direction:column}.site-header{flex-shrink:0}body>main{flex:1;width:100%}
footer.cs-site-footer{position:relative;display:block;flex-shrink:0;width:100%;max-width:none;padding:0;margin:28px 0 0;border:0;background:#092015;color:#c0d4c4;overflow:hidden}
.cs-site-footer:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#092015 25%,#092015b8 75%,#092015bb),url('assets/account-forest.webp') right 44%/cover;opacity:.75;pointer-events:none}
.cs-footer-inner{position:relative;max-width:1400px;width:91%;margin:auto;padding:48px 0 0}.cs-footer-main{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;padding-bottom:38px}.cs-footer-logo{display:inline-block;margin-bottom:20px}.cs-footer-logo img{width:210px;height:auto;object-fit:contain;object-position:left}
.cs-footer-story h2{color:#d3e9d8;font-size:32px;font-weight:300;letter-spacing:-.03em;line-height:1.5;margin:0 0 12px}.cs-footer-story p{color:#88aa94;font-size:12px;line-height:1.95;margin:0}.cs-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:22px}.cs-footer-links h3{font-size:11px;letter-spacing:.06em;font-weight:400;color:#81a38c;margin:0 0 23px}.cs-footer-links a{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;max-width:185px;font-size:13px;color:#d0e1d3;padding:11px 0;border-bottom:1px solid #44654e4d;text-decoration:none;transition:color .2s,border-color .2s}.cs-footer-links a span{color:#739780;transition:transform .2s}.cs-footer-links a:hover{color:#fff;border-color:#9dc9ac}.cs-footer-links a:hover span{transform:translate(2px,-2px);color:#b7e4c7}.cs-site-footer [hidden]{display:none!important}
.cs-footer-bottom{display:flex;align-items:center;gap:28px;justify-content:space-between;padding:20px 0 23px;border-top:1px solid #597a614d;color:#8ea996;font-size:10px}.cs-footer-bottom>span{letter-spacing:.22em;font-size:9px}.cs-footer-bottom small{font-size:10px;margin-left:auto}.cs-footer-bottom a{color:#bdd6c5;font-size:11px;display:flex;gap:18px}.cs-profile-avatar{flex-shrink:0}.cs-profile-hero>div{min-width:0}
@media(max-width:720px){.cs-footer-inner{width:90%;padding-top:34px}.cs-footer-main{grid-template-columns:1fr;gap:26px;padding-bottom:30px}.cs-footer-story h2{font-size:29px}.cs-footer-story h2 br{display:none}.cs-footer-story p br{display:none}.cs-footer-links{padding-top:0;gap:28px}.cs-footer-links h3{margin-bottom:10px}.cs-footer-links a{font-size:12px;max-width:none}.cs-footer-bottom{gap:14px;flex-wrap:wrap}.cs-footer-bottom>span{width:100%;font-size:8px}.cs-footer-bottom small{margin-left:0}.cs-footer-bottom a{margin-left:auto}footer.cs-site-footer{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.cs-footer-links a,.cs-footer-links a span{transition:none}}
.cs-footer-links a span,.cs-footer-bottom a span{flex:none}
/* Experience pages share Contact's full-bleed forest hero and editorial spacing.
   The scope keeps account dialogs and the standalone admin tools independent. */
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.experience-site{--ex-gutter:clamp(1rem,4vw,4.5rem);--ex-page:min(calc(100% - var(--ex-gutter)*2),1540px);--ex-cotton:#f2efe6;--ex-mint:#b7e4c7;--ex-muted:rgba(242,239,230,.65);--ex-line:rgba(242,239,230,.14);--ex-nav:78px;background:#07150d;color:var(--ex-cotton)}
.experience-site .site-header{position:fixed;inset:0 0 auto;height:var(--ex-nav);min-height:0;padding:0 var(--ex-gutter);background:linear-gradient(#050e09e8,#050e0980,transparent);box-shadow:0 1px 0 transparent;transition:background .3s,box-shadow .3s;z-index:100}
.experience-site .site-header.is-scrolled{background:#07150df5;box-shadow:0 1px 0 var(--ex-line);backdrop-filter:blur(14px)}
.experience-site .site-header .brand img{width:169px;height:auto}.experience-site .site-header nav a{position:relative;transition:color .25s}.experience-site .site-header nav a:hover,.experience-site .contact-link:hover{color:#f2efe6}.experience-site .site-header nav a:after{transition:transform .3s}.experience-site .site-header nav a.active:after{height:1px}
.ex-container{width:var(--ex-page);margin-inline:auto}.ex-eyebrow,.experience-site .cs-account-center .cs-kicker{font:500 .62rem/1.25 'JetBrains Mono',monospace;letter-spacing:.24em;color:#a2d2b4;text-transform:uppercase}
.ex-hero,.experience-site .cs-profile-hero,.experience-site .cs-account-empty{position:relative;isolation:isolate;margin:0;padding:calc(var(--ex-nav) + 3.5rem) 0 3rem;background:linear-gradient(90deg,#050e09ef,#050e09be 48%,#050e0980),url('/images/editorial/v5/forest-to-fiber.webp') center/cover;color:var(--ex-cotton);border:0;border-radius:0}
.ex-hero:before,.experience-site .cs-profile-hero:before,.experience-site .cs-account-empty:before{content:'';position:absolute;z-index:-1;top:var(--ex-nav);bottom:0;left:var(--ex-gutter);width:1px;background:linear-gradient(transparent,#b7e4c733,transparent);pointer-events:none}
.ex-hero-inner{position:relative;padding-right:140px}.ex-hero h1,.experience-site .cs-profile-hero h1,.experience-site .cs-account-empty h1{font-size:clamp(2.6rem,4.5vw,4.5rem);font-weight:300;line-height:1.22;letter-spacing:-.055em;margin:22px 0 18px;color:#f2efe6}.ex-hero h1 em,.ex-editorial h2 em,.ex-invitation h2 em{font-style:normal;color:var(--ex-mint);font-weight:300}.ex-hero p,.experience-site .cs-profile-hero p,.experience-site .cs-account-empty p{color:var(--ex-muted);font-size:15px;line-height:1.95;margin:0;max-width:620px}.ex-page-index{position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 clamp(3.5rem,8vw,7.5rem)/1 'JetBrains Mono',monospace;color:#f2efe630}
.ex-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}.ex-button{display:inline-flex;align-items:center;justify-content:center;gap:34px;min-height:46px;padding:12px 24px;border:1px solid #b7e4c7;border-radius:999px;background:#b7e4c7;color:#07150d;text-decoration:none;font-size:13px;transition:background .25s,transform .25s}.ex-button:hover{background:#d2efdc;transform:translateY(-2px)}.ex-button span,.ex-link span{transition:transform .25s}.ex-button:hover span,.ex-link:hover span{transform:translate(2px,-2px)}.ex-outline{background:transparent;color:#d3e9db;border-color:#b7e4c760}.ex-outline:hover{background:#b7e4c712}.ex-link{display:inline-flex;gap:24px;align-items:center;justify-content:space-between;color:#b7e4c7;text-decoration:none;font-size:13px;padding:12px 0;border-bottom:1px solid #b7e4c740}.ex-status{display:inline-flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.05em;color:#b4c3b8}.ex-status i{width:5px;height:5px;border-radius:50%;background:#b7e4c7}
.ex-editorial{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(3rem,8vw,8rem);align-items:center;padding-block:80px}.ex-editorial-image{position:relative;min-width:0;overflow:hidden}.ex-editorial-image img{display:block;aspect-ratio:1.15;width:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}.ex-editorial-image:hover img{transform:scale(1.025)}.ex-editorial-image>span{position:absolute;bottom:22px;left:24px;letter-spacing:.13em;font:9px 'JetBrains Mono',monospace;color:#e9e9e0}.ex-editorial h2{font-size:clamp(2.5rem,4vw,3.8rem);font-weight:300;line-height:1.3;letter-spacing:-.05em;margin:22px 0}.ex-editorial p{font-size:14px;line-height:2;color:var(--ex-muted);margin:0 0 24px}
.ex-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}.ex-section-head h2{font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;margin:12px 0 0}.ex-process{background:#f2efe6;color:#15251b;padding:66px 0}.ex-process .ex-eyebrow{color:#377652}.ex-process .ex-link{color:#285c40;border-color:#1b43323d}.ex-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}.ex-steps article{border-top:1px solid #1b433240;padding-top:25px}.ex-steps article>span{font:12px 'JetBrains Mono',monospace;color:#598569}.ex-steps h3{font-size:21px;font-weight:400;margin:28px 0 12px}.ex-steps p{font-size:13px;line-height:1.95;color:#5f7263;max-width:310px;margin:0}.ex-invitation{padding-block:76px;text-align:center}.ex-invitation h2{font-size:clamp(27px,3.3vw,42px);font-weight:300;line-height:1.5;letter-spacing:-.04em;margin:22px 0 28px}
.ex-board-content{padding-block:60px 70px}.ex-board-empty{border:1px solid var(--ex-line);background:linear-gradient(145deg,#153b2533,transparent);padding:44px 20px;text-align:center}.ex-orbit{display:grid;place-items:center;width:64px;height:64px;border:1px solid #b7e4c738;border-radius:50%;margin:0 auto 24px;color:#b7e4c7}.ex-orbit svg{width:25px;height:25px}.ex-board-empty h3{font-size:27px;font-weight:300;letter-spacing:-.03em;margin:15px 0}.ex-board-empty p,.ex-information p{font-size:13px;line-height:1.95;color:var(--ex-muted);margin-bottom:24px}.ex-footnote{font-size:11px;color:#94ac9a;margin:20px 0 0;line-height:1.8}.ex-rankings .rank-row{border-color:var(--ex-line);color:#f2efe6}.ex-rankings .identity p,.ex-rankings .metric{color:#a8b9ac}.ex-rankings .score{color:#b7e4c7}.ex-information{padding-block:65px 85px;max-width:900px}.ex-information h2{font-size:32px;font-weight:300;line-height:1.4;margin:22px 0}
.experience-site .ex-personal .cs-account-center{padding:0;margin:0}.experience-site .cs-profile-hero{display:flex;align-items:center;gap:40px;padding-inline:var(--ex-gutter);min-height:360px;margin-bottom:0}.experience-site .cs-profile-hero>div{flex:1;max-width:calc(100% - 150px)}.experience-site .cs-profile-hero h1{overflow-wrap:anywhere}.experience-site .cs-profile-avatar{width:96px;height:96px;border:1px solid #b7e4c760;background:#1d3b2a;color:#b7e4c7;font-size:34px;box-shadow:0 0 0 9px #b7e4c708;margin-left:auto}
.experience-site .cs-account-columns{width:var(--ex-page);margin:56px auto 0;display:grid;grid-template-columns:1.25fr 1fr;gap:30px}.experience-site .cs-account-card{background:#153b2526;color:#f2efe6;border:1px solid var(--ex-line);border-radius:0;padding:32px;min-width:0}.experience-site .cs-account-card h2{font-size:26px;font-weight:400;letter-spacing:-.035em;color:#f2efe6;margin:14px 0 22px}.experience-site .cs-card-head h2{margin:0}.experience-site .cs-card-head{margin-bottom:20px;gap:20px}.experience-site .cs-account-card .cs-data{border-color:var(--ex-line);padding:17px 0;gap:24px}.experience-site .cs-account-card .cs-data>span{color:#99b0a0;font-size:12px;flex-shrink:0}.experience-site .cs-account-card .cs-data>strong{color:#dde7df;font-weight:300;font-size:13px;overflow-wrap:anywhere;text-align:right;min-width:0}.experience-site .cs-account-card .cs-sub{color:#98ac9f;line-height:1.95}.experience-site .cs-account-card .cs-text{color:#b7e4c7;white-space:nowrap}.experience-site .cs-account-card .cs-secondary{border-color:#b7e4c75c;color:#cfe5d6;transition:background .25s}.experience-site .cs-account-card .cs-secondary:hover{background:#b7e4c715}.experience-site .cs-account-center>.cs-sub{width:var(--ex-page);margin:22px auto 66px;color:#8ba392;font-size:11px}.experience-site .cs-account-empty{padding-inline:var(--ex-gutter);padding-bottom:75px;min-height:600px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}.experience-site .cs-account-empty .cs-primary{background:#b7e4c7;color:#07150d;margin-top:28px}.experience-site footer.cs-site-footer{margin-top:0;border-top:1px solid var(--ex-line)}.experience-site .cs-footer-inner{width:var(--ex-page)}
.experience-site #users-workspace{padding-top:calc(var(--ex-nav) + 24px)}.experience-site #app>.loading,.experience-site #app>.empty{padding-top:calc(var(--ex-nav) + 80px);min-height:70vh}.experience-site :is(.ex-button,.ex-link,.site-header a):focus-visible{outline:2px solid #b7e4c7;outline-offset:5px}
@media(min-width:1700px){.experience-site .cs-profile-hero{padding-inline:max(var(--ex-gutter),calc((100% - 1540px)/2))}}
@media(max-width:820px){.ex-editorial{gap:30px;padding-block:48px}.ex-hero-inner{padding-right:70px}.ex-page-index{font-size:54px}.ex-steps{gap:24px}.experience-site .cs-account-columns{gap:20px;grid-template-columns:1fr}.experience-site .cs-account-card{padding:26px}.ex-invitation h2 em{display:block}}
@media(max-width:720px){body.experience-site{--ex-nav:112px}.experience-site .site-header{height:112px;padding:10px var(--ex-gutter) 0;gap:8px;flex-wrap:wrap;background:#07150df5}.experience-site .site-header .brand img{width:139px;height:auto}.experience-site .site-header nav{height:43px;width:100%;order:3;margin:0;justify-content:space-between}.ex-hero,.experience-site .cs-profile-hero{padding-top:calc(var(--ex-nav) + 2.25rem);padding-bottom:2.5rem}.ex-hero h1,.experience-site .cs-profile-hero h1,.experience-site .cs-account-empty h1{font-size:38px;margin-top:18px}.ex-hero p{font-size:13px}.ex-hero-inner{padding-right:0}.ex-page-index{right:0;top:2px;font-size:28px;transform:none}.ex-actions{gap:18px}.ex-status{font-size:10px}.ex-editorial{grid-template-columns:1fr;gap:32px}.ex-editorial-image img{aspect-ratio:1.35}.ex-editorial-copy h2 br{display:none}.ex-editorial h2{font-size:34px;margin:16px 0}.ex-editorial p{font-size:13px}.ex-process{padding-block:42px}.ex-section-head{align-items:start;gap:15px;flex-direction:column;margin-bottom:26px}.ex-section-head h2{font-size:30px}.ex-steps{grid-template-columns:1fr;gap:25px}.ex-steps article{position:relative;padding:24px 0 0 42px}.ex-steps article>span{position:absolute;left:0;top:29px}.ex-steps h3{margin:0 0 12px}.ex-steps p{max-width:none}.ex-invitation{padding-block:50px}.ex-board-content{padding-block:38px 48px}.ex-board-empty{padding:36px 18px}.ex-board-empty h3{font-size:24px}.ex-board-empty p br{display:none}.experience-site .cs-profile-hero{gap:20px;min-height:320px}.experience-site .cs-profile-hero>div{max-width:calc(100% - 88px)}.experience-site .cs-profile-hero h1{font-size:32px;line-height:1.35}.experience-site .cs-profile-hero p{font-size:12px}.experience-site .cs-profile-avatar{height:68px;width:68px;font-size:26px}.experience-site .cs-account-columns{margin-top:30px}.experience-site .cs-account-card{padding:22px}.experience-site .cs-account-card h2{font-size:24px}.experience-site .cs-account-center>.cs-sub{margin-bottom:40px}.experience-site .cs-account-empty{min-height:540px;padding-top:calc(var(--ex-nav) + 40px)}.ex-information{padding-block:40px 55px}.ex-information h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.experience-site *,.experience-site *:before,.experience-site *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.ex-editorial-image:hover img,.ex-button:hover{transform:none}}

/* === 官网统一导航（20260916-nav1）：布局、字体与交互对齐官网 Navbar === */
.experience-site .site-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;height:var(--ex-nav);min-height:0;padding:0 var(--ex-gutter);isolation:isolate}
.experience-site .site-header>*{position:relative;z-index:2}
.experience-site .site-header nav.site-nav-desktop{display:flex;align-items:center;justify-self:center;margin:0;height:auto;width:auto;order:0;gap:clamp(1rem,2.5vw,2.5rem)}
.experience-site .site-header nav.site-nav-desktop a{display:block;height:auto;color:rgba(242,239,230,.7);font-family:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',system-ui,sans-serif;font-size:.76rem;letter-spacing:.025em;padding:.6rem 0;position:relative}
.experience-site .site-header nav.site-nav-desktop a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#52b788;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.experience-site .site-header nav.site-nav-desktop a:hover{color:#f2efe6}
.experience-site .site-header nav.site-nav-desktop a.active{color:#f2efe6}
.experience-site .site-header nav.site-nav-desktop a.active:after{transform:scaleX(1);height:1px;bottom:0}
.experience-site .site-nav-actions{display:flex;align-items:center;gap:14px;min-width:0}
.experience-site .contact-link{padding:.58rem .9rem;border:1px solid rgba(242,239,230,.2);border-radius:999px;backdrop-filter:blur(12px);font-size:.76rem;letter-spacing:.025em;color:rgba(242,239,230,.85);white-space:nowrap;text-decoration:none;transition:color .2s,border-color .2s}
.experience-site .contact-link:hover{color:#f2efe6;border-color:rgba(242,239,230,.45)}
.experience-site .login-button{padding:.58rem .9rem;border:1px solid rgba(242,239,230,.2);border-radius:999px;backdrop-filter:blur(12px);background:transparent;font-size:.76rem;letter-spacing:.025em;gap:10px;color:#b7e4c7;white-space:nowrap}
.experience-site .login-button:hover{border-color:rgba(183,228,199,.5)}
.experience-site .nav-toggle{display:none;position:relative;z-index:2;width:2.6rem;height:2.6rem;min-width:2.6rem;padding:0;place-content:center;gap:.35rem;border:1px solid rgba(242,239,230,.18);border-radius:50%;background:rgba(5,14,9,.32);cursor:pointer}
.experience-site .nav-toggle span{width:.95rem;height:1px;background:currentColor;display:block;transition:transform .25s ease}
.experience-site .nav-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
.experience-site .nav-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.experience-site .site-nav-panel{position:fixed;inset:0;z-index:1;width:100%;height:100dvh;min-height:100svh;padding:calc(var(--ex-nav) + 2.6rem) 1.2rem 2rem;display:flex;flex-direction:column;justify-content:space-between;background:#050e09;opacity:0;visibility:hidden;transform:translateY(-1rem);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:none;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}
.experience-site .site-nav-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.experience-site .site-nav-panel nav{border-top:1px solid rgba(242,239,230,.14);display:block;height:auto;width:auto;margin:0;order:0;gap:0}
.experience-site .site-nav-panel a{opacity:0;translate:0 14px;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1);display:grid;grid-template-columns:3rem 1fr;align-items:center;padding:1.15rem 0;border-bottom:1px solid rgba(242,239,230,.14);color:#f2efe6;text-decoration:none;font-size:clamp(1.5rem,7vw,2.2rem);font-weight:300;letter-spacing:-.04em}
.experience-site .site-nav-panel a span{color:#52b788;font:500 .55rem/1 'JetBrains Mono',monospace}
.experience-site .site-nav-panel a.active{color:#b7e4c7}
.experience-site .site-nav-panel.is-open a{opacity:1;translate:0 0;transition-delay:calc(var(--n,0) * 35ms + 70ms)}
.experience-site .site-nav-panel p{margin:0;color:rgba(242,239,230,.48);font-size:.82rem;line-height:1.8}
.experience-site .site-header.menu-open{background:#050e09;box-shadow:0 1px 0 rgba(242,239,230,.14)}
html.ex-menu-open{overflow:hidden}
@media(max-width:720px){
.experience-site .site-header{grid-template-columns:1fr auto;height:var(--ex-nav);padding:0 1rem;gap:10px;flex-wrap:nowrap;background:linear-gradient(#050e09e8,#050e0980,transparent)}
.experience-site .site-header.menu-open{background:#050e09}
.experience-site .site-header nav.site-nav-desktop,.experience-site .contact-link{display:none}
.experience-site .nav-toggle{display:grid}
.experience-site .site-header .brand img{width:139px;height:auto}
.experience-site .login-button{display:none}
}
@media(max-width:480px){
.experience-site .site-nav-panel{padding:calc(var(--ex-nav) + 1.6rem) 1rem max(1.25rem,env(safe-area-inset-bottom))}
.experience-site .site-nav-panel a{padding:.88rem 0;grid-template-columns:2.4rem 1fr;font-size:clamp(1.25rem,6.5vw,1.75rem)}
.experience-site .site-nav-panel p{margin:1.5rem 0 0;font-size:.72rem}
.experience-site .site-header .brand img{width:139px;height:auto}
}
/* ── 深色模式文档底色（画布）─────────────────────────────────
   style.css 的 :root{background:var(--paper)} 让 html 一直是浅米白 #f6f5ef，
   而 body 是深绿。body 只铺自身盒模型，所以整文档导航的过渡帧、
   以及 macOS 触控板弹性滚动越界处露出的都是画布底色 —— 表现为「闪一下浅色」。
   这里在深色模式下把画布也统一成深绿。 */
html:has(body.experience-site){background:#07150d}
/* ── 跨文档过渡：活动页 ↔ 官网首页 ────────────────────────────
   对端在官网 src/pages/index.astro。两页都声明 @view-transition 后，
   整页跳转不再是一帧硬切：同名元素保持位置，其余内容交叉淡入。
   两页 header 都是 position:fixed，必须单独命名，
   否则它会被算进整页快照、在过渡中看起来像跟着滚动。
   Firefox 稳定版暂不支持，会自动降级为普通跳转，无副作用。 */
@view-transition{navigation:auto}
.site-header{view-transition-name:cs-header}
.site-header .brand{view-transition-name:cs-logo}
/* 浏览器默认交叉淡入是 250ms + ease（时间过半时已走完 80%），对「换场景」偏快偏硬。
   ease-out 类曲线（含本站入场动画用的 .2,.8,.2,1）在时间过 10% 时就走了 40%，
   放进交叉淡入里等于把时长吃掉。交叉淡入本质是「溶解」，均匀才平缓，所以这里用 linear，
   时长 .4s：实测进度严格落在 25% → 0.25、50% → 0.50、75% → 0.75。
   ⚠️ old/new 必须保持同一组 duration + timing-function：两者是 plus-lighter 加色混合，
   只有缓动一致时「旧×(1-e) + 新×e」才恒等于 1，否则交叉过程中会变暗或过曝。 */
@media(prefers-reduced-motion:no-preference){
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root),
::view-transition-group(cs-header),::view-transition-old(cs-header),::view-transition-new(cs-header),
::view-transition-group(cs-logo),::view-transition-old(cs-logo),::view-transition-new(cs-logo){
animation-duration:.4s;animation-timing-function:linear}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* === header 内边距对齐官网（20260916-gutter1）===
   官网 .site-nav 的标尺是 clamp(1rem,3.8vw,4rem)，≥1800 转 5vw 并把导航/联系胶囊字号提到 .78rem，
   901–1250 收成 1.2rem 并整体转入紧凑模式。活动页原先 header 沿用 --ex-gutter(4vw)，
   上述三档全都没有 → 右上角「联系我们 + 账号胶囊」相对右边缘偏移：
   实测 1800 差 18px、1100 差 25px、1280 差 2px。
   这里只覆盖 header 的内边距，**不动 --ex-gutter** —— 页面容器 --ex-page 还在用它。
   min-width:721px 是为了不侵入 ≤720 的移动端 header（那段有自己的 padding）。 */
@media(min-width:721px){
.experience-site .site-header{padding:0 clamp(1rem,3.8vw,4rem)}
}
@media(min-width:1800px){
.experience-site .site-header{padding-inline:5vw}
.experience-site .site-header nav.site-nav-desktop a,
.experience-site .contact-link{font-size:.78rem}
}
@media(min-width:901px) and (max-width:1250px){
.experience-site .site-header{padding-inline:1.2rem;gap:1rem}
.experience-site .site-header nav.site-nav-desktop{gap:.7rem}
.experience-site .site-header nav.site-nav-desktop a{font-size:.68rem}
.experience-site .site-nav-actions{gap:8px}
.experience-site .contact-link{padding:.5rem .6rem;font-size:.68rem}
}
