:root{
  --bg:#f7f7f3;--surface:#fff;--surface-soft:#fafaf7;--surface-tint:#f1f4f1;--ink:#171c1d;--muted:#6e7876;
  --line:#e0e5e1;--line-strong:#c9d2ce;--brand:#28566a;--brand-dark:#1f4656;--brand-soft:#edf3f3;--danger:#a64b44;
  --header-h:74px;--ease:cubic-bezier(.22,1,.36,1);--shadow:0 16px 42px rgba(28,42,45,.07);--shadow-soft:0 10px 28px rgba(28,42,45,.045);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
img{max-width:100%}
.container{width:min(1740px,calc(100% - clamp(64px,9.2vw,176px)));margin-inline:auto}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-shell{min-height:100vh;position:relative;z-index:1;transition:opacity 700ms var(--ease)}
.page-kicker{display:block;color:#7e8986;font-size:12px;font-weight:650;letter-spacing:.18em;margin-bottom:14px}

/* Header / Footer */
.site-header{height:var(--header-h);position:sticky;top:0;z-index:90;background:rgba(247,247,243,.985);border-bottom:1px solid rgba(216,222,218,.92)}
.home-page .site-header{position:fixed;left:0;right:0;top:0}
.header-inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{display:inline-flex;align-items:center;gap:14px;width:max-content}
.brand-logo{width:46px;height:46px;border-radius:50%;object-fit:contain}
.brand-name{font-family:"Songti SC","STSong",SimSun,serif;font-size:24px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.nav{height:100%;display:flex;align-items:center;gap:52px}
.nav-link{height:100%;display:grid;place-items:center;position:relative;font-size:19px;color:#4f5858;padding:0 3px;transition:color 160ms ease}
.nav-link:hover,.nav-link.is-active{color:var(--ink)}
.nav-link::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--brand);transform:translateX(-50%);transition:width 220ms var(--ease)}
.nav-link.is-active::after{width:100%}
.header-actions{display:flex;justify-content:flex-end}
.icon-button{width:46px;height:46px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:#283031;transition:background 160ms ease,transform 100ms ease}
.icon-button:hover{background:#ecefeb}.icon-button:active{transform:scale(.97)}
.site-footer{border-top:1px solid var(--line);background:var(--bg);min-height:124px;position:relative;z-index:5}
.footer-inner{min-height:124px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.footer-brand .brand-logo{width:44px;height:44px}.footer-brand .brand-name{font-size:23px}
.footer-links{display:flex;gap:50px;font-size:19px;color:#535e5c}.footer-links a,.admin-link{transition:color 160ms ease}.footer-links a:hover,.admin-link:hover{color:var(--brand)}
.admin-link{justify-self:end;font-size:18px;color:#65706d}

/* Intro */
.intro{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;overflow:hidden}.intro[hidden]{display:none}
.intro-center{text-align:center;transform:translateY(-1.5vh)}
.intro-stage{width:650px;height:650px;position:relative;display:grid;place-items:center;margin:auto}
.intro-mark{position:relative;z-index:5;width:340px;height:340px;border-radius:50%;opacity:0;transform:scale(.78)}
.intro-arc{position:absolute;border-radius:50%;z-index:1;opacity:0}
.arc-a{inset:24px;border:1.5px solid transparent;border-top-color:#839eaa;border-right-color:#9bb1b9;transform:rotate(-58deg)}
.arc-b{inset:106px;border:1.3px solid transparent;border-left-color:#adc0c4;border-bottom-color:#b9c8c9;transform:rotate(21deg)}
.arc-c{inset:67px;border:1px dashed rgba(111,143,152,.45);border-right-color:transparent;border-bottom-color:transparent;transform:rotate(94deg)}
.intro-arc i,.intro-arc b{position:absolute;width:9px;height:9px;border-radius:50%;background:#718fa0}
.arc-a i{left:10%;top:18%}.arc-a b{right:3%;bottom:34%;width:6px;height:6px}.arc-b i{right:13%;top:7%;width:6px;height:6px}.arc-b b{left:5%;bottom:25%;width:5px;height:5px}.arc-c i{left:31%;bottom:1%;width:5px;height:5px}
.intro-dot{position:absolute;z-index:2;border-radius:50%;background:#9bb0ba;opacity:0}.dot-a{width:7px;height:7px;left:98px;top:205px}.dot-b{width:6px;height:6px;right:86px;bottom:216px}.dot-c{width:5px;height:5px;left:216px;bottom:89px}
.intro-name{font-family:"Songti SC","STSong",SimSun,serif;font-size:56px;font-weight:700;letter-spacing:.08em;opacity:0;transform:translateY(10px)}
.intro-sub{margin-top:16px;color:#7c8583;font-size:17px;letter-spacing:.2em;opacity:0;transform:translateY(7px)}
.intro.is-running .intro-mark{animation:introMark 2.55s var(--ease) .18s forwards}.intro.is-running .arc-a{animation:introOrbitA 2.25s var(--ease) .40s forwards}.intro.is-running .arc-b{animation:introOrbitB 2.20s var(--ease) .46s forwards}.intro.is-running .arc-c{animation:introOrbitC 2.10s var(--ease) .52s forwards}.intro.is-running .intro-dot{animation:introDot 1.85s ease .58s forwards}.intro.is-running .intro-name{animation:introText .52s var(--ease) 2.32s forwards}.intro.is-running .intro-sub{animation:introText .48s var(--ease) 2.48s forwards}
@keyframes introMark{0%{opacity:0;transform:scale(.78) rotate(0)}14%{opacity:1;transform:scale(1.015) rotate(10deg)}72%{opacity:1;transform:scale(1.035) rotate(322deg)}90%{opacity:1;transform:scale(1.02) rotate(354deg)}100%{opacity:1;transform:scale(1) rotate(360deg)}}
@keyframes introOrbitA{0%{opacity:0;transform:rotate(-58deg) scale(.93)}17%{opacity:.9}76%{opacity:.88;transform:rotate(365deg) scale(1.012)}100%{opacity:.38;transform:rotate(418deg) scale(.99)}}
@keyframes introOrbitB{0%{opacity:0;transform:rotate(21deg) scale(.91)}17%{opacity:.78}78%{opacity:.72;transform:rotate(-258deg) scale(1.02)}100%{opacity:.28;transform:rotate(-315deg) scale(1)}}
@keyframes introOrbitC{0%{opacity:0;transform:rotate(94deg) scale(.95)}22%{opacity:.55}82%{opacity:.5;transform:rotate(290deg) scale(1.02)}100%{opacity:.15;transform:rotate(325deg)}}
@keyframes introDot{0%{opacity:0;transform:scale(.35)}40%{opacity:.85;transform:scale(1)}100%{opacity:.2;transform:scale(.8)}}
@keyframes introText{to{opacity:1;transform:none}}
.intro-clone{position:fixed;z-index:10005;border-radius:50%;object-fit:contain;transform-origin:top left;pointer-events:none}
.page-shell.is-intro-hidden{opacity:0;visibility:hidden}.page-shell.is-revealing{visibility:visible;opacity:1}.page-shell.is-ready{opacity:1;visibility:visible}

/* Home / global ambient */
.home-page{overflow:hidden}.home-scroll{height:100svh;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none}.home-scroll::-webkit-scrollbar{display:none}
.home-screen{min-height:100svh;position:relative;padding-top:var(--header-h);display:flex;align-items:stretch;z-index:2}
.screen-inner{min-height:calc(100svh - var(--header-h));display:flex;align-items:center;position:relative;z-index:2;padding:64px 0}
.screen-stage{width:100%;opacity:var(--screen-opacity,1);transform:translateY(var(--screen-shift,0));will-change:opacity,transform}
.physics-ambient{position:fixed;z-index:0;left:0;right:0;top:var(--header-h);bottom:0;pointer-events:none;overflow:hidden;transform:translateY(calc(var(--ambient-scroll,0px) * -1));transition:opacity 500ms ease}
.ambient-item{position:absolute;opacity:.085;filter:saturate(.75);animation:ambientFloat 18s ease-in-out infinite alternate;will-change:transform}
.ambient-wave{width:250px;left:5%;top:15%;animation-duration:22s}.ambient-orbit{width:220px;right:7%;top:10%;animation-duration:27s;animation-name:ambientFloatB}.ambient-vector{width:230px;left:10%;bottom:10%;animation-duration:24s}.ambient-pendulum{width:150px;right:13%;bottom:9%;animation-duration:26s;animation-name:ambientFloatB}.ambient-lens{width:235px;right:30%;top:35%;opacity:.055;animation-duration:29s}.ambient-spring{width:230px;left:31%;top:8%;opacity:.06;animation-duration:25s}.ambient-axis{width:175px;left:48%;bottom:7%;opacity:.06;animation-duration:30s;animation-name:ambientFloatB}
@keyframes ambientFloat{to{transform:translate(18px,-16px) rotate(2deg)}}@keyframes ambientFloatB{to{transform:translate(-15px,20px) rotate(-2deg)}}
.hero-inner{justify-content:center;text-align:center}.hero-stage{max-width:1120px;margin:auto}.hero-eyebrow{font-size:13px;letter-spacing:.22em;color:#7f8a87;margin-bottom:26px}
.hero-screen h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(60px,4.6vw,88px);line-height:1.1;margin:0;font-weight:700;letter-spacing:.025em}
.hero-screen p{font-size:21px;line-height:1.85;color:var(--muted);margin:24px auto 36px;max-width:780px}
.hero-actions{display:flex;justify-content:center;gap:18px}.hero-action{height:58px;min-width:174px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-size:18px;font-weight:650;border:1px solid var(--line-strong);transition:transform 180ms var(--ease),background 180ms ease,border-color 180ms ease,color 180ms ease}
.hero-action.primary{background:var(--brand);border-color:var(--brand);color:#fff}.hero-action.secondary{background:rgba(255,255,255,.72);color:#263031}.hero-action:hover{transform:translateY(-2px)}.hero-action.primary:hover{background:var(--brand-dark)}.hero-action.secondary:hover{background:#fff;border-color:#aebbb7}.hero-action b{font-weight:400;transition:transform 180ms var(--ease)}.hero-action:hover b{transform:translateX(4px)}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:grid;justify-items:center;gap:7px;border:0;background:transparent;color:#818b88;font-size:12px;letter-spacing:.12em;cursor:pointer}.scroll-cue b{font-size:19px;font-weight:400;animation:cue 2.2s ease-in-out infinite}@keyframes cue{50%{transform:translateY(5px)}}
.section-layout{align-items:flex-start;justify-content:center;padding-top:clamp(92px,10vh,132px)}
.center-screen-heading{text-align:center;margin:0 auto 58px;max-width:820px}.center-screen-heading h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(44px,3.2vw,62px);margin:0 0 14px}.center-screen-heading p{margin:0;color:var(--muted);font-size:19px;line-height:1.7}
.function-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;width:100%}.function-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.72);overflow:hidden;transition:transform 200ms var(--ease),border-color 180ms ease,box-shadow 180ms ease,background 180ms ease}.function-card:hover{transform:translateY(-3px);border-color:#c3ceca;background:#fff;box-shadow:var(--shadow-soft)}
.function-visual{aspect-ratio:1.55;background:#f0f4f1;overflow:hidden;border-bottom:1px solid var(--line)}.function-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 360ms var(--ease)}.function-card:hover .function-visual img{transform:scale(1.018)}
.function-copy{min-height:150px;padding:24px 25px 23px;position:relative}.function-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;margin:0 0 11px}.function-copy p{font-size:16px;color:var(--muted);line-height:1.65;margin:0;padding-right:28px}.function-arrow{position:absolute;right:24px;bottom:22px;color:var(--brand);font-size:22px;transition:transform 180ms var(--ease)}.function-card:hover .function-arrow{transform:translateX(4px)}
.updates-heading{margin-bottom:54px}.updates-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1360px;margin:auto}.update-card{min-width:0}.update-thumb{aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;background:#eef2ef;overflow:hidden;transition:transform 190ms var(--ease),box-shadow 190ms ease,border-color 190ms ease}.update-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 320ms var(--ease)}.update-card:hover .update-thumb{transform:translateY(-2px);border-color:#c5cfcb;box-shadow:var(--shadow-soft)}.update-card:hover .update-thumb img{transform:scale(1.014)}
.update-copy{padding:19px 4px 0}.update-date{font:650 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--brand)}.update-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:24px;line-height:1.35;margin:10px 0 10px}.update-copy p{color:var(--muted);font-size:15px;margin:0 0 12px}.update-copy>div{display:flex;justify-content:space-between;color:#66716e;font-size:15px}.update-copy b{font-size:20px;color:var(--brand);font-weight:400;transition:transform 180ms var(--ease)}.update-card:hover .update-copy b{transform:translateX(4px)}
.closing-screen{flex-direction:column;justify-content:space-between}.closing-inner{min-height:calc(100svh - var(--header-h) - 124px);display:flex;align-items:center;position:relative;z-index:2}.closing-copy{max-width:1180px}.closing-copy p{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(38px,3.2vw,60px);line-height:1.55;margin:0 0 36px;letter-spacing:.02em}.closing-sign{display:block;color:var(--muted);font-size:19px}.closing-sign b{font-weight:550;color:var(--ink)}

/* Resource page */
.resource-main{padding:54px 0 88px}.resource-page-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:36px}.resource-page-head h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:54px;margin:0}.compact-resource-head .page-kicker{margin-bottom:8px}.resources-search{height:58px;width:min(650px,42vw);border:1px solid var(--line-strong);border-radius:11px;background:rgba(255,255,255,.82);display:flex;align-items:center;padding:0 18px;transition:border-color 160ms ease,box-shadow 160ms ease}.resources-search:focus-within{border-color:#91aab3;box-shadow:0 0 0 3px rgba(40,86,106,.07)}.search-icon{flex:0 0 auto;color:#677271}.search-input{width:100%;height:100%;border:0;outline:0;background:transparent;font-size:18px;padding:0 13px}.search-input::placeholder{color:#929997}
.resource-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:42px;align-items:start}.resource-sidebar{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100svh - var(--header-h) - 48px);overflow:auto;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:14px;scrollbar-width:thin}.resource-mode-tabs{height:64px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fbfbf8;z-index:3;border-radius:14px 14px 0 0}.resource-mode-tab{border:0;background:transparent;position:relative;cursor:pointer;font-size:17px;font-weight:650;color:#68726f}.resource-mode-tab::after{content:"";position:absolute;height:2px;width:0;left:50%;bottom:-1px;background:var(--brand);transform:translateX(-50%);transition:width 210ms var(--ease)}.resource-mode-tab.is-active{color:var(--ink)}.resource-mode-tab.is-active::after{width:54%}
.tree-book{border-bottom:1px solid var(--line)}.tree-book-row{display:grid;grid-template-columns:44px 1fr;min-height:64px;align-items:stretch}.tree-chevron,.tree-book-select,.tree-unit-chevron,.tree-unit,.tree-lesson,.category-item{border:0;background:transparent;cursor:pointer}.tree-chevron,.tree-unit-chevron{display:grid;place-items:center;color:#6f7d79}.tree-chevron span,.tree-unit-chevron span{font-size:24px;transition:transform 220ms var(--ease)}.tree-book.is-expanded>.tree-book-row .tree-chevron span,.tree-unit-group.is-expanded>.tree-unit-row .tree-unit-chevron span{transform:rotate(90deg)}
.tree-book-select{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:0 18px 0 4px;font-size:18px;color:#404a48}.tree-book-select strong,.tree-unit strong{font-weight:650}.tree-book-select em,.tree-unit em,.tree-lesson em,.category-item em{font-style:normal;font-size:13px;color:#87918e;background:#f1f3f0;border-radius:6px;padding:3px 7px}.tree-book-select:hover,.tree-book-select.is-selected{color:var(--brand)}
.tree-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease),opacity 220ms ease;opacity:.58}.tree-collapse>div{overflow:hidden}.tree-book.is-expanded>.tree-units,.tree-unit-group.is-expanded>.tree-lessons{grid-template-rows:1fr;opacity:1}
.tree-units{padding-left:42px}.tree-unit-group{border-top:1px solid rgba(225,229,225,.65)}.tree-unit-row{display:grid;grid-template-columns:34px 1fr;min-height:50px}.tree-unit-chevron span{font-size:19px}.tree-unit{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:0 17px 0 8px;border-left:2px solid transparent;color:#59635f;font-size:16px;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.tree-unit:hover{background:#f5f7f4;color:var(--ink)}.tree-unit.is-selected{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand)}
.tree-lessons>div{padding:4px 0 8px 33px}.tree-lesson{width:100%;min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:0 16px 0 14px;border-left:2px solid transparent;color:#707977;font-size:14.5px;line-height:1.45;transition:background 150ms ease,color 150ms ease,border-color 150ms ease}.tree-lesson span{min-width:0}.tree-lesson:hover{background:#f7f8f5;color:var(--ink)}.tree-lesson.is-selected{background:#eef3f2;border-left-color:var(--brand);color:var(--brand);font-weight:650}
.category-nav{padding:8px 0}.category-item{width:100%;min-height:54px;padding:0 18px 0 22px;display:flex;justify-content:space-between;align-items:center;text-align:left;border-left:2px solid transparent;font-size:16px;color:#596360}.category-item:hover{background:#f5f7f4}.category-item.is-selected{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand);font-weight:650}
.resource-content{min-width:0}.resource-context{min-height:76px;display:flex;justify-content:space-between;gap:24px;align-items:end;padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:28px}.resource-breadcrumb{font-size:14px;color:#7c8683;margin-bottom:8px}.resource-context h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:35px;margin:0}.resource-result-tools{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:15px}.clear-filter{border:0;background:transparent;color:var(--brand);cursor:pointer;padding:6px}
.resources-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 28px}.resource-card{min-width:0;display:block}.resource-thumb{aspect-ratio:16/10;background:#eef1ee;overflow:hidden;border:1px solid var(--line);border-radius:12px;transition:transform 190ms var(--ease),border-color 190ms ease,box-shadow 190ms ease}.resource-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 280ms var(--ease)}.resource-card:hover .resource-thumb{transform:translateY(-2px);border-color:#c6d0cd;box-shadow:var(--shadow-soft)}.resource-card:hover .resource-thumb img{transform:scale(1.014)}
.resource-body{padding:17px 3px 0}.resource-title{font-family:"Songti SC","STSong",SimSun,serif;font-size:21px;line-height:1.4;margin:0 0 10px;transition:color 160ms ease}.resource-card:hover .resource-title{color:var(--brand)}.resource-meta-line,.resource-lesson{font-size:14.5px;color:#6e7875;line-height:1.55}.resource-lesson{margin-top:3px;color:#858d8b}.resource-meta{margin-top:11px;display:flex;justify-content:space-between;align-items:center;color:#5e6966;font-size:14.5px}.resource-arrow{font-size:20px;color:var(--brand);transition:transform 180ms var(--ease)}.resource-card:hover .resource-arrow{transform:translateX(4px)}
.empty-state{grid-column:1/-1;padding:90px 20px;text-align:center;border-top:1px solid var(--line)}.empty-state h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:28px;margin:0 0 12px}.empty-state p{color:var(--muted);margin:0 0 22px}

/* About */
.about-main{overflow:hidden}.about-brand-section{min-height:650px;display:flex;align-items:center;position:relative;border-bottom:1px solid var(--line)}.about-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}.about-decor img{position:absolute;opacity:.055}.about-decor img:first-child{width:330px;right:7%;top:7%;animation:ambientFloatB 25s ease-in-out infinite alternate}.about-decor img:last-child{width:330px;left:8%;bottom:-20px;animation:ambientFloat 22s ease-in-out infinite alternate}
.about-brand-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);align-items:center;gap:90px;padding:80px 0}.about-hero-copy h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(56px,4.2vw,78px);margin:0 0 27px}.about-hero-copy p{max-width:860px;font-size:22px;line-height:1.85;color:var(--muted);margin:0}.about-logo-stage{justify-self:center;width:330px;height:330px;position:relative;display:grid;place-items:center}.about-logo-stage img{width:220px;height:220px;z-index:2}.about-logo-ring{position:absolute;inset:10px;border:1px solid #c9d4d0;border-radius:50%}.about-logo-ring::after{content:"";position:absolute;inset:42px;border:1px dashed #c4d0cc;border-radius:50%}
.about-story-section{display:grid;grid-template-columns:1.25fr .75fr;gap:100px;padding:120px 0}.about-story-title h2,.about-flow-section h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:48px;margin:0 0 24px}.about-story-title>p{font-family:"Songti SC","STSong",SimSun,serif;font-size:30px;line-height:1.7;margin:0;max-width:900px}.about-story-points{display:grid;gap:44px;align-content:start}.about-story-points article{border-top:1px solid var(--line);padding-top:22px}.about-story-points span{font:650 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--brand)}.about-story-points h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;margin:10px 0}.about-story-points p{color:var(--muted);font-size:16px;line-height:1.75;margin:0}
.about-flow-section{padding:20px 0 130px}.about-flow-section header{text-align:center;margin-bottom:60px}.about-flow{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.flow-step{min-height:210px;padding:35px 34px;display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:start;border-right:1px solid var(--line)}.flow-step:last-child{border-right:0}.flow-step>span{font:650 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--brand);padding-top:7px}.flow-step h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;margin:0 0 12px}.flow-step p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}.flow-step>b{font-weight:400;color:#98a4a0;font-size:24px;align-self:center}.about-closing-section{background:#f1f4f1;border-top:1px solid var(--line)}.about-closing-section .container{padding:100px 0}.about-closing-section p{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(34px,2.7vw,50px);line-height:1.65;margin:0;max-width:1280px}

/* Buttons / forms shared */
.primary-button,.secondary-button,.ghost-button,.admin-add{border-radius:9px;min-height:46px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:1px solid var(--line-strong);transition:transform 120ms ease,background 160ms ease,border-color 160ms ease}.primary-button{background:var(--brand);border-color:var(--brand);color:#fff}.primary-button:hover{background:var(--brand-dark)}.secondary-button{background:#fff;color:#37413f}.secondary-button:hover,.ghost-button:hover{background:#f0f3ef}.ghost-button{background:transparent}.admin-add{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:650}.admin-add.small{min-height:38px;padding:0 14px;font-size:14px}.danger-outline{color:var(--danger);border-color:#dcb9b5}.form-group{display:grid;gap:9px}.form-label{font-size:14px;font-weight:650;color:#596360}.line-input,.soft-select{width:100%;min-height:50px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;padding:0 14px;outline:0;transition:border-color 150ms ease,box-shadow 150ms ease}.line-input:focus,.soft-select:focus{border-color:#88a3ad;box-shadow:0 0 0 3px rgba(40,86,106,.07)}.textarea{padding-block:12px;min-height:130px;resize:vertical}.textarea.short{min-height:92px}.form-help{font-size:14px;color:var(--muted);line-height:1.6}.compact-input{max-width:300px}.soft-select{min-width:170px}

/* Admin login */
.admin-login-body{min-height:100vh;overflow:hidden}.admin-login-page{min-height:100vh;display:grid;grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr)}.login-brand-panel{background:#f0f3ef;border-right:1px solid var(--line);position:relative;display:grid;place-items:center;overflow:hidden}.login-decor{position:absolute;inset:0;pointer-events:none}.login-decor img{position:absolute;opacity:.06}.login-decor img:nth-child(1){width:280px;right:-70px;top:40px}.login-decor img:nth-child(2){width:260px;left:-65px;bottom:80px}.login-decor img:nth-child(3){width:220px;right:60px;bottom:70px}.login-brand-content{text-align:center;position:relative;z-index:2}.login-large-logo{width:154px;height:154px}.login-brand-content h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:48px;margin:28px 0 7px}.login-brand-content p{font-size:21px;margin:0 0 13px;color:#46524f}.login-brand-content span{font-size:11px;letter-spacing:.18em;color:#8a9491}.login-form-panel{display:grid;place-items:center;background:#fbfbf8;padding:60px}.login-form-wrap{width:min(480px,100%)}.login-back{font-size:15px;color:#71807b}.login-form-head{margin:70px 0 38px}.login-form-head h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:43px;margin:0 0 14px}.login-form-head p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}.login-form{display:grid;gap:24px}.login-form .line-input{height:56px;font-size:16px}.login-submit{height:56px;font-size:17px;margin-top:3px}.login-submit span{transition:transform 160ms var(--ease)}.login-submit:hover span{transform:translateX(4px)}.demo-note{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;color:#8a9290;font-size:13px;line-height:1.7}

/* Admin */
.admin-body{background:#f5f6f2}.admin-layout{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}.admin-sidebar{height:100vh;position:sticky;top:0;background:#fbfbf8;border-right:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;z-index:20}.admin-brand{padding:5px 8px 26px}.admin-brand .brand-logo{width:42px;height:42px}.admin-brand .brand-name{font-size:21px}.admin-nav{display:grid;gap:22px}.admin-nav-group{display:grid;gap:5px}.admin-nav-group>span{font-size:11px;color:#96a09d;letter-spacing:.14em;padding:0 12px 5px}.admin-nav button{border:0;background:transparent;text-align:left;padding:11px 13px;border-radius:8px;color:#5e6966;cursor:pointer;font-size:15px;transition:background 150ms ease,color 150ms ease}.admin-nav button:hover{background:#f0f3ef;color:var(--ink)}.admin-nav button.active{background:var(--brand-soft);color:var(--brand);font-weight:650}.admin-sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:18px 8px 0;display:grid;gap:10px;font-size:14px;color:#64706c}.admin-sidebar-bottom .ghost-button{justify-content:flex-start;padding-left:0;border:0;min-height:32px}
.admin-main{padding:42px 46px 120px;min-width:0}.admin-view{display:none}.admin-view.active{display:block}.admin-top{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:31px}.admin-top h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:42px;margin:0 0 8px}.page-lead{margin:0;color:var(--muted);font-size:16px}.admin-toolbar{display:flex;gap:14px;align-items:center;margin-bottom:20px}.admin-toolbar .resources-search{width:min(520px,100%)}.admin-table-wrap{overflow:auto;border:1px solid var(--line);background:#fff;border-radius:12px}.admin-table{width:100%;border-collapse:collapse;min-width:880px}.admin-table th,.admin-table td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}.admin-table th{font-size:12px;color:#7c8783;font-weight:650;letter-spacing:.04em;background:#fafbf8}.admin-table tr:last-child td{border-bottom:0}.admin-table td strong{font-size:15px}.table-sub{display:block;color:#8a9390;font-size:12px;margin-top:4px}.table-actions{display:flex;gap:7px;justify-content:flex-end}.table-action{border:0;background:transparent;color:var(--brand);cursor:pointer;padding:5px 6px}.status-pill{display:inline-flex;padding:4px 8px;border-radius:6px;background:#eff4f0;color:#4e6a60;font-size:12px}.status-pill.draft{background:#f3f1eb;color:#8a7350}
.admin-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:27px}.taxonomy-panel{max-width:1100px}.panel-head{display:flex;justify-content:space-between;gap:25px;align-items:start;margin-bottom:22px}.panel-head.slim{align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px}.panel-head h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;margin:0 0 6px}.panel-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.admin-tree-editor{display:grid;gap:12px}.admin-tree-book{border:1px solid var(--line);border-radius:10px;overflow:hidden}.admin-tree-row{min-height:58px;display:flex;align-items:center;gap:12px;padding:0 15px}.admin-tree-row.book{background:#fafbf8}.admin-tree-row.unit{padding-left:45px;border-top:1px solid var(--line)}.admin-tree-row.lesson{padding-left:84px;border-top:1px solid #eef0ed;min-height:50px}.admin-tree-row strong{font-size:15px}.admin-tree-row .grow{flex:1}.admin-node-actions{display:flex;gap:3px}.admin-node-actions button{border:0;background:transparent;cursor:pointer;color:#71807b;padding:6px;border-radius:6px}.admin-node-actions button:hover{background:#eef2ee;color:var(--brand)}.tree-add-row{min-height:45px;padding-left:84px;border-top:1px dashed var(--line);display:flex;align-items:center}.tree-add-row button{border:0;background:transparent;color:var(--brand);cursor:pointer;font-size:13px}.admin-category-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-category-row{border:1px solid var(--line);border-radius:9px;min-height:54px;padding:0 13px;display:flex;align-items:center;gap:10px}.admin-category-row strong{flex:1;font-size:15px}
.admin-subtabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:22px}.admin-subtabs button{height:48px;border:0;background:transparent;position:relative;cursor:pointer;color:#68736f}.admin-subtabs button::after{content:"";position:absolute;left:50%;bottom:-1px;width:0;height:2px;background:var(--brand);transform:translateX(-50%);transition:width 180ms var(--ease)}.admin-subtabs button.active{color:var(--ink);font-weight:650}.admin-subtabs button.active::after{width:100%}.home-editor-panel{display:none}.home-editor-panel.active{display:block}.config-fields{display:grid;gap:19px}.config-fields.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.config-fields .full{grid-column:1/-1}.function-editor-head{margin-top:32px;border-top:1px solid var(--line);padding-top:26px}.hero-action-editor{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.hero-action-edit{border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:13px}.function-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.function-edit-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fafbf8}.function-edit-preview{aspect-ratio:2.1;background:#eef2ef;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.function-edit-preview img{width:100%;height:100%;object-fit:cover}.function-edit-fields{padding:17px;display:grid;gap:12px}.image-input-row{display:flex;gap:9px}.image-input-row .line-input{flex:1}.file-button{white-space:nowrap}.function-edit-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 17px}.inline-check{display:inline-flex;align-items:center;gap:7px;color:#5e6966;font-size:13px}.mini-actions{display:flex;gap:4px}.mini-actions button{border:0;background:transparent;cursor:pointer;padding:5px 7px;color:#6e7b77}.about-flow-editor{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.about-flow-edit{border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px}.about-editor-panel{max-width:1200px}.settings-placeholder{max-width:720px;display:grid;gap:20px}.settings-actions{display:flex;gap:10px}.settings-placeholder code{background:#eff2ef;padding:3px 6px;border-radius:5px}
.nav-config-table input,.nav-config-table select{min-height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 9px;outline:0}.nav-config-table input[type="checkbox"]{width:18px;height:18px;min-height:0}.nav-order-actions{display:flex;gap:3px}.nav-order-actions button{border:0;background:transparent;cursor:pointer;color:#687570;padding:5px}
.admin-savebar{position:fixed;z-index:150;left:292px;right:28px;bottom:22px;border:1px solid #cbd5d1;background:rgba(255,255,252,.97);box-shadow:0 16px 50px rgba(23,36,39,.11);border-radius:12px;padding:13px 14px 13px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.admin-savebar[hidden]{display:none}.admin-savebar>div{display:flex;align-items:center;gap:10px}.admin-savebar small{color:#818b88}.dirty-dot{width:8px;height:8px;border-radius:50%;background:#c16e4c}.admin-savebar .primary-button,.admin-savebar .ghost-button{min-height:40px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(22,31,33,.14);z-index:160;opacity:0;pointer-events:none;transition:opacity 180ms ease}.drawer-backdrop.open{opacity:1;pointer-events:auto}.admin-drawer{position:fixed;z-index:170;top:0;bottom:0;right:0;width:min(620px,94vw);background:#fbfbf8;border-left:1px solid var(--line);padding:30px;overflow:auto;transform:translateX(100%);transition:transform 280ms var(--ease);display:grid;align-content:start;gap:19px}.admin-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:7px}.drawer-head h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:31px;margin:0}.drawer-close{border:0;background:transparent;font-size:30px;cursor:pointer;color:#75817d}.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drawer-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px}.drawer-cover-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:9px;background:#eef1ee;margin-top:8px}.admin-dialog{width:min(470px,90vw);border:1px solid var(--line);border-radius:13px;padding:0;background:#fff;box-shadow:0 28px 80px rgba(28,42,45,.18)}.admin-dialog::backdrop{background:rgba(25,35,37,.18)}.admin-dialog form{padding:27px}.admin-dialog h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:28px;margin:0 0 9px}.admin-dialog p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 18px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.toast{position:fixed;z-index:220;right:24px;bottom:24px;min-width:220px;max-width:420px;padding:13px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 170ms ease,transform 170ms var(--ease)}.toast.show{opacity:1;transform:none}

/* Full-screen resource host */
.resource-view-body{margin:0;overflow:hidden;background:#fff;opacity:0;transition:opacity 170ms ease}.resource-view-body.resource-is-ready{opacity:1}.resource-view-body.resource-is-leaving{opacity:0}.resource-frame{position:fixed;inset:0;width:100vw;height:100vh;border:0;background:#fff}.resource-exit-wrap{position:fixed;z-index:500;width:52px;height:52px;touch-action:none;user-select:none}.resource-exit{width:52px;height:52px;border-radius:50%;border:1px solid rgba(40,86,106,.34);background:rgba(250,251,248,.94);box-shadow:0 8px 24px rgba(22,34,37,.10);display:grid;place-items:center;color:var(--brand-dark);cursor:grab;opacity:.62;transition:opacity 170ms ease,transform 140ms ease,box-shadow 170ms ease}.resource-exit svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.resource-exit-wrap:hover .resource-exit{opacity:.98;box-shadow:0 10px 30px rgba(22,34,37,.13)}.resource-exit-wrap.is-dragging .resource-exit{cursor:grabbing;transform:scale(.96);opacity:1}.resource-exit-tip{position:absolute;top:50%;white-space:nowrap;transform:translateY(-50%) translateX(4px);padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fbfbf8;color:#404a47;font-size:13px;box-shadow:0 7px 20px rgba(22,34,37,.07);opacity:0;pointer-events:none;transition:opacity 150ms ease,transform 180ms var(--ease)}.resource-exit-wrap[data-side="right"] .resource-exit-tip{right:62px}.resource-exit-wrap[data-side="left"] .resource-exit-tip{left:62px}.resource-exit-wrap:hover:not(.is-dragging) .resource-exit-tip{opacity:1;transform:translateY(-50%) translateX(0)}.resource-load-error{position:fixed;inset:0;display:grid;place-items:center;text-align:center;background:#f7f7f3;padding:30px}.resource-load-error strong{font-family:"Songti SC","STSong",SimSun,serif;font-size:32px}.resource-load-error p{color:var(--muted)}

/* Lesson placeholder resources */
.lesson-body{background:#fbfbf8;min-height:100vh;color:#1c2223}.lesson-layout{min-height:100vh;display:grid;grid-template-columns:300px 1fr}.lesson-sidebar{background:#172833;color:#eef4f4;padding:30px;position:sticky;top:0;height:100vh;overflow:auto}.lesson-title{font-family:"Songti SC","STSong",SimSun,serif;font-size:26px;line-height:1.4;margin:8px 0 7px}.lesson-kicker{color:#b8c6ca;font-size:14px}.lesson-nav-title{margin-top:42px;font-size:15px;color:#cdd8db}.lesson-nav{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px}.lesson-nav a{display:block;padding:9px 0;color:#dbe4e5;font-size:15px}.lesson-nav a.active{color:#80b0cc}.lesson-main{padding:46px 6vw 90px;overflow:hidden}.lesson-section{margin-bottom:40px}.lesson-section h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:29px;margin:0 0 15px}.lesson-section p{color:#4a5252;line-height:1.85;font-size:16px}.lesson-callout{border:1px solid #c8d7de;background:#f3f7f8;border-radius:10px;padding:19px 23px;color:#315b70}.lesson-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.lesson-mini{border:1px solid var(--line);border-radius:10px;padding:17px;background:#fff}.lesson-diagram{height:150px;border-radius:8px;background:#f5f2e9;display:grid;place-items:center;margin-bottom:13px;overflow:hidden}.lesson-diagram svg{width:90%;height:90%}.lesson-table{width:100%;border-collapse:collapse;background:#fff}.lesson-table td{border:1px solid var(--line);padding:13px 14px}.lesson-table td:first-child{width:120px;font-weight:650;background:#fafbf8}

@media (max-width:1250px){
  .container{width:calc(100% - 64px)}.function-grid{grid-template-columns:repeat(2,1fr);max-width:900px;margin:auto}.updates-card-grid{max-width:1050px}.resource-layout{grid-template-columns:300px minmax(0,1fr);gap:28px}.resources-grid{grid-template-columns:repeat(2,1fr)}.about-brand-grid,.about-story-section{gap:55px}.admin-layout{grid-template-columns:230px 1fr}.admin-savebar{left:252px}.admin-main{padding-inline:32px}
}
@media (max-width:900px){
  :root{--header-h:70px}.container{width:calc(100% - 48px)}.nav{display:none}.header-inner{grid-template-columns:1fr auto}.header-actions{grid-column:2}.home-page{overflow:auto}.home-scroll{height:auto;overflow:visible}.home-screen{min-height:auto;padding-top:var(--header-h)}.screen-inner{min-height:760px;padding:90px 0}.physics-ambient{position:absolute;top:var(--header-h);height:3000px}.ambient-item{opacity:.05}.function-grid{grid-template-columns:repeat(2,1fr)}.updates-card-grid{grid-template-columns:1fr;max-width:650px}.updates-screen .screen-inner{min-height:auto;padding-bottom:120px}.closing-inner{min-height:680px}.resource-page-head{align-items:flex-start;flex-direction:column}.resources-search{width:100%}.resource-layout{grid-template-columns:1fr}.resource-sidebar{position:relative;top:auto;max-height:none}.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-brand-grid,.about-story-section{grid-template-columns:1fr}.about-logo-stage{justify-self:start}.about-flow{grid-template-columns:1fr}.flow-step{border-right:0;border-bottom:1px solid var(--line)}.flow-step:last-child{border-bottom:0}.admin-login-page{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh}.admin-layout{display:block}.admin-sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--line)}.admin-nav{display:flex;overflow:auto;gap:12px}.admin-nav-group{display:flex;gap:5px}.admin-nav-group>span{display:none}.admin-sidebar-bottom{display:none}.admin-main{padding:30px 22px 120px}.admin-savebar{left:20px;right:20px}.function-editor-grid,.about-flow-editor{grid-template-columns:1fr}.hero-action-editor{grid-template-columns:1fr}.admin-category-editor{grid-template-columns:1fr}.lesson-layout{display:block}.lesson-sidebar{height:auto;position:relative}.lesson-cards{grid-template-columns:1fr}
}
@media (max-width:650px){
  :root{--header-h:68px}.container{width:calc(100% - 28px)}.brand-logo{width:40px;height:40px}.brand-name{font-size:20px}.icon-button{width:42px;height:42px}.hero-screen h1{font-size:45px;text-align:left}.hero-screen p{font-size:17px;text-align:left}.hero-inner{align-items:flex-start}.hero-stage{text-align:left}.hero-actions{justify-content:flex-start;flex-wrap:wrap}.hero-action{min-width:148px;height:52px}.scroll-cue{display:none}.screen-inner{min-height:auto;padding:80px 0}.center-screen-heading{text-align:left;margin-bottom:34px}.center-screen-heading h2{font-size:38px}.function-grid{grid-template-columns:1fr}.function-card{max-width:520px}.updates-card-grid{grid-template-columns:1fr}.closing-copy p{font-size:34px}.home-footer .footer-inner{grid-template-columns:1fr auto}.footer-links{display:none}.footer-brand .brand-name{font-size:20px}.admin-link{font-size:16px}.resource-main{padding-top:38px}.resource-page-head h1{font-size:44px}.resources-grid{grid-template-columns:1fr}.resource-context h2{font-size:29px}.about-brand-grid{padding:60px 0}.about-hero-copy h1{font-size:46px}.about-hero-copy p{font-size:18px}.about-logo-stage{width:250px;height:250px}.about-logo-stage img{width:165px;height:165px}.about-story-section{padding:80px 0}.about-story-title h2,.about-flow-section h2{font-size:38px}.about-story-title>p{font-size:24px}.about-closing-section p{font-size:32px}.intro-stage{width:390px;height:390px}.intro-mark{width:225px;height:225px}.intro-name{font-size:42px}.intro-sub{font-size:14px}.arc-a{inset:9px}.arc-b{inset:63px}.arc-c{inset:40px}.resource-exit-wrap,.resource-exit{width:48px;height:48px}.resource-exit-tip{display:none}.admin-main{padding-inline:14px}.config-fields.two-cols,.drawer-grid{grid-template-columns:1fr}.config-fields .full{grid-column:auto}.admin-panel{padding:18px}.admin-top{align-items:flex-start;flex-direction:column}.admin-top h1{font-size:36px}.admin-toolbar{align-items:stretch;flex-direction:column}.admin-toolbar .resources-search{width:100%}.admin-subtabs{overflow:auto}.admin-savebar{align-items:flex-start;flex-direction:column}.admin-savebar>div:last-child{width:100%;justify-content:flex-end}.lesson-main{padding:30px 20px 70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.ambient-item,.intro-arc,.intro-dot{animation:none!important}.screen-stage{opacity:1!important;transform:none!important}
}

/* ===== Frontend motion & visual polish V5: homepage / about only ===== */
:root{
  --motion-fast:180ms;
  --motion-ui:300ms;
  --motion-reveal:620ms;
  --motion-page:1080ms;
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-page:cubic-bezier(.65,0,.35,1);
  --footer-h:132px;
}

/* Brand sizing kept within the existing editorial theme. */
.nav{gap:56px}
.nav-link{font-size:21px;transition:color var(--motion-fast) ease}
.footer-links{font-size:21px;gap:52px}
.admin-link{font-size:19px}
.site-footer,.footer-inner{min-height:var(--footer-h)}
.brand-logo{object-fit:contain}

/* 3D brand intro */
.intro{perspective:1400px}
.intro-center{transform:translateY(-2.2vh)}
.intro-stage{width:570px;height:500px;position:relative;display:grid;place-items:center;margin:auto;perspective:1200px}
.intro-logo-scene{width:360px;height:360px;position:relative;z-index:5;display:grid;place-items:center;perspective:1100px;transform-style:preserve-3d}
.intro-logo-3d{width:360px;height:360px;position:relative;transform-style:preserve-3d;opacity:0}
.intro-logo-depth{position:absolute;inset:6px;border-radius:50%;background:#082f67;transform:translate3d(8px,10px,-18px);box-shadow:0 20px 34px rgba(13,42,74,.17)}
.intro-logo-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;transform:translateZ(2px);box-shadow:0 12px 34px rgba(21,55,86,.12)}
.intro-logo-3d .intro-mark{width:100%;height:100%;position:relative;z-index:1;display:block;object-fit:contain;border-radius:50%;opacity:1;transform:none}
.intro-logo-shine{position:absolute;z-index:2;top:-12%;bottom:-12%;left:18%;width:28%;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);filter:blur(4px);transform:translate3d(-170%,0,0) rotate(18deg);mix-blend-mode:screen}
.intro-logo-shadow{position:absolute;z-index:1;left:50%;top:calc(50% + 186px);width:248px;height:34px;border-radius:50%;background:rgba(20,50,71,.5);filter:blur(18px);opacity:0;transform:translateX(-50%) scale(.6)}
.intro-particle{position:absolute;z-index:2;width:5px;height:5px;border-radius:50%;background:#6b9fb0;opacity:0}
.particle-a{left:14%;top:29%}.particle-b{right:14%;top:35%;width:4px;height:4px}.particle-c{left:21%;bottom:20%;width:3px;height:3px}.particle-d{right:22%;bottom:18%;width:4px;height:4px}
.intro-name{font-size:68px;line-height:1.12;margin-top:10px;letter-spacing:.08em;opacity:0;transform:translateY(10px)}
.intro-sub{margin-top:18px;font-size:20px;letter-spacing:.24em;color:#74817e;opacity:0;transform:translateY(7px)}
.intro-clone{position:fixed;z-index:10005;border-radius:50%;object-fit:contain;pointer-events:none;backface-visibility:hidden;will-change:transform,opacity,filter}

/* Smaller, varied physics / teaching ambience. */
.physics-ambient{position:fixed;z-index:0;left:0;right:0;top:var(--header-h);bottom:0;pointer-events:none;overflow:hidden;transform:translate3d(0,calc(var(--ambient-page-shift,0px) * -1),0);transition:none}
.ambient-anchor{position:absolute;left:var(--x);top:var(--y);width:var(--w);opacity:var(--ambient-opacity,.05);transform:translate3d(-50%,-50%,0)}
.ambient-floater{width:100%;display:block;animation-duration:var(--drift-duration,23s);animation-delay:var(--ambient-delay,0s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.ambient-floater img{display:block;width:100%;height:auto}
.drift-1{--drift-duration:22s;animation-name:driftOne}.drift-2{--drift-duration:27s;animation-name:driftTwo}.drift-3{--drift-duration:24s;animation-name:driftThree}.drift-4{--drift-duration:30s;animation-name:driftFour}.drift-5{--drift-duration:26s;animation-name:driftFive}.drift-6{--drift-duration:32s;animation-name:driftSix}
@keyframes driftOne{to{transform:translate3d(7px,-9px,0) rotate(1.8deg)}}
@keyframes driftTwo{to{transform:translate3d(-8px,7px,0) rotate(-1.5deg)}}
@keyframes driftThree{to{transform:translate3d(5px,10px,0) rotate(.9deg)}}
@keyframes driftFour{to{transform:translate3d(-6px,-8px,0) rotate(1.3deg)}}
@keyframes driftFive{to{transform:translate3d(9px,3px,0) rotate(-1deg)}}
@keyframes driftSix{to{transform:translate3d(-4px,9px,0) rotate(.7deg)}}

/* Full-page motion remains one gesture = one page; page content is animated separately. */
.paged-scroll{scroll-behavior:auto!important;scrollbar-width:none;overscroll-behavior-y:contain}
.paged-scroll::-webkit-scrollbar{display:none}
.home-page,.about-page{overflow:hidden}
.about-page .site-header{position:fixed;left:0;right:0;top:0}
.about-scroll{height:100svh;overflow-y:auto;overflow-x:hidden}
.home-screen,.about-screen{height:100svh;min-height:100svh;position:relative;z-index:2;overflow:hidden}
.screen-stage{opacity:1;transform:none}
body.is-page-transitioning .hero-eyebrow,
body.is-page-transitioning #homeHeroTitle,
body.is-page-transitioning #homeHeroSubtitle,
body.is-page-transitioning .hero-actions,
body.is-page-transitioning .function-card,
body.is-page-transitioning .update-row,
body.is-page-transitioning .about-hero-copy>* ,
body.is-page-transitioning .about-story-points article,
body.is-page-transitioning .flow-step{will-change:transform,opacity}
body.is-page-transitioning .paged-scroll{cursor:default}

/* Hero: larger, slightly higher, editorial art lettering. */
.hero-inner{justify-content:center;text-align:center}
.hero-position{width:100%;transform:translateY(-4.2vh)}
.hero-stage{max-width:1320px;margin:auto}
.hero-eyebrow{font-size:14px;letter-spacing:.24em;margin-bottom:28px}
.hero-title-art{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(74px,5.4vw,102px)!important;line-height:1.08!important;margin:0!important;font-weight:700;letter-spacing:0!important;display:flex;align-items:baseline;justify-content:center;white-space:nowrap}
.hero-glyph-layout{display:inline-block;transform:translate3d(0,var(--art-y,0),0) rotate(var(--art-r,0deg));transform-origin:50% 70%}
.hero-glyph-layout.is-punctuation{margin-inline:.02em;transform:translate3d(0,calc(var(--art-y,0) + 1px),0) rotate(var(--art-r,0deg)) scale(.94)}
.hero-glyph-float{display:inline-block;animation:heroGlyphFloat var(--float-d,9s) ease-in-out var(--float-delay,0s) infinite alternate;transform-origin:50% 70%;will-change:transform}
@keyframes heroGlyphFloat{from{transform:translate3d(calc(var(--float-x,2px) * -.45),calc(var(--float-y,-4px) * -.35),0) rotate(calc(var(--float-r,.4deg) * -.45))}to{transform:translate3d(var(--float-x,2px),var(--float-y,-4px),0) rotate(var(--float-r,.4deg))}}
.hero-screen p{font-size:22px;line-height:1.85;margin:28px auto 40px;max-width:850px}
.hero-actions{gap:22px}
.hero-action{height:66px;min-width:205px;border-radius:11px;gap:18px;font-size:20px;font-weight:650;transition:transform var(--motion-ui) var(--ease-soft),background var(--motion-ui) ease,border-color var(--motion-ui) ease,color var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.hero-action:hover{transform:translateY(-3px)}
.hero-action.primary:hover{box-shadow:0 11px 24px rgba(40,86,106,.13)}

/* One arrow language across hero, cards, updates and about flow. */
.motion-arrow{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(40,86,106,.30);border-radius:50%;display:inline-grid;place-items:center;color:var(--brand);background:rgba(255,255,255,.42);transition:transform var(--motion-ui) var(--ease-soft),background var(--motion-ui) ease,border-color var(--motion-ui) ease,color var(--motion-ui) ease}
.motion-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-ui) var(--ease-soft)}
.hero-action.primary .motion-arrow{width:34px;height:34px;flex-basis:34px;color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.hero-action.secondary .motion-arrow{width:34px;height:34px;flex-basis:34px}
.hero-action:hover .motion-arrow svg,.function-card:hover .motion-arrow svg,.update-row:hover .motion-arrow svg,.flow-step:hover .motion-arrow svg{transform:translateX(2px)}
.function-card:hover .motion-arrow,.update-row:hover .motion-arrow{background:var(--brand-soft);border-color:rgba(40,86,106,.45);transform:scale(1.035)}

/* Function cards retain the existing light editorial card design; only proportions / arrow polish change. */
.function-card{transition:transform var(--motion-ui) var(--ease-soft),border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,background var(--motion-ui) ease}
.function-card:hover{transform:translateY(-4px)}
.function-copy{min-height:154px;padding:25px 26px 24px}
.function-copy h3{font-size:26px}
.function-copy p{padding-right:54px}
.function-arrow{position:absolute;right:23px;bottom:21px;font-size:0;color:var(--brand);transform:none}
.function-card:hover .function-arrow{transform:scale(1.035)}

/* Latest updates become horizontal editorial rows. */
.updates-heading{margin-bottom:42px}
.updates-list{width:min(1320px,100%);margin:auto;border-top:1px solid var(--line)}
.update-row{min-height:104px;display:grid;grid-template-columns:76px minmax(0,1fr) minmax(190px,260px) 44px;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:13px 8px;position:relative;transition:background var(--motion-ui) ease,padding-inline var(--motion-ui) var(--ease-soft)}
.update-row::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:rgba(40,86,106,.40);transition:width 480ms var(--ease-soft)}
.update-row:hover{background:rgba(255,255,255,.54);padding-inline:16px}
.update-row:hover::before{width:100%}
.update-index{font:650 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#9aa3a0;letter-spacing:.08em}
.update-main{min-width:0;display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;align-items:center}
.update-date{grid-row:1/3;align-self:center;font:650 13px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--brand)}
.update-main h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;line-height:1.35;margin:0 0 6px;transition:color var(--motion-fast) ease}
.update-main p{font-size:14.5px;color:var(--muted);margin:0}
.update-category{min-width:0;display:grid;gap:5px;color:#566360;font-size:15px}
.update-category small{font-size:13px;color:#8a9390;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.update-arrow{width:38px;height:38px;justify-self:end}
.update-row:hover .update-main h3{color:var(--brand)}

/* Footer scale */
.footer-brand .brand-logo{width:46px;height:46px}.footer-brand .brand-name{font-size:24px}

/* About becomes the same one-page-at-a-time narrative system. */
.about-main{overflow:auto}
.about-screen{padding-top:var(--header-h);display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.about-brand-section{min-height:100svh;height:100svh;border-bottom:1px solid var(--line);display:flex;align-items:stretch}
.about-brand-grid{width:100%;min-height:calc(100svh - var(--header-h));grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);align-items:center;gap:90px;padding:62px 0}
.about-hero-copy h1{font-size:clamp(60px,4.6vw,84px);margin-bottom:28px}
.about-hero-copy p{font-size:22px}
.about-logo-stage{width:340px;height:340px;perspective:1000px}
.about-logo-float{width:100%;height:100%;position:relative;display:grid;place-items:center;transform-style:preserve-3d;animation:aboutLogoFloat 11s ease-in-out infinite alternate}
.about-logo-float img{width:238px;height:238px;z-index:2;border-radius:50%;filter:drop-shadow(0 12px 22px rgba(31,70,86,.10))}
.about-logo-ring{inset:8px;opacity:.64}
.about-logo-ring::after{display:none}
@keyframes aboutLogoFloat{from{transform:perspective(1000px) translate3d(0,-3px,0) rotateX(1.1deg) rotateY(-2.5deg)}to{transform:perspective(1000px) translate3d(0,5px,0) rotateX(-1deg) rotateY(2.7deg)}}
.about-story-screen,.about-flow-screen{align-items:center}
.about-story-section{width:100%;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:100px;padding:64px 0}
.about-story-title h2,.about-flow-section h2{font-size:52px}
.about-story-title>p{font-size:31px}
.about-story-points{gap:46px}
.about-story-points article{transition:transform var(--motion-ui) var(--ease-soft),border-color var(--motion-ui) ease}
.about-story-points article:hover{transform:translateX(4px);border-color:#c7d1ce}
.about-flow-section{width:100%;height:100%;padding:0;display:flex;flex-direction:column;justify-content:center}
.about-flow-section header{margin-bottom:56px}
.about-flow{width:100%}
.flow-step{min-height:218px;grid-template-columns:52px 1fr 42px;transition:background var(--motion-ui) ease}
.flow-step:hover{background:rgba(255,255,255,.35)}
.flow-step>b{display:none}
.flow-arrow{width:36px;height:36px;align-self:center;color:#81918c;border-color:rgba(40,86,106,.20)}
.about-closing-screen{padding-top:var(--header-h);display:flex;flex-direction:column;justify-content:space-between}
.about-closing-section{flex:1;width:100%;display:flex;align-items:center;background:#f1f4f1;border-top:0}
.about-closing-section .container{padding:0}
.about-closing-section p{font-size:clamp(38px,3vw,56px);max-width:1320px}
.about-footer{flex:0 0 var(--footer-h)}

/* Desktop height tuning: keep every requested page comfortably within one viewport. */
@media (min-width:901px) and (max-height:840px){
  :root{--header-h:70px;--footer-h:112px}
  .intro-stage{width:470px;height:390px}.intro-logo-scene,.intro-logo-3d{width:285px;height:285px}.intro-logo-shadow{top:calc(50% + 146px);width:205px}.intro-name{font-size:55px;margin-top:4px}.intro-sub{font-size:18px;margin-top:12px}
  .hero-position{transform:translateY(-3vh)}
  .hero-title-art{font-size:clamp(64px,5vw,82px)!important}.hero-eyebrow{margin-bottom:20px}.hero-screen p{font-size:19px;margin:20px auto 28px}.hero-action{height:58px;min-width:184px;font-size:18px}
  .section-layout{padding-top:68px}.center-screen-heading{margin-bottom:34px}.center-screen-heading h2{font-size:46px}.center-screen-heading p{font-size:17px}
  .function-grid{gap:20px}.function-visual{aspect-ratio:1.82}.function-copy{min-height:126px;padding:19px 21px}.function-copy h3{font-size:23px;margin-bottom:8px}.function-copy p{font-size:14.5px;line-height:1.5}.function-arrow{right:18px;bottom:17px}.motion-arrow{width:34px;height:34px;flex-basis:34px}
  .updates-heading{margin-bottom:24px}.update-row{min-height:82px}.update-main h3{font-size:22px}.update-main{grid-template-columns:100px 1fr}
  .closing-inner{min-height:calc(100svh - var(--header-h) - var(--footer-h))}.closing-copy p{font-size:42px;margin-bottom:24px}
  .about-brand-grid{padding:32px 0}.about-hero-copy h1{font-size:60px;margin-bottom:19px}.about-hero-copy p{font-size:19px}.about-logo-stage{width:270px;height:270px}.about-logo-float img{width:192px;height:192px}
  .about-story-section{padding:36px 0;gap:70px}.about-story-title h2,.about-flow-section h2{font-size:43px;margin-bottom:16px}.about-story-title>p{font-size:26px}.about-story-points{gap:28px}.about-story-points article{padding-top:16px}.about-story-points h3{font-size:22px;margin:8px 0}.about-story-points p{font-size:14.5px}
  .about-flow-section header{margin-bottom:34px}.flow-step{min-height:170px;padding:27px 26px}.flow-step h3{font-size:22px}.flow-step p{font-size:14.5px}
}

@media (max-width:900px){
  .home-page,.about-page{overflow:auto}
  .about-page .site-header{position:sticky}
  .paged-scroll,.about-scroll{height:auto;overflow:visible}
  .home-screen,.about-screen,.about-brand-section{height:auto;min-height:auto;overflow:visible}
  .about-screen{padding-top:0}
  .hero-position{transform:none}
  .hero-title-art{font-size:54px!important;white-space:normal;flex-wrap:wrap}
  .physics-ambient{position:absolute;top:var(--header-h);height:3200px;bottom:auto;transform:none}
  .ambient-anchor{opacity:calc(var(--ambient-opacity,.05) * .72)}
  .updates-list{max-width:720px}
  .update-row{grid-template-columns:54px minmax(0,1fr) 40px;gap:16px;min-height:100px}
  .update-main{grid-template-columns:100px minmax(0,1fr)}
  .update-category{display:none}.update-arrow{grid-column:3}
  .about-brand-grid{min-height:auto;padding:78px 0}.about-story-section{padding:90px 0}.about-flow-section{padding:80px 0}.about-closing-screen{padding-top:0}.about-closing-section .container{padding:90px 0}
  .about-logo-stage{justify-self:start}
}

@media (max-width:650px){
  .nav-link{font-size:19px}.hero-title-art{font-size:48px!important;justify-content:flex-start;line-height:1.18!important}.hero-screen p{font-size:18px}.hero-actions{gap:12px}.hero-action{height:58px;min-width:164px;font-size:18px;padding-inline:16px}
  .intro-stage{width:360px;height:330px}.intro-logo-scene,.intro-logo-3d{width:230px;height:230px}.intro-logo-shadow{top:calc(50% + 116px);width:170px}.intro-name{font-size:48px;margin-top:7px}.intro-sub{font-size:16px;margin-top:12px}
  .updates-list{width:100%}.update-row{grid-template-columns:36px minmax(0,1fr) 36px;padding-inline:0;gap:10px}.update-row:hover{padding-inline:5px}.update-main{display:block}.update-date{display:block;margin-bottom:6px}.update-main h3{font-size:21px;margin-bottom:6px}.update-main p{font-size:13.5px}.update-index{font-size:12px}.motion-arrow,.update-arrow{width:34px;height:34px;flex-basis:34px}
  .footer-links{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .hero-glyph-float,.ambient-floater,.about-logo-float{animation:none!important}
  .intro-logo-3d,.intro-particle,.intro-logo-shine{animation:none!important}
  .hero-glyph-layout{transform:none!important}
}

/* Final viewport balance corrections for the requested paged layouts. */
.closing-inner{min-height:calc(100svh - var(--header-h) - var(--footer-h))}
@media (min-width:901px) and (max-width:1250px){
  .hero-title-art{font-size:clamp(68px,6.2vw,88px)!important}
  .hero-screen p{font-size:20px}
  .hero-action{min-width:192px;height:62px;font-size:19px}
  .about-brand-grid,.about-story-section{gap:58px}
  .about-logo-stage{width:300px;height:300px}.about-logo-float img{width:212px;height:212px}
  .update-row{grid-template-columns:64px minmax(0,1fr) minmax(165px,210px) 42px;gap:18px}
}


/* ===== V6 focused refinement: intro / paged content / updates / about / admin ===== */
:root{
  --brand-gold:#d9a62f;
  --admin-sidebar-w:288px;
}

/* Intro: refined shallow 3D coin, logo-inspired wordmark */
.intro-center{transform:translateY(-2.8vh)}
.intro-stage{width:590px;height:470px}
.intro-logo-scene{width:350px;height:350px;perspective:1250px}
.intro-logo-3d{width:350px;height:350px;transform-origin:50% 50%;backface-visibility:hidden}
.intro-logo-depth{inset:5px;box-shadow:none}
.intro-logo-depth.depth-3{background:#06295b;transform:translate3d(12px,14px,-24px);opacity:.76}
.intro-logo-depth.depth-2{background:#0a3972;transform:translate3d(8px,10px,-16px);opacity:.84}
.intro-logo-depth.depth-1{background:#14508a;transform:translate3d(4px,5px,-8px);opacity:.88}
.intro-logo-face{box-shadow:0 16px 38px rgba(15,46,78,.14);backface-visibility:hidden}
.intro-logo-rim{position:absolute;inset:1px;z-index:3;border-radius:50%;pointer-events:none;border:1px solid rgba(113,208,236,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.intro-logo-shine{width:22%;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);filter:blur(3px)}
.intro-logo-shadow{top:calc(50% + 178px);width:238px;height:30px;background:rgba(20,50,71,.34);filter:blur(19px)}
.intro-lockup{margin-top:7px;text-align:center}
.intro-wordmark{display:inline-flex;align-items:flex-end;justify-content:center;gap:18px;opacity:0;transform:translateY(12px);white-space:nowrap}
.intro-brush{display:inline-flex;align-items:flex-end;gap:.02em;font-family:"STXingkai","Xingkai SC","KaiTi","STKaiti",serif;font-size:74px;font-weight:700;line-height:.92;letter-spacing:-.07em;color:#173f63;transform:rotate(-1.2deg)}
.intro-brush i{font-style:normal;display:inline-block;text-shadow:0 2px 0 rgba(40,86,106,.05)}
.intro-brush i:first-child{transform:translateY(-1px) rotate(-2deg)}
.intro-brush i.gold{color:var(--brand-gold);transform:translateY(3px) rotate(1.6deg)}
.intro-block{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:45px;font-weight:850;line-height:1;color:#173f63;letter-spacing:.05em;padding-bottom:3px}
.intro-sub{font-size:18px;margin-top:15px;letter-spacing:.22em;color:#667572;font-weight:500}
.intro-particle{background:#6d9eaa}
.intro-clone{border-radius:50%}

/* Ambient: make the requested small physics / teaching symbols actually visible */
.physics-ambient{z-index:1}
.home-screen,.about-screen{z-index:2}
.ambient-anchor{opacity:var(--ambient-opacity,.09)}
.ambient-floater img{filter:none}
@keyframes driftOne{to{transform:translate3d(11px,-13px,0) rotate(2.4deg)}}
@keyframes driftTwo{to{transform:translate3d(-12px,10px,0) rotate(-2deg)}}
@keyframes driftThree{to{transform:translate3d(8px,14px,0) rotate(1.6deg)}}
@keyframes driftFour{to{transform:translate3d(-9px,-12px,0) rotate(1.8deg)}}
@keyframes driftFive{to{transform:translate3d(13px,5px,0) rotate(-1.7deg)}}
@keyframes driftSix{to{transform:translate3d(-7px,13px,0) rotate(1.2deg)}}

/* Hero art direction: brush-like lead phrase + editorial tail */
.hero-position{transform:translateY(-5vh)}
.hero-title-art{
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:clamp(72px,5.15vw,98px)!important;
  display:flex;align-items:baseline;justify-content:center;gap:.10em;
  overflow:visible;
}
.hero-title-lead{
  display:inline-flex;align-items:baseline;position:relative;
  font-family:"STXingkai","Xingkai SC","KaiTi","STKaiti",serif;
  font-size:1.10em;font-weight:700;letter-spacing:-.065em;color:#183f58;
  padding-inline:.02em .08em;
}
.hero-title-lead::after{
  content:"";position:absolute;left:6%;right:1%;bottom:-.06em;height:.075em;
  border-radius:999px;background:linear-gradient(90deg,rgba(40,86,106,.08),rgba(217,166,47,.42),rgba(40,86,106,.08));
  transform:skewX(-18deg) rotate(-1deg);opacity:.78;pointer-events:none;
}
.hero-title-tail{display:inline-flex;align-items:baseline;font-size:.84em;font-weight:700;letter-spacing:.01em;color:#1b2223}
.hero-glyph-layout.is-lead{margin-inline:-.015em}
.hero-glyph-layout.is-tail{margin-inline:.004em}
.hero-glyph-layout.is-comma{font-size:.70em;color:#8a6c2f;margin-inline:-.02em .06em}
.hero-glyph-float{animation-duration:var(--float-d,5.8s)}
@keyframes heroGlyphFloat{
  0%{transform:translate3d(calc(var(--float-x,4px) * -.50),calc(var(--float-y,-7px) * -.42),0) rotate(calc(var(--float-r,.8deg) * -.48)) scale(.997)}
  52%{transform:translate3d(calc(var(--float-x,4px) * .28),calc(var(--float-y,-7px) * -.12),0) rotate(calc(var(--float-r,.8deg) * .22)) scale(1.006)}
  100%{transform:translate3d(var(--float-x,4px),var(--float-y,-7px),0) rotate(var(--float-r,.8deg)) scale(1.002)}
}

/* More readable enter/leave choreography */
body.is-page-transitioning .hero-eyebrow,
body.is-page-transitioning #homeHeroTitle,
body.is-page-transitioning #homeHeroSubtitle,
body.is-page-transitioning .hero-actions,
body.is-page-transitioning .function-card,
body.is-page-transitioning .update-row,
body.is-page-transitioning .about-hero-copy>*,
body.is-page-transitioning .about-logo-stage,
body.is-page-transitioning .about-story-title>*,
body.is-page-transitioning .about-story-points article,
body.is-page-transitioning .about-flow-section header>*,
body.is-page-transitioning .flow-step,
body.is-page-transitioning .closing-copy>*{
  backface-visibility:hidden;
}

/* Latest updates: three polished horizontal bands, not table-like rows */
.updates-heading{margin-bottom:32px}
.updates-list{width:min(1340px,100%);display:grid;gap:13px;border:0}
.update-row{
  min-height:112px;
  grid-template-columns:46px 116px minmax(0,1fr) minmax(160px,220px) 44px;
  gap:20px;padding:13px 17px;
  border:1px solid rgba(212,220,216,.92);
  border-radius:14px;
  background:rgba(255,255,255,.60);
  box-shadow:0 5px 18px rgba(27,43,46,.025);
  overflow:hidden;
  transition:transform var(--motion-ui) var(--ease-soft),background var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease;
}
.update-row::before{
  top:0;bottom:0;left:0;width:3px;height:auto;
  background:var(--brand);opacity:0;transform:scaleY(.35);transform-origin:center;
  transition:opacity var(--motion-ui) ease,transform var(--motion-ui) var(--ease-soft);
}
.update-row:hover{
  padding-inline:17px;
  transform:translate3d(4px,-2px,0);
  background:rgba(255,255,255,.88);
  border-color:#c5d0cc;
  box-shadow:0 12px 28px rgba(28,42,45,.055);
}
.update-row:hover::before{width:3px;opacity:.75;transform:scaleY(.74)}
.update-index{font-size:12px;color:#9aa5a1;align-self:start;padding-top:8px}
.update-cover{width:116px;height:72px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:#eef2ef;display:block}
.update-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms var(--ease-soft)}
.update-row:hover .update-cover img{transform:scale(1.035)}
.update-main{display:block;min-width:0}
.update-title-line{display:flex;align-items:baseline;gap:16px;min-width:0}
.update-date{
  flex:0 0 auto;display:inline-flex;align-items:center;min-height:25px;padding:0 8px;
  border-radius:999px;background:var(--brand-soft);font-size:12px;letter-spacing:.03em;
}
.update-main h3{font-size:25px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.update-main p{margin-top:10px;font-size:14.5px}
.update-category{padding-left:18px;border-left:1px solid var(--line)}
.update-category span{font-weight:650;color:#53625e}
.update-category small{margin-top:4px}
.update-arrow{align-self:center}

/* About: fix desktop overflow and make the logo materially larger */
.about-main{overflow:hidden!important}
.about-scroll{overflow-y:auto;overflow-x:hidden!important}
.about-page .about-brand-grid,
.about-page .about-story-section,
.about-page .about-flow-section{
  width:min(1660px,calc(100% - clamp(72px,9vw,164px)));
  max-width:100%;
  margin-inline:auto;
  min-width:0;
}
.about-brand-grid{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:70px}
.about-brand-grid>*,
.about-story-section>*{min-width:0}
.about-story-section{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:78px}
.about-logo-stage{width:420px;height:420px;max-width:100%;justify-self:center}
.about-logo-float img{width:315px;height:315px}
.about-logo-ring{inset:5px;border-color:rgba(126,161,171,.44)}
.about-logo-ring::before{content:"";position:absolute;inset:34px;border:1px dashed rgba(117,151,161,.28);border-radius:50%}

/* Admin login: same light academic brand language */
.admin-login-page{grid-template-columns:minmax(430px,.95fr) minmax(560px,1.05fr);background:var(--bg)}
.login-brand-panel{background:linear-gradient(145deg,#eef3ef 0%,#f6f7f2 64%,#edf2f1 100%)}
.login-decor img{opacity:.095}
.login-decor img:nth-child(1){width:82px;right:13%;top:13%}
.login-decor img:nth-child(2){width:90px;left:12%;bottom:17%}
.login-decor img:nth-child(3){width:72px;right:16%;bottom:19%}
.login-decor img:nth-child(4){width:190px;left:6%;top:14%;opacity:.048}
.login-brand-content{width:min(540px,82%);text-align:center}
.login-logo-stage{width:236px;height:236px;margin:0 auto 30px;position:relative;display:grid;place-items:center}
.login-logo-ring{position:absolute;inset:0;border:1px solid rgba(40,86,106,.18);border-radius:50%}
.login-logo-ring::after{content:"";position:absolute;inset:20px;border:1px dashed rgba(40,86,106,.16);border-radius:50%}
.login-large-logo{width:184px;height:184px;position:relative;z-index:2;border-radius:50%;filter:drop-shadow(0 14px 24px rgba(24,55,74,.10))}
.login-brand-lockup{display:flex;align-items:baseline;justify-content:center;gap:12px;color:#1b455a}
.login-brand-lockup .login-brush{font-family:"STXingkai","Xingkai SC","KaiTi","STKaiti",serif;font-size:56px;font-weight:700;letter-spacing:-.07em}
.login-brand-lockup strong{font-size:34px;letter-spacing:.04em}
.login-brand-content h1{display:none}
.login-brand-content p{font-size:19px;margin:12px 0 11px}
.login-brand-content>span{font-size:11px;letter-spacing:.20em}
.login-form-panel{background:#fafbf8;padding:54px}
.login-form-wrap{
  width:min(520px,100%);padding:46px 48px 48px;
  border:1px solid rgba(216,223,219,.92);border-radius:18px;background:rgba(255,255,255,.76);
  box-shadow:0 20px 60px rgba(28,42,45,.055)
}
.login-back{display:inline-flex;align-items:center;min-height:34px;font-size:15px}
.login-form-head{margin:45px 0 34px}
.login-form-head h2{font-size:46px}
.login-form-head p{font-size:16px}
.login-form{gap:20px}
.login-form .line-input{height:58px;background:#fff}
.login-submit{height:60px;font-size:18px;border-radius:10px}
.demo-note{display:none!important}

/* Admin: clearer information architecture and calmer surface hierarchy */
.admin-body{background:#f3f5f1}
.admin-layout{grid-template-columns:var(--admin-sidebar-w) minmax(0,1fr)}
.admin-sidebar{
  width:var(--admin-sidebar-w);padding:22px 18px 20px;background:rgba(250,251,248,.98);
  border-right:1px solid #dce2de
}
.admin-brand{padding:4px 9px 22px;border-bottom:1px solid var(--line);margin-bottom:20px}
.admin-brand .brand-logo{width:48px;height:48px}
.admin-brand .brand-name{font-size:23px}
/* ADMIN-NAV-LIFECYCLE-R1R2-GEOMETRY */
.admin-nav{
  display:grid;
  gap:20px;
  overflow:auto;
  padding-right:2px;
  align-content:start;
  grid-auto-rows:max-content;
  overflow-anchor:none
}
.admin-nav-group{
  display:grid;
  gap:6px;
  align-content:start;
  grid-auto-rows:max-content
}
.admin-nav-group>span{font-size:11px;padding:0 10px 4px;color:#8b9692;letter-spacing:.12em;font-weight:650}
.admin-nav button{
  display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;
  min-height:58px;padding:8px 10px;border-radius:11px;font-size:14px
}
.admin-nav button>span{min-width:0;display:grid;gap:2px}
.admin-nav button strong{font-size:15px;font-weight:650;color:#47524f}
.admin-nav button small{font-size:11.5px;line-height:1.3;color:#929b98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-nav-icon{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-style:normal;
  background:#f0f3ef;color:#71837d;font-family:"Songti SC","STSong",serif;font-size:15px;
  transition:background var(--motion-ui) ease,color var(--motion-ui) ease,transform var(--motion-ui) var(--ease-soft)
}
.admin-nav button:hover{background:#f0f3ef}
.admin-nav button:hover .admin-nav-icon{transform:translateX(1px);background:#e8efec;color:var(--brand)}
.admin-nav button.active{background:#eaf1f0;color:var(--brand)}
.admin-nav button.active strong{color:var(--brand)}
.admin-nav button.active small{color:#688078}
.admin-nav button.active .admin-nav-icon{background:var(--brand);color:#fff}
.admin-sidebar-bottom{padding:17px 10px 0}
.admin-main{padding:44px 50px 126px;max-width:1660px;width:100%;margin-inline:auto}
.admin-view.active{position:relative;animation:adminViewIn 360ms var(--ease-soft) both}
@keyframes adminViewIn{from{opacity:0;top:8px}to{opacity:1;top:0}}
.admin-top{margin-bottom:26px;align-items:center}
.admin-top h1{font-size:44px}
.page-lead{font-size:15.5px;line-height:1.65}
.admin-toolbar{
  padding:14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.68);
  margin-bottom:18px
}
.admin-table-wrap{border-radius:14px;box-shadow:0 5px 18px rgba(28,42,45,.025)}
.admin-table thead{position:sticky;top:0;z-index:2}
.admin-table th{padding-block:13px}
.admin-table td{padding-block:16px}
.admin-table tbody tr{transition:background var(--motion-fast) ease}
.admin-table tbody tr:hover{background:#fafcf9}
.admin-panel{border-radius:15px;padding:30px;box-shadow:0 4px 16px rgba(28,42,45,.022)}
.taxonomy-panel{max-width:1240px}
.panel-head h2{font-size:27px}
.admin-subtabs{
  display:inline-flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.68);margin-bottom:22px
}
.admin-subtabs button{height:42px;padding:0 17px;border-radius:8px}
.admin-subtabs button::after{display:none}
.admin-subtabs button.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(40,86,106,.10)}
.hero-action-edit,.function-edit-card,.about-flow-edit{border-radius:12px}
.function-edit-card{background:#fbfcf9}
.admin-tree-book{border-radius:12px;background:#fff}
.admin-tree-row.book{background:#f8faf7}
.admin-tree-row.unit{border-left:3px solid #e2e9e5}
.admin-tree-row.lesson{border-left:3px solid #edf1ee}
.admin-category-row{border-radius:11px;background:#fcfdfb}
.admin-savebar{left:calc(var(--admin-sidebar-w) + 22px)}
.admin-drawer{width:min(650px,94vw);padding:32px 34px;background:#fcfdfb}
.drawer-head{padding-bottom:18px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:34px}
.admin-dialog{border-radius:16px}
.settings-placeholder{max-width:780px}
.settings-placeholder>p:last-child{display:none}

@media (min-width:901px) and (max-height:840px){
  .intro-stage{width:450px;height:345px}
  .intro-logo-scene,.intro-logo-3d{width:262px;height:262px}
  .intro-logo-shadow{top:calc(50% + 132px);width:185px}
  .intro-brush{font-size:54px}.intro-block{font-size:34px}.intro-sub{font-size:15px;margin-top:10px}
  .hero-title-art{font-size:clamp(62px,4.85vw,80px)!important}
  .about-logo-stage{width:310px;height:310px}.about-logo-float img{width:232px;height:232px}
  .update-row{min-height:88px;grid-template-columns:38px 92px minmax(0,1fr) 155px 38px;padding-block:9px}
  .update-cover{width:92px;height:58px}.update-main h3{font-size:21px}.update-main p{margin-top:5px;font-size:13px}
}

@media (min-width:901px) and (max-width:1250px){
  .about-page .about-brand-grid,
  .about-page .about-story-section,
  .about-page .about-flow-section{width:calc(100% - 64px)}
  .about-brand-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:44px}
  .about-story-section{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:48px}
  .about-logo-stage{width:340px;height:340px}.about-logo-float img{width:255px;height:255px}
  .admin-layout{grid-template-columns:248px minmax(0,1fr)}
  .admin-sidebar{width:248px}
  .admin-nav button small{display:none}
  .admin-savebar{left:270px}
  .admin-main{padding-inline:34px}
}

@media (max-width:900px){
  .about-page .about-brand-grid,
  .about-page .about-story-section,
  .about-page .about-flow-section{width:calc(100% - 48px);max-width:none}
  .intro-brush{font-size:54px}.intro-block{font-size:34px}
  .update-row{grid-template-columns:42px 88px minmax(0,1fr) 38px}
  .update-cover{width:88px;height:58px}
  .update-category{display:none}
  .admin-main{max-width:none}
  .admin-sidebar{width:auto}
  .admin-nav button{min-width:148px;grid-template-columns:30px 1fr}
  .admin-nav-icon{width:30px;height:30px}
  .admin-nav button small{display:none}
  .admin-savebar{left:20px}
}

@media (max-width:650px){
  .intro-stage{width:330px;height:300px}
  .intro-logo-scene,.intro-logo-3d{width:210px;height:210px}
  .intro-logo-shadow{top:calc(50% + 106px);width:150px}
  .intro-brush{font-size:45px}.intro-block{font-size:29px}.intro-wordmark{gap:11px}.intro-sub{font-size:13px;letter-spacing:.18em}
  .hero-title-art{font-size:47px!important;display:block;text-align:left}
  .hero-title-lead,.hero-title-tail{display:inline}
  .hero-glyph-layout{display:inline-block}
  .update-row{grid-template-columns:32px minmax(0,1fr) 34px;padding:12px 10px;gap:10px}
  .update-cover{display:none}
  .update-title-line{display:block}
  .update-date{margin-bottom:5px}
  .login-form-panel{padding:20px}
  .login-form-wrap{padding:34px 24px}
}


@media (max-width:900px){
  .admin-nav{display:flex;overflow-x:auto;overflow-y:hidden;gap:10px;padding:0 0 4px}
  .admin-nav-group{display:flex;gap:6px;flex:0 0 auto}
  .admin-nav-group>span{display:none}
}

/* ===== V7 focused polish: visible page choreography / stronger intro / header wordmark / updates / ambient / login hero ===== */

/* Top-left wordmark now echoes the real logo without overpowering the header. */
.site-header .brand{gap:13px}
.site-header .brand-name{display:inline-flex;align-items:baseline;gap:7px;line-height:1;color:#173f58}
.header-brand-brush{display:inline-flex;align-items:baseline;font-family:"STXingkai","Xingkai SC","KaiTi","STKaiti",serif;font-size:30px;font-weight:700;letter-spacing:-.085em;transform:translateY(1px) rotate(-.6deg)}
.header-brand-brush i{font-style:normal;display:inline-block}
.header-brand-brush i:first-child{transform:rotate(-1.7deg)}
.header-brand-brush i.gold{color:var(--brand-gold);transform:translateY(1px) rotate(1deg)}
.header-brand-block{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:19px;font-weight:800;letter-spacing:.045em;color:#234b5d}

/* Intro: larger movement path and stronger but still restrained 3D depth. */
.intro{background:radial-gradient(circle at 50% 46%,rgba(239,245,242,.92) 0,rgba(247,247,243,.985) 44%,var(--bg) 74%)}
.intro-center{transform:translateY(-2.2vh)}
.intro-stage{width:690px;height:515px;perspective:1500px;overflow:visible}
.intro-logo-scene{width:385px;height:385px;perspective:1350px;transform-style:preserve-3d;will-change:transform,opacity}
.intro-logo-3d{width:385px;height:385px;will-change:transform,opacity;transform-style:preserve-3d}
.intro-logo-depth{inset:4px;transform-style:preserve-3d}
.intro-logo-depth.depth-3{transform:translate3d(18px,20px,-34px);opacity:.78;background:#052754}
.intro-logo-depth.depth-2{transform:translate3d(12px,14px,-23px);opacity:.86;background:#08366e}
.intro-logo-depth.depth-1{transform:translate3d(6px,7px,-12px);opacity:.92;background:#115087}
.intro-logo-face{box-shadow:0 22px 46px rgba(15,46,78,.16)}
.intro-logo-rim{border-color:rgba(112,211,238,.44);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 26px rgba(77,182,218,.08)}
.intro-logo-shadow{top:calc(50% + 198px);width:270px;height:36px;filter:blur(21px)}
.intro-sweep{position:absolute;z-index:1;left:50%;top:50%;width:350px;height:3px;border-radius:999px;opacity:0;pointer-events:none;transform-origin:center;background:linear-gradient(90deg,transparent,rgba(74,174,207,.06),rgba(40,86,106,.24),rgba(217,166,47,.17),transparent);filter:blur(.15px)}
.intro-sweep.sweep-b{width:285px;height:2px;background:linear-gradient(90deg,transparent,rgba(40,86,106,.16),rgba(79,190,220,.22),transparent)}
.intro-particle{width:6px;height:6px;box-shadow:0 0 12px rgba(66,155,187,.18)}
.intro-wordmark{gap:20px}
.intro-brush{font-size:94px;letter-spacing:-.09em;color:#173f63}
.intro-block{font-size:58px;letter-spacing:.045em;padding-bottom:5px}
.intro-sub{font-size:21px;margin-top:17px;letter-spacing:.20em;color:#657571;font-weight:550}

/* Ambient layer: clearly visible, still small, soft and behind content. */
.physics-ambient{z-index:1;opacity:1!important}
.ambient-anchor{opacity:var(--ambient-opacity,.14)!important}
.ambient-floater img{width:100%;height:auto;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.42));}
.home-scroll,.about-scroll{position:relative;z-index:2}
.home-screen,.about-screen{background:transparent}

/* Master page choreography: no competing CSS transitions while JS drives page pieces. */
body.is-page-transitioning .hero-eyebrow,
body.is-page-transitioning #homeHeroTitle,
body.is-page-transitioning #homeHeroSubtitle,
body.is-page-transitioning .hero-actions,
body.is-page-transitioning .scroll-cue,
body.is-page-transitioning .center-screen-heading h2,
body.is-page-transitioning .center-screen-heading p,
body.is-page-transitioning .function-card,
body.is-page-transitioning .update-row,
body.is-page-transitioning .about-hero-copy>*,
body.is-page-transitioning .about-logo-stage,
body.is-page-transitioning .about-story-title>*,
body.is-page-transitioning .about-story-points article,
body.is-page-transitioning .about-flow-section header>*,
body.is-page-transitioning .flow-step,
body.is-page-transitioning .closing-copy>*,
body.is-page-transitioning .about-closing-section p,
body.is-page-transitioning .home-footer,
body.is-page-transitioning .about-footer{
  will-change:transform,opacity,filter;
  transition:none!important;
}
body.is-page-transitioning .function-card .function-visual img{transition:none!important}

/* Latest updates: one cohesive editorial board, three clear rows. */
.updates-heading{margin-bottom:34px}
.updates-list{
  width:min(1320px,100%);margin:auto;padding:0 28px;
  border:1px solid rgba(209,218,214,.96);border-radius:18px;
  background:rgba(255,255,255,.58);box-shadow:0 18px 54px rgba(28,42,45,.035);
  overflow:hidden;
}
.update-row{
  min-height:120px;display:grid;grid-template-columns:92px minmax(0,1fr) 220px 46px;
  align-items:center;gap:24px;padding:18px 6px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;box-shadow:none;position:relative;overflow:visible;
  transition:background var(--motion-ui) ease,padding-inline var(--motion-ui) var(--ease-soft);
}
.update-row:last-child{border-bottom:0}
.update-row::before{content:"";position:absolute;left:-28px;right:-28px;top:0;bottom:0;width:auto;height:auto;background:linear-gradient(90deg,rgba(237,243,243,.10),rgba(237,243,243,.58),rgba(255,255,255,.12));opacity:0;transform:translateX(-24px);transition:opacity var(--motion-ui) ease,transform var(--motion-ui) var(--ease-soft);z-index:0}
.update-row>*{position:relative;z-index:1}
.update-row:hover{padding-inline:12px;background:transparent;transform:none;box-shadow:none}
.update-row:hover::before{opacity:1;transform:translateX(0)}
.update-index{font-family:"Songti SC","STSong",SimSun,serif;font-size:34px;font-weight:700;letter-spacing:-.02em;color:rgba(40,86,106,.28);align-self:center;padding:0;transition:color var(--motion-ui) ease,transform var(--motion-ui) var(--ease-soft)}
.update-row:hover .update-index{color:var(--brand);transform:translateX(3px)}
.update-main{display:block;min-width:0}
.update-main h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:27px;line-height:1.35;margin:0 0 10px;color:#202728;transition:color var(--motion-fast) ease,transform var(--motion-ui) var(--ease-soft)}
.update-main p{font-size:14.5px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.update-row:hover .update-main h3{color:var(--brand);transform:translateX(2px)}
.update-meta{justify-self:end;display:grid;justify-items:end;gap:9px;min-width:0}
.update-category-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:650;white-space:nowrap}
.update-meta time{font:650 12.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8c9692;letter-spacing:.025em}
.update-arrow{justify-self:end;width:40px;height:40px}

/* Login left side: very light framing that makes the logo the only visual focus. */
.login-brand-panel{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.96) 0 19%,rgba(241,246,243,.72) 40%,rgba(239,243,239,.96) 72%),
    #f1f4f0;
}
.login-brand-panel::before{content:"";position:absolute;z-index:0;left:50%;top:44%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92) 0 48%,rgba(232,240,237,.46) 49% 62%,transparent 63%);box-shadow:0 0 0 1px rgba(40,86,106,.045)}
.login-brand-panel::after{content:"";position:absolute;z-index:0;left:50%;top:44%;width:430px;height:430px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(40,86,106,.08);box-shadow:0 0 0 28px rgba(255,255,255,.16),0 0 0 58px rgba(40,86,106,.018)}
.login-decor{z-index:0}
.login-decor img{opacity:.030!important;filter:none!important}
.login-decor img:nth-child(1){width:64px;right:10%;top:12%}
.login-decor img:nth-child(2){width:72px;left:9%;bottom:15%}
.login-decor img:nth-child(3){width:58px;right:11%;bottom:18%}
.login-decor img:nth-child(4){width:150px;left:4%;top:13%;opacity:.022!important}
.login-brand-content{z-index:2}
.login-logo-stage{width:266px;height:266px;margin-bottom:34px}
.login-logo-stage::before{content:"";position:absolute;inset:-38px;border-radius:50%;background:rgba(255,255,255,.70);box-shadow:0 24px 56px rgba(24,55,74,.07);z-index:0}
.login-logo-stage::after{content:"";position:absolute;inset:-17px;border:1px solid rgba(40,86,106,.09);border-radius:50%;z-index:1}
.login-logo-ring{inset:4px;border-color:rgba(40,86,106,.10);z-index:1}
.login-logo-ring::after{inset:18px;border-color:rgba(40,86,106,.08)}
.login-large-logo{width:202px;height:202px;z-index:3;filter:drop-shadow(0 12px 25px rgba(24,55,74,.09))}

@media (min-width:901px) and (max-height:840px){
  .intro-stage{width:520px;height:360px}
  .intro-logo-scene,.intro-logo-3d{width:282px;height:282px}
  .intro-logo-shadow{top:calc(50% + 143px);width:198px}
  .intro-brush{font-size:62px}.intro-block{font-size:40px}.intro-sub{font-size:16px;margin-top:10px}
  .updates-list{padding-inline:20px}.update-row{min-height:92px;grid-template-columns:68px minmax(0,1fr) 180px 40px;padding-block:11px}.update-index{font-size:28px}.update-main h3{font-size:22px;margin-bottom:6px}.update-main p{font-size:13px}
}

@media (max-width:900px){
  .header-brand-brush{font-size:27px}.header-brand-block{font-size:17px}
  .updates-list{padding-inline:18px}
  .update-row{grid-template-columns:64px minmax(0,1fr) 40px;min-height:104px;gap:16px}
  .update-meta{display:none}
  .update-index{font-size:28px}
}

@media (max-width:650px){
  .site-header .brand-name{gap:5px}.header-brand-brush{font-size:24px}.header-brand-block{font-size:15px}
  .intro-stage{width:350px;height:285px}.intro-logo-scene,.intro-logo-3d{width:216px;height:216px}.intro-logo-shadow{top:calc(50% + 110px);width:150px}
  .intro-brush{font-size:50px}.intro-block{font-size:31px}.intro-wordmark{gap:11px}.intro-sub{font-size:14px;letter-spacing:.16em}
  .updates-list{padding-inline:12px;border-radius:14px}
  .update-row{grid-template-columns:45px minmax(0,1fr) 34px;gap:10px;padding-block:13px;min-height:96px}
  .update-index{font-size:23px}.update-main h3{font-size:20px;margin-bottom:6px}.update-main p{font-size:12.5px}
  .update-arrow{width:34px;height:34px}
}


/* ===== V8 focused refinement: footer wordmark / stronger page choreography / updates / resources / page transitions / ambient ===== */

/* Footer brand uses the same artistic wordmark as the upper-left brand. */
.site-footer .brand-name{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  line-height:1;
  color:#173f58;
}
.site-footer .header-brand-brush{
  font-size:30px;
  letter-spacing:-.085em;
}
.site-footer .header-brand-block{
  font-size:19px;
}
.footer-links{
  gap:56px;
  font-size:22px;
  font-weight:550;
  letter-spacing:.015em;
}
.admin-link{
  font-size:20px;
}

/* Give the independently animated pieces a true spatial stage. */
.screen-stage,
.about-brand-grid,
.about-story-section,
.about-flow-section,
.about-closing-section{
  perspective:1200px;
}
.hero-eyebrow,
#homeHeroTitle,
#homeHeroSubtitle,
.hero-actions,
.scroll-cue,
.center-screen-heading h2,
.center-screen-heading p,
.function-card,
.update-row,
.about-hero-copy>*,
.about-logo-stage,
.about-story-title>*,
.about-story-points article,
.about-flow-section header>*,
.flow-step,
.closing-copy>*,
.about-closing-section p,
.home-footer,
.about-footer{
  transform-origin:center center;
  backface-visibility:hidden;
}
.function-card,
.update-row,
.flow-step,
.about-story-points article,
.about-logo-stage{
  transform-style:preserve-3d;
}

/* Latest updates: three independent editorial ribbons with stronger hierarchy. */
.updates-heading{
  margin-bottom:31px;
}
.updates-list{
  width:min(1330px,100%);
  margin:auto;
  padding:0;
  display:grid;
  gap:15px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.update-row{
  min-height:118px;
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 180px 46px;
  align-items:center;
  gap:25px;
  padding:17px 22px 17px 20px;
  border:1px solid rgba(207,217,213,.96);
  border-radius:17px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.84),rgba(250,252,249,.70) 62%,rgba(238,244,242,.58));
  box-shadow:0 8px 25px rgba(28,42,45,.035);
  overflow:hidden;
  position:relative;
  transition:
    transform 360ms var(--ease-soft),
    border-color 300ms ease,
    box-shadow 360ms ease,
    background 300ms ease;
}
.update-row:last-child{
  border-bottom:1px solid rgba(207,217,213,.96);
}
.update-row::before{
  content:"";
  position:absolute;
  left:0;top:16px;bottom:16px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,var(--brand),#79a8b5);
  opacity:.32;
  transform:scaleY(.56);
  transition:opacity 320ms ease,transform 360ms var(--ease-soft);
  z-index:1;
}
.update-row::after{
  content:"";
  position:absolute;
  width:190px;height:190px;
  right:-96px;top:-112px;
  border-radius:50%;
  border:1px solid rgba(40,86,106,.055);
  box-shadow:0 0 0 32px rgba(40,86,106,.018),0 0 0 64px rgba(40,86,106,.010);
  pointer-events:none;
  transition:transform 520ms var(--ease-soft),opacity 320ms ease;
  opacity:.8;
}
.update-row>*{
  position:relative;
  z-index:2;
}
.update-row:hover{
  padding:17px 22px 17px 20px;
  transform:translate3d(0,-6px,0) scale(1.007);
  border-color:#bccbc6;
  background:
    linear-gradient(110deg,rgba(255,255,255,.96),rgba(251,253,250,.88) 60%,rgba(235,243,240,.76));
  box-shadow:0 18px 42px rgba(27,45,48,.075);
}
.update-row:hover::before{
  width:3px;
  opacity:.9;
  transform:scaleY(1);
}
.update-row:hover::after{
  transform:translate3d(-18px,18px,0) scale(1.08);
  opacity:1;
}
.update-index{
  display:grid;
  justify-items:center;
  gap:4px;
  align-self:center;
  padding:0;
  color:var(--brand);
  transition:transform 360ms var(--ease-soft),color 260ms ease;
}
.update-index b{
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:35px;
  line-height:.92;
  font-weight:700;
  letter-spacing:-.035em;
  color:rgba(40,86,106,.52);
}
.update-index small{
  font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
  color:#b48729;
}
.update-row:hover .update-index{
  transform:translate3d(4px,-1px,0);
}
.update-row:hover .update-index b{
  color:var(--brand);
}
.update-main{
  min-width:0;
  display:block;
}
.update-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
  color:#7d8985;
  font-size:12px;
  font-weight:650;
  letter-spacing:.08em;
}
.update-kicker::before{
  content:"";
  width:16px;height:1px;
  background:rgba(40,86,106,.42);
}
.update-main h3{
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:27px;
  line-height:1.28;
  margin:0 0 8px;
  color:#1d2425;
  transition:color 250ms ease,transform 360ms var(--ease-soft);
}
.update-main p{
  font-size:14px;
  color:#74807c;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.update-row:hover .update-main h3{
  color:var(--brand);
  transform:translate3d(4px,0,0);
}
.update-meta{
  justify-self:end;
  display:grid;
  justify-items:end;
  gap:7px;
  min-width:0;
}
.update-meta time{
  font:700 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#52625d;
  letter-spacing:.02em;
}
.update-meta span{
  font-size:12px;
  color:#9aa29f;
  letter-spacing:.06em;
}
.update-arrow{
  width:40px;
  height:40px;
  justify-self:end;
  background:rgba(255,255,255,.72);
}
.update-row:hover .update-arrow{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  transform:translate3d(3px,0,0) scale(1.04);
}

/* Resource cards: remove the old arrow and make the whole card visibly respond. */
.resource-arrow{
  display:none!important;
}
.resource-card{
  position:relative;
  transform-origin:center bottom;
  transition:
    transform 380ms var(--ease-soft),
    filter 320ms ease;
  will-change:transform;
}
.resource-thumb{
  position:relative;
  isolation:isolate;
  transition:
    transform 380ms var(--ease-soft),
    border-color 300ms ease,
    box-shadow 380ms ease;
}
.resource-thumb::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:-45% auto -45% -34%;
  width:30%;
  transform:skewX(-18deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  opacity:0;
  pointer-events:none;
  transition:transform 600ms var(--ease-soft),opacity 260ms ease;
}
.resource-body{
  transition:transform 380ms var(--ease-soft);
}
.resource-title{
  transition:color 250ms ease,transform 340ms var(--ease-soft);
}
.resource-meta{
  justify-content:flex-start;
}
.resource-meta>span:first-child{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0;
  border-radius:999px;
  transition:
    color 250ms ease,
    background 300ms ease,
    padding 340ms var(--ease-soft);
}
.resource-card:hover{
  transform:translate3d(0,-10px,0) scale(1.014);
}
.resource-card:hover .resource-thumb{
  transform:translate3d(0,-2px,0);
  border-color:#aebfba;
  box-shadow:0 20px 42px rgba(27,44,47,.105);
}
.resource-card:hover .resource-thumb img{
  transform:scale(1.055);
}
.resource-card:hover .resource-thumb::after{
  opacity:.55;
  transform:skewX(-18deg) translateX(560%);
}
.resource-card:hover .resource-body{
  transform:translate3d(0,-3px,0);
}
.resource-card:hover .resource-title{
  color:var(--brand);
  transform:translate3d(2px,0,0);
}
.resource-card:hover .resource-meta>span:first-child{
  padding:3px 9px;
  background:var(--brand-soft);
  color:var(--brand);
}

/* Background icons now visibly wander instead of barely oscillating. */
.ambient-anchor{
  opacity:calc(var(--ambient-opacity,.16) + .035)!important;
}
.ambient-floater{
  animation-direction:normal!important;
  animation-timing-function:cubic-bezier(.45,.05,.55,.95)!important;
}
.drift-1{--drift-duration:15s}
.drift-2{--drift-duration:18s}
.drift-3{--drift-duration:16.5s}
.drift-4{--drift-duration:20s}
.drift-5{--drift-duration:17s}
.drift-6{--drift-duration:19s}
@keyframes driftOne{
  0%{transform:translate3d(-10px,12px,0) rotate(-1.2deg)}
  24%{transform:translate3d(34px,-26px,0) rotate(3deg)}
  52%{transform:translate3d(15px,35px,0) rotate(-1.6deg)}
  77%{transform:translate3d(-31px,-9px,0) rotate(2.2deg)}
  100%{transform:translate3d(-10px,12px,0) rotate(-1.2deg)}
}
@keyframes driftTwo{
  0%{transform:translate3d(17px,-15px,0) rotate(1.1deg)}
  28%{transform:translate3d(-28px,27px,0) rotate(-2.6deg)}
  54%{transform:translate3d(31px,17px,0) rotate(2deg)}
  80%{transform:translate3d(-18px,-33px,0) rotate(-1.5deg)}
  100%{transform:translate3d(17px,-15px,0) rotate(1.1deg)}
}
@keyframes driftThree{
  0%{transform:translate3d(-18px,-7px,0) rotate(-1deg)}
  23%{transform:translate3d(26px,32px,0) rotate(2.4deg)}
  50%{transform:translate3d(39px,-18px,0) rotate(-2deg)}
  74%{transform:translate3d(-29px,18px,0) rotate(1.7deg)}
  100%{transform:translate3d(-18px,-7px,0) rotate(-1deg)}
}
@keyframes driftFour{
  0%{transform:translate3d(13px,21px,0) rotate(1.3deg)}
  26%{transform:translate3d(-37px,-18px,0) rotate(-2.1deg)}
  49%{transform:translate3d(-6px,37px,0) rotate(2.7deg)}
  75%{transform:translate3d(33px,-28px,0) rotate(-1.8deg)}
  100%{transform:translate3d(13px,21px,0) rotate(1.3deg)}
}
@keyframes driftFive{
  0%{transform:translate3d(-7px,18px,0) rotate(-1.4deg)}
  22%{transform:translate3d(38px,4px,0) rotate(2deg)}
  48%{transform:translate3d(12px,-35px,0) rotate(-2.8deg)}
  76%{transform:translate3d(-34px,24px,0) rotate(1.4deg)}
  100%{transform:translate3d(-7px,18px,0) rotate(-1.4deg)}
}
@keyframes driftSix{
  0%{transform:translate3d(21px,8px,0) rotate(1deg)}
  25%{transform:translate3d(-22px,-34px,0) rotate(-2.4deg)}
  51%{transform:translate3d(-38px,16px,0) rotate(2.1deg)}
  78%{transform:translate3d(29px,31px,0) rotate(-1.7deg)}
  100%{transform:translate3d(21px,8px,0) rotate(1deg)}
}

/* Cross-page transition: a light brand curtain, never a dark full-screen flash. */
.page-transition-curtain{
  position:fixed;
  z-index:12000;
  inset:0;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-105%,0,0);
  overflow:hidden;
  background:
    linear-gradient(110deg,#eef4f1 0%,#f7f7f3 46%,#edf3f3 100%);
  box-shadow:18px 0 44px rgba(29,52,59,.055);
  will-change:transform,opacity;
}
.page-transition-curtain::before{
  content:"";
  position:absolute;
  left:8%;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(40,86,106,.24),transparent);
}
.page-transition-curtain::after{
  content:"";
  position:absolute;
  right:11%;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,transparent,rgba(217,166,47,.12),rgba(40,86,106,.16),transparent);
  opacity:.75;
}
.page-transition-curtain>span{
  position:absolute;
  width:360px;height:360px;
  border-radius:50%;
  right:17%;top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(40,86,106,.08);
  box-shadow:0 0 0 55px rgba(40,86,106,.018),0 0 0 110px rgba(40,86,106,.010);
}
.page-transition-curtain>i{
  position:absolute;
  left:22%;top:50%;
  width:230px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(40,86,106,.22),transparent);
}

@media (min-width:901px) and (max-height:840px){
  .update-row{
    min-height:92px;
    grid-template-columns:72px minmax(0,1fr) 155px 40px;
    padding:12px 17px;
    gap:18px;
  }
  .update-row:hover{padding:12px 17px}
  .update-index b{font-size:28px}
  .update-main h3{font-size:22px;margin-bottom:5px}
  .update-kicker{margin-bottom:4px}
  .update-main p{font-size:12.8px}
  .update-meta time{font-size:11.5px}
  .footer-links{font-size:20px}
}

@media (max-width:900px){
  .site-footer .header-brand-brush{font-size:27px}
  .site-footer .header-brand-block{font-size:17px}
  .update-row{
    grid-template-columns:62px minmax(0,1fr) 40px;
    min-height:106px;
    padding:14px 16px;
    gap:16px;
  }
  .update-row:hover{padding:14px 16px}
  .update-meta{display:none}
  .update-index b{font-size:29px}
}

@media (max-width:650px){
  .site-footer .brand-name{gap:5px}
  .site-footer .header-brand-brush{font-size:24px}
  .site-footer .header-brand-block{font-size:15px}
  .update-row{
    grid-template-columns:45px minmax(0,1fr) 34px;
    min-height:96px;
    padding:13px 12px;
    gap:10px;
  }
  .update-row:hover{padding:13px 12px}
  .update-index b{font-size:23px}
  .update-index small{font-size:8px}
  .update-main h3{font-size:20px}
  .update-main p{font-size:12.5px}
  .update-kicker{font-size:10.5px}
}


/* ===== V9 focused refinement: native page transitions / larger ambient travel / tree interaction / admin grouped resources / initial reveals ===== */

/* Native cross-document transitions for same-origin pages. Older browsers use the JS fallback. */
@view-transition{
  navigation:none;
}
.site-header{
  view-transition-name:mx-site-header;
}
::view-transition-group(root){
  animation-duration:420ms;
  animation-timing-function:cubic-bezier(.22,.72,.18,1);
}
::view-transition-old(root){
  animation:mxPageOld 300ms cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
  animation:mxPageNew 430ms cubic-bezier(.16,1,.3,1) both;
}
::view-transition-group(mx-site-header){
  animation-duration:360ms;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
::view-transition-old(mx-site-header),
::view-transition-new(mx-site-header){
  animation-duration:360ms;
}
@keyframes mxPageOld{
  from{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  to{opacity:.18;transform:translate3d(0,-9px,0) scale(.996);filter:blur(1.4px)}
}
@keyframes mxPageNew{
  from{opacity:.16;transform:translate3d(0,12px,0) scale(.996);filter:blur(1.3px)}
  64%{opacity:.92;transform:translate3d(0,1px,0) scale(.9995);filter:blur(.15px)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}

/* Home entrance: title letters visibly drop in one by one before their continuous float resumes. */
.hero-title-art.hero-await-drop .hero-glyph-layout{
  opacity:0;
}
.hero-stage.is-awaiting-hero-drop .hero-eyebrow,
.hero-stage.is-awaiting-hero-drop #homeHeroSubtitle,
.hero-stage.is-awaiting-hero-drop .hero-actions{
  opacity:0;
}
.hero-title-art.is-hero-dropping .hero-glyph-float{
  animation-play-state:paused;
}

/* About logo gets a clean 3D spin when its page enters. */
.about-logo-stage,
.about-logo-float,
.about-logo-float img{
  transform-style:preserve-3d;
}
.about-logo-float img{
  transform-origin:50% 50%;
  backface-visibility:visible;
  will-change:transform,filter;
}

/* Background teaching/physics elements now roam over a clearly larger area. */
.ambient-anchor{
  opacity:calc(var(--ambient-opacity,.16) + .055)!important;
}
.ambient-floater{
  animation-duration:var(--drift-duration,26s)!important;
  animation-timing-function:cubic-bezier(.46,.04,.54,.96)!important;
  animation-iteration-count:infinite!important;
  animation-direction:normal!important;
}
.ambient-floater img{
  filter:contrast(1.04) saturate(.88);
}
.drift-1{--drift-duration:24s}
.drift-2{--drift-duration:29s}
.drift-3{--drift-duration:26s}
.drift-4{--drift-duration:31s}
.drift-5{--drift-duration:27s}
.drift-6{--drift-duration:30s}
@keyframes driftOne{
  0%{transform:translate3d(-36px,34px,0) rotate(-2deg)}
  18%{transform:translate3d(102px,-74px,0) rotate(6deg)}
  39%{transform:translate3d(154px,22px,0) rotate(-3deg)}
  61%{transform:translate3d(48px,112px,0) rotate(5deg)}
  82%{transform:translate3d(-118px,56px,0) rotate(-5deg)}
  100%{transform:translate3d(-36px,34px,0) rotate(-2deg)}
}
@keyframes driftTwo{
  0%{transform:translate3d(52px,-42px,0) rotate(2deg)}
  20%{transform:translate3d(-126px,-92px,0) rotate(-6deg)}
  42%{transform:translate3d(-166px,44px,0) rotate(4deg)}
  64%{transform:translate3d(-22px,126px,0) rotate(-3deg)}
  83%{transform:translate3d(132px,72px,0) rotate(6deg)}
  100%{transform:translate3d(52px,-42px,0) rotate(2deg)}
}
@keyframes driftThree{
  0%{transform:translate3d(-58px,-24px,0) rotate(-3deg)}
  19%{transform:translate3d(72px,104px,0) rotate(5deg)}
  41%{transform:translate3d(166px,58px,0) rotate(-5deg)}
  63%{transform:translate3d(118px,-98px,0) rotate(4deg)}
  82%{transform:translate3d(-84px,-126px,0) rotate(-6deg)}
  100%{transform:translate3d(-58px,-24px,0) rotate(-3deg)}
}
@keyframes driftFour{
  0%{transform:translate3d(34px,68px,0) rotate(3deg)}
  21%{transform:translate3d(-142px,104px,0) rotate(-5deg)}
  43%{transform:translate3d(-176px,-24px,0) rotate(6deg)}
  65%{transform:translate3d(-56px,-132px,0) rotate(-4deg)}
  84%{transform:translate3d(138px,-86px,0) rotate(5deg)}
  100%{transform:translate3d(34px,68px,0) rotate(3deg)}
}
@keyframes driftFive{
  0%{transform:translate3d(-26px,56px,0) rotate(-2deg)}
  20%{transform:translate3d(118px,124px,0) rotate(5deg)}
  42%{transform:translate3d(174px,-8px,0) rotate(-6deg)}
  63%{transform:translate3d(62px,-132px,0) rotate(4deg)}
  83%{transform:translate3d(-136px,-78px,0) rotate(-5deg)}
  100%{transform:translate3d(-26px,56px,0) rotate(-2deg)}
}
@keyframes driftSix{
  0%{transform:translate3d(64px,18px,0) rotate(2deg)}
  18%{transform:translate3d(-88px,-126px,0) rotate(-5deg)}
  40%{transform:translate3d(-172px,-28px,0) rotate(6deg)}
  62%{transform:translate3d(-92px,116px,0) rotate(-4deg)}
  82%{transform:translate3d(128px,102px,0) rotate(5deg)}
  100%{transform:translate3d(64px,18px,0) rotate(2deg)}
}

/* Resource sidebar: selection, expansion and hierarchy now visibly animate. */
.resource-sidebar{
  scroll-behavior:smooth;
}
.tree-collapse{
  transition:grid-template-rows 420ms cubic-bezier(.22,.72,.18,1),opacity 300ms ease!important;
}
.tree-collapse>div{
  opacity:0;
  transform:translate3d(0,-13px,0) scale(.985);
  filter:blur(1px);
  transform-origin:top center;
  transition:
    opacity 310ms ease,
    transform 430ms cubic-bezier(.16,1,.3,1),
    filter 280ms ease;
}
.tree-book.is-expanded>.tree-units>div,
.tree-unit-group.is-expanded>.tree-lessons>div{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.tree-chevron span,
.tree-unit-chevron span{
  transition:transform 360ms cubic-bezier(.2,.9,.2,1),color 260ms ease!important;
}
.tree-book-row,
.tree-unit-row{
  transition:background 260ms ease;
}
.tree-book:hover>.tree-book-row{
  background:rgba(243,247,244,.58);
}
.tree-book-select,
.tree-unit,
.tree-lesson,
.category-item{
  position:relative;
  overflow:hidden;
  transition:
    background 260ms ease,
    color 260ms ease,
    border-color 260ms ease,
    transform 210ms cubic-bezier(.16,1,.3,1),
    padding-left 300ms cubic-bezier(.16,1,.3,1)!important;
}
.tree-book-select:active,
.tree-unit:active,
.tree-lesson:active,
.category-item:active{
  transform:scale(.985);
}
.tree-book-select.is-selected{
  color:var(--brand);
  background:linear-gradient(90deg,rgba(237,243,243,.92),rgba(237,243,243,.22));
  padding-left:10px;
}
.tree-unit.is-selected,
.tree-lesson.is-selected,
.category-item.is-selected{
  box-shadow:inset 3px 0 0 var(--brand);
}
.tree-unit.is-selected{padding-left:14px}
.tree-lesson.is-selected{padding-left:20px}
.category-item.is-selected{padding-left:28px}
.tree-book-select.is-selected::after,
.tree-unit.is-selected::after,
.tree-lesson.is-selected::after,
.category-item.is-selected::after{
  content:"";
  position:absolute;
  right:10px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--brand);
  opacity:.42;
  animation:treeSelectionDot 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes treeSelectionDot{
  from{transform:scale(0);opacity:0}
  65%{transform:scale(1.35);opacity:.62}
  to{transform:scale(1);opacity:.42}
}

/* Admin sidebar brand uses the exact same blue/gold pair as the public brand. */
.admin-brand .header-brand-brush i:first-child{
  color:#173f58!important;
}
.admin-brand .header-brand-brush .gold{
  color:var(--brand-gold)!important;
}
.admin-brand .header-brand-block{
  color:#173f58!important;
}

/* Admin resources: grouped card browser instead of a long flat table. */
.admin-resource-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin:0 0 18px;
}
.admin-resource-overview article{
  min-height:92px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.72);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:end;
  box-shadow:0 5px 18px rgba(28,42,45,.025);
}
.admin-resource-overview span{
  color:#7d8884;
  font-size:12px;
  letter-spacing:.05em;
}
.admin-resource-overview strong{
  grid-row:1/3;
  grid-column:2;
  align-self:center;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:34px;
  color:var(--brand);
}
.admin-resource-overview small{
  color:#9aa29f;
  font-size:11.5px;
}
.admin-resource-modes{
  display:inline-flex;
  gap:5px;
  padding:5px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.70);
}
.admin-resource-modes button{
  height:40px;
  padding:0 17px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#697570;
  cursor:pointer;
  transition:background 240ms ease,color 240ms ease,transform 210ms cubic-bezier(.16,1,.3,1);
}
.admin-resource-modes button:hover{
  background:#f0f3ef;
}
.admin-resource-modes button:active{
  transform:scale(.97);
}
.admin-resource-modes button.active{
  background:var(--brand);
  color:#fff;
  box-shadow:0 5px 13px rgba(40,86,106,.11);
}
.admin-resource-groups{
  display:grid;
  gap:22px;
}
.admin-resource-group{
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.66);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(28,42,45,.025);
}
.admin-resource-group-head{
  min-height:72px;
  padding:15px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#fafbf8,rgba(240,244,241,.62));
}
.admin-resource-group-head>div{
  display:grid;
  gap:3px;
}
.admin-resource-group-head span{
  font-size:10.5px;
  color:#8a9591;
  letter-spacing:.14em;
}
.admin-resource-group-head h2{
  margin:0;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:24px;
}
.admin-resource-group-head em{
  font-style:normal;
  color:#7a8581;
  font-size:13px;
}
.admin-resource-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:17px;
}
.admin-resource-card{
  min-width:0;
  border:1px solid #e0e5e1;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  transition:
    transform 300ms cubic-bezier(.16,1,.3,1),
    border-color 260ms ease,
    box-shadow 300ms ease;
}
.admin-resource-card:hover,
.admin-resource-card:focus-visible{
  transform:translate3d(0,-5px,0);
  border-color:#bdcbc6;
  box-shadow:0 14px 30px rgba(28,42,45,.075);
}
.admin-resource-cover{
  height:124px;
  overflow:hidden;
  background:#eef2ef;
  border-bottom:1px solid var(--line);
}
.admin-resource-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 380ms cubic-bezier(.16,1,.3,1);
}
.admin-resource-card:hover .admin-resource-cover img{
  transform:scale(1.035);
}
.admin-resource-card-body{
  padding:14px 15px 13px;
}
.admin-resource-card-top,
.admin-resource-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.admin-resource-card-top time{
  color:#929b98;
  font-size:11.5px;
}
.admin-resource-card h3{
  margin:12px 0 7px;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:20px;
  line-height:1.35;
}
.admin-resource-card p{
  margin:0;
  color:#7a8581;
  font-size:12.5px;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.admin-resource-card-foot{
  margin-top:13px;
  padding-top:10px;
  border-top:1px solid #edf0ed;
}
.admin-resource-card-foot>span{
  color:#5e6a66;
  font-size:12px;
}
.admin-resource-card-foot button{
  border:0;
  background:transparent;
  color:var(--brand);
  cursor:pointer;
  padding:4px 5px;
  font-size:12.5px;
}
.admin-resource-empty{
  padding:70px 20px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.65);
}
.admin-resource-empty strong{
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:24px;
}
.admin-resource-empty p{
  color:var(--muted);
}
.resource-cover-field .image-input-row{
  align-items:center;
}
#autoCaptureCoverButton[disabled]{
  opacity:.58;
  cursor:wait;
}
.drawer-cover-preview{
  aspect-ratio:16/10;
  object-fit:cover;
}

/* Preserve the improved grouped resource management layout on medium screens. */
@media (max-width:1350px){
  .admin-resource-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1050px){
  .admin-resource-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .admin-resource-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:650px){
  .admin-resource-overview{grid-template-columns:1fr 1fr}
  .admin-resource-card-grid{grid-template-columns:1fr}
  .admin-resource-modes{display:flex;overflow:auto;width:100%}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(mx-site-header),
  ::view-transition-new(mx-site-header){
    animation-duration:.001ms!important;
  }
}


/* ===== V10 focused refinement: login brand / layered ambient decoration / arrows / stronger section choreography ===== */

/* Management login brand: exactly mirror the blue + gold public wordmark. */
.login-brand-lockup .login-brush{
  display:inline-flex;
  align-items:baseline;
  gap:.015em;
}
.login-brand-lockup .login-brush i{
  display:inline-block;
  font-style:normal;
  color:#173f58;
}
.login-brand-lockup .login-brush i:first-child{
  transform:rotate(-1.8deg) translateY(-1px);
}
.login-brand-lockup .login-brush i.gold{
  color:var(--brand-gold);
  transform:rotate(1.2deg) translateY(2px);
}
.login-brand-lockup strong{
  color:#173f58;
}

/* A second ambient layer: small marks, dots, formula fragments and measuring ticks. */
.physics-ambient::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 18% 28%,rgba(40,86,106,.13) 0 1px,transparent 1.6px),
    radial-gradient(circle at 74% 65%,rgba(217,166,47,.11) 0 1px,transparent 1.6px),
    linear-gradient(115deg,transparent 0 42%,rgba(40,86,106,.035) 42.1% 42.25%,transparent 42.35% 100%);
  background-size:74px 74px,96px 96px,100% 100%;
  opacity:.50;
  mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.physics-ambient::after{
  content:"";
  position:absolute;
  left:12%;
  right:10%;
  top:18%;
  height:1px;
  transform:rotate(-8deg);
  background:linear-gradient(90deg,transparent,rgba(40,86,106,.10) 25%,rgba(217,166,47,.08) 52%,rgba(40,86,106,.07) 78%,transparent);
  opacity:.8;
  pointer-events:none;
}
.ambient-ornaments{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ambient-line{
  position:absolute;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(40,86,106,.21),transparent);
  opacity:.42;
  animation:ambientLineDrift 18s ease-in-out infinite alternate;
}
.ambient-line.line-a{width:150px;left:20%;top:23%;transform:rotate(19deg);animation-delay:-3s}
.ambient-line.line-b{width:112px;right:20%;top:58%;transform:rotate(-17deg);animation-delay:-8s}
.ambient-line.line-c{width:92px;left:47%;bottom:19%;transform:rotate(7deg);animation-delay:-12s}
@keyframes ambientLineDrift{
  to{translate:34px -28px;opacity:.65}
}
.ambient-dot{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:#668895;
  opacity:.24;
  box-shadow:0 0 0 5px rgba(102,136,149,.035);
  animation:ambientDotWander 13s ease-in-out infinite alternate;
}
.ambient-dot.dot-1{left:9%;top:33%;animation-delay:-2s}
.ambient-dot.dot-2{left:33%;top:18%;animation-delay:-7s}
.ambient-dot.dot-3{left:57%;top:29%;animation-delay:-10s}
.ambient-dot.dot-4{right:8%;top:70%;animation-delay:-4s}
.ambient-dot.dot-5{left:29%;bottom:11%;animation-delay:-9s}
.ambient-dot.dot-6{right:29%;bottom:18%;animation-delay:-12s}
@keyframes ambientDotWander{
  to{transform:translate3d(52px,-38px,0) scale(1.18);opacity:.46}
}
.ambient-formula{
  position:absolute;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  letter-spacing:.05em;
  color:#567987;
  opacity:.16;
  animation:ambientFormula 21s ease-in-out infinite alternate;
}
.ambient-formula.formula-a{left:13%;top:64%;transform:rotate(-7deg);animation-delay:-6s}
.ambient-formula.formula-b{right:18%;top:24%;transform:rotate(8deg);animation-delay:-13s}
.ambient-formula.formula-c{left:54%;top:12%;font-family:"Times New Roman",serif;font-size:20px;animation-delay:-9s}
@keyframes ambientFormula{
  to{translate:46px 34px;rotate:2deg;opacity:.30}
}
.ambient-ticks{
  position:absolute;
  width:94px;height:12px;
  opacity:.15;
  background:repeating-linear-gradient(90deg,rgba(40,86,106,.7) 0 1px,transparent 1px 10px);
  border-bottom:1px solid rgba(40,86,106,.38);
  animation:ambientTicks 24s ease-in-out infinite alternate;
}
.ambient-ticks.ticks-a{left:7%;top:83%;transform:rotate(-12deg);animation-delay:-5s}
.ambient-ticks.ticks-b{right:7%;top:40%;width:72px;transform:rotate(17deg);animation-delay:-14s}
@keyframes ambientTicks{
  to{translate:-38px -28px;rotate:3deg;opacity:.27}
}

/* Public CTA arrow: a lighter capsule-track rather than a generic circular icon. */
.motion-arrow{
  width:46px;
  height:32px;
  flex:0 0 46px;
  border-radius:999px;
  border:1px solid rgba(40,86,106,.26);
  background:rgba(255,255,255,.52);
  overflow:hidden;
  position:relative;
  transition:
    transform 320ms cubic-bezier(.16,1,.3,1),
    width 320ms cubic-bezier(.16,1,.3,1),
    background 260ms ease,
    border-color 260ms ease,
    color 260ms ease;
}
.motion-arrow::before{
  content:"";
  position:absolute;
  left:8px;right:8px;top:50%;
  height:1px;
  background:rgba(40,86,106,.10);
  transform:translateY(-50%);
}
.motion-arrow svg{
  width:27px;
  height:18px;
  z-index:1;
  position:relative;
  stroke-width:1.65;
  transition:transform 320ms cubic-bezier(.16,1,.3,1);
}
.hero-action.primary .motion-arrow,
.hero-action.secondary .motion-arrow{
  width:43px;height:30px;flex-basis:43px;
}
.hero-action.primary .motion-arrow::before{
  background:rgba(255,255,255,.12);
}
.hero-action:hover .motion-arrow,
.function-card:hover .motion-arrow,
.update-row:hover .motion-arrow{
  width:52px;
  transform:translateX(2px);
}
.hero-action:hover .motion-arrow svg,
.function-card:hover .motion-arrow svg,
.update-row:hover .motion-arrow svg{
  transform:translateX(4px);
}

/* Scroll cue: custom drawn arrow with a smooth track. */
.scroll-cue{
  gap:10px;
}
.scroll-cue-icon{
  width:30px;height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(40,86,106,.18);
  border-radius:999px;
  background:rgba(255,255,255,.35);
  animation:cueFloat 2s cubic-bezier(.45,.05,.55,.95) infinite;
}
.scroll-cue-icon svg{
  width:22px;height:27px;
  fill:none;stroke:#65818a;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round;
}
@keyframes cueFloat{
  0%,100%{transform:translateY(0)}
  52%{transform:translateY(6px)}
}

/* Resource tree chevron: replace the old › character with a proper line icon. */
.tree-chevron,
.tree-unit-chevron{
  transition:background 240ms ease,color 240ms ease,transform 220ms cubic-bezier(.16,1,.3,1);
}
.tree-chevron:hover,
.tree-unit-chevron:hover{
  background:rgba(40,86,106,.055);
  color:var(--brand);
}
.tree-chevron:active,
.tree-unit-chevron:active{
  transform:scale(.91);
}
.tree-chevron-icon{
  width:25px;height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:
    transform 380ms cubic-bezier(.2,.9,.2,1),
    background 250ms ease;
}
.tree-chevron-icon svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.tree-book.is-expanded>.tree-book-row .tree-chevron-icon,
.tree-unit-group.is-expanded>.tree-unit-row .tree-chevron-icon{
  transform:rotate(90deg);
  background:rgba(40,86,106,.06);
}
/* Neutralize the legacy span rotation rule when the new icon is present. */
.tree-chevron>.tree-chevron-icon,
.tree-unit-chevron>.tree-chevron-icon{font-size:0}

/* Management login arrows: same thin-line language as the public site. */
.login-back{
  gap:9px;
  color:#667671;
  transition:color 240ms ease,transform 280ms cubic-bezier(.16,1,.3,1);
}
.login-back:hover{
  color:var(--brand);
  transform:translateX(-3px);
}
.login-back-arrow{
  width:30px;height:30px;
  border:1px solid rgba(40,86,106,.18);
  border-radius:50%;
  display:grid;
  place-items:center;
}
.login-back-arrow svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.login-submit{
  justify-content:center;
  gap:18px;
}
.login-submit-arrow{
  width:43px;height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08);
  transition:transform 300ms cubic-bezier(.16,1,.3,1),background 250ms ease;
}
.login-submit-arrow svg{
  width:25px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
}
.login-submit:hover .login-submit-arrow{
  transform:translateX(4px);
  background:rgba(255,255,255,.14);
}

/* Admin reorder arrow buttons: reduce the raw text-arrow feeling. */
.admin-node-actions button,
.mini-actions button,
.nav-order-actions button{
  min-width:30px;
  min-height:30px;
  border-radius:8px;
  display:inline-grid;
  place-items:center;
  transition:background 220ms ease,color 220ms ease,transform 180ms cubic-bezier(.16,1,.3,1);
}
.admin-node-actions button:hover,
.mini-actions button:hover,
.nav-order-actions button:hover{
  background:#edf3f0;
  color:var(--brand);
}
.admin-node-actions button:active,
.mini-actions button:active,
.nav-order-actions button:active{
  transform:scale(.90);
}

/* Make the section-level element choreography visually distinct from the page slide. */
body.is-page-transitioning .function-card,
body.is-page-transitioning .update-row,
body.is-page-transitioning .flow-step,
body.is-page-transitioning .about-story-points article{
  box-shadow:0 14px 35px rgba(28,42,45,.035);
}
body.is-page-transitioning .center-screen-heading h2,
body.is-page-transitioning .about-hero-copy h1,
body.is-page-transitioning .about-story-title h2,
body.is-page-transitioning .about-flow-section h2{
  transform-origin:50% 70%;
}
.screen-stage,
.about-brand-grid,
.about-story-section,
.about-flow-section{
  perspective:1350px;
  perspective-origin:50% 44%;
}

@media (max-width:900px){
  .physics-ambient::before{opacity:.33}
  .ambient-formula,.ambient-ticks{opacity:.11}
  .motion-arrow{width:42px;height:30px;flex-basis:42px}
}
@media (max-width:650px){
  .ambient-line,.ambient-formula,.ambient-ticks{display:none}
}


/* ===== V11 focused refinement: restrained static image backdrops for emptier pages ===== */

/* Give selected emptier screens a gentle, static picture-backed atmosphere.
   These are intentionally light and layered under content only. */
.hero-screen,
.updates-screen,
.closing-screen,
.about-brand-section,
.about-story-screen,
.about-flow-screen,
.about-closing-screen,
.resource-content,
.resource-sidebar,
.resource-main{
  position:relative;
  isolation:isolate;
}
.hero-screen > *,
.updates-screen > *,
.closing-screen > *,
.about-brand-section > *,
.about-story-screen > *,
.about-flow-screen > *,
.about-closing-screen > *,
.resource-content > *,
.resource-sidebar > *,
.resource-main > *{
  position:relative;
  z-index:1;
}

/* Common soft panel language */
.hero-screen::before,
.updates-screen::before,
.closing-screen::before,
.about-brand-section::before,
.about-story-screen::before,
.about-flow-screen::before,
.about-closing-screen::before,
.resource-content::before,
.resource-sidebar::before,
.resource-main::before,
.hero-screen::after,
.updates-screen::after,
.closing-screen::after,
.about-brand-section::after,
.about-story-screen::after,
.about-flow-screen::after,
.about-closing-screen::after,
.resource-content::after,
.resource-sidebar::after,
.resource-main::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:1;
}

/* Home hero: a pale teaching/physics collage in the empty right/top space */
.hero-screen::before{
  right:5%;
  top:10%;
  width:min(34vw,500px);
  height:min(36vw,460px);
  opacity:.14;
  background-image:
    url("assets/decor/book.svg"),
    url("assets/decor/magnet.svg"),
    url("assets/decor/wave.svg"),
    radial-gradient(circle at 64% 34%, rgba(255,255,255,.82) 0 34%, rgba(255,255,255,.26) 58%, transparent 78%);
  background-repeat:no-repeat;
  background-size:170px auto, 118px auto, 280px auto, 100% 100%;
  background-position:16% 72%, 72% 14%, 40% 42%, center;
  filter:saturate(.78) contrast(.96);
}
.hero-screen::after{
  left:4%;
  bottom:8%;
  width:240px;
  height:240px;
  opacity:.10;
  background:
    url("assets/decor/orbit.svg") center/contain no-repeat,
    radial-gradient(circle at center, rgba(255,255,255,.74), transparent 72%);
  transform:rotate(-10deg);
}

/* Updates page: an editorial backdrop with restrained scientific marks */
.updates-screen::before{
  left:5%;
  top:12%;
  width:min(32vw,420px);
  height:min(28vw,320px);
  opacity:.11;
  background-image:
    url("assets/decor/vector.svg"),
    url("assets/decor/axis.svg"),
    url("assets/decor/ruler.svg"),
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.74), transparent 70%);
  background-repeat:no-repeat;
  background-size:150px auto, 95px auto, 170px auto, 100% 100%;
  background-position:12% 32%, 64% 14%, 30% 88%, center;
  transform:rotate(-5deg);
}
.updates-screen::after{
  right:4%;
  bottom:8%;
  width:min(28vw,360px);
  height:min(26vw,320px);
  opacity:.10;
  background-image:
    url("assets/decor/prism.svg"),
    url("assets/decor/lens.svg"),
    radial-gradient(circle at 58% 48%, rgba(255,255,255,.76), transparent 72%);
  background-repeat:no-repeat;
  background-size:115px auto, 105px auto, 100% 100%;
  background-position:16% 18%, 74% 72%, center;
}

/* Closing page: softer and calmer picture-like watermark */
.closing-screen::before{
  right:10%;
  top:16%;
  width:min(30vw,380px);
  height:min(30vw,360px);
  opacity:.12;
  background-image:
    url("assets/decor/pendulum.svg"),
    url("assets/decor/spring.svg"),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.80), rgba(255,255,255,.18) 58%, transparent 78%);
  background-repeat:no-repeat;
  background-size:118px auto, 134px auto, 100% 100%;
  background-position:22% 18%, 64% 68%, center;
}
.closing-screen::after{
  left:8%;
  top:18%;
  width:190px;
  height:190px;
  opacity:.08;
  background:url("assets/decor/orbit.svg") center/contain no-repeat;
  transform:rotate(18deg);
}

/* About pages: one pale themed image cluster per screen */
.about-brand-section::before{
  left:5%;
  top:18%;
  width:min(30vw,370px);
  height:min(28vw,320px);
  opacity:.10;
  background-image:
    url("assets/decor/book.svg"),
    url("assets/decor/wave.svg"),
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.74), transparent 74%);
  background-repeat:no-repeat;
  background-size:126px auto, 210px auto, 100% 100%;
  background-position:18% 20%, 54% 70%, center;
}
.about-brand-section::after{
  right:6%;
  bottom:10%;
  width:250px;
  height:250px;
  opacity:.08;
  background:url("assets/decor/orbit.svg") center/contain no-repeat;
}

.about-story-screen::before{
  right:4%;
  top:14%;
  width:min(31vw,390px);
  height:min(28vw,330px);
  opacity:.10;
  background-image:
    url("assets/decor/magnifier.svg"),
    url("assets/decor/vector.svg"),
    radial-gradient(circle at 56% 46%, rgba(255,255,255,.76), transparent 72%);
  background-repeat:no-repeat;
  background-size:116px auto, 142px auto, 100% 100%;
  background-position:72% 18%, 20% 76%, center;
}
.about-flow-screen::before{
  left:4%;
  bottom:10%;
  width:min(31vw,410px);
  height:min(28vw,330px);
  opacity:.10;
  background-image:
    url("assets/decor/ruler.svg"),
    url("assets/decor/prism.svg"),
    radial-gradient(circle at 46% 52%, rgba(255,255,255,.76), transparent 74%);
  background-repeat:no-repeat;
  background-size:180px auto, 110px auto, 100% 100%;
  background-position:24% 72%, 74% 18%, center;
}
.about-closing-screen::before{
  right:7%;
  top:14%;
  width:min(31vw,390px);
  height:min(28vw,330px);
  opacity:.10;
  background-image:
    url("assets/decor/lens.svg"),
    url("assets/decor/axis.svg"),
    radial-gradient(circle at 54% 46%, rgba(255,255,255,.76), transparent 72%);
  background-repeat:no-repeat;
  background-size:110px auto, 108px auto, 100% 100%;
  background-position:18% 20%, 72% 72%, center;
}

/* Resources page: light side/back panels so the page feels less empty */
.resource-content::before{
  left:0;
  top:14px;
  bottom:14px;
  width:calc(var(--resource-sidebar-w, 300px) + 18px);
  border-radius:18px;
  opacity:.52;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16)),
    radial-gradient(circle at 78% 14%, rgba(255,255,255,.60), transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.resource-sidebar::before{
  left:14px;
  right:14px;
  top:18px;
  height:170px;
  border-radius:16px;
  opacity:.12;
  background-image:
    url("assets/decor/book.svg"),
    url("assets/decor/axis.svg"),
    radial-gradient(circle at 58% 46%, rgba(255,255,255,.90), transparent 72%);
  background-repeat:no-repeat;
  background-size:96px auto, 74px auto, 100% 100%;
  background-position:18% 68%, 78% 24%, center;
}
.resource-main::before{
  right:2%;
  top:24px;
  width:min(26vw,340px);
  height:min(24vw,300px);
  opacity:.09;
  background-image:
    url("assets/decor/wave.svg"),
    url("assets/decor/magnifier.svg"),
    radial-gradient(circle at 52% 50%, rgba(255,255,255,.70), transparent 72%);
  background-repeat:no-repeat;
  background-size:190px auto, 88px auto, 100% 100%;
  background-position:18% 76%, 76% 18%, center;
}
.resource-main::after{
  left:3%;
  bottom:18px;
  width:220px;
  height:220px;
  opacity:.07;
  background:url("assets/decor/orbit.svg") center/contain no-repeat;
}

/* Keep it restrained on smaller screens. */
@media (max-width:900px){
  .hero-screen::before,
  .updates-screen::before,
  .closing-screen::before,
  .about-brand-section::before,
  .about-story-screen::before,
  .about-flow-screen::before,
  .about-closing-screen::before,
  .resource-main::before{
    opacity:.08;
  }
  .hero-screen::after,
  .updates-screen::after,
  .closing-screen::after,
  .about-brand-section::after,
  .resource-main::after{
    opacity:.05;
  }
  .resource-content::before{
    width:100%;
    opacity:.26;
  }
}
@media (max-width:650px){
  .hero-screen::before,
  .hero-screen::after,
  .updates-screen::before,
  .updates-screen::after,
  .closing-screen::before,
  .closing-screen::after,
  .about-brand-section::before,
  .about-brand-section::after,
  .about-story-screen::before,
  .about-flow-screen::before,
  .about-closing-screen::before,
  .resource-main::before,
  .resource-main::after{
    display:none;
  }
  .resource-sidebar::before{
    opacity:.08;
  }
}


/* ===== V12 targeted fixes: function cards / compact resources header / sticky resource navigation ===== */

/* Home function cards: no CTA arrow; slightly larger copy and no reserved right-side gap. */
.function-card .function-arrow{
  display:none!important;
}
.function-copy{
  min-height:160px;
  padding:26px 27px 25px;
}
.function-copy h3{
  font-size:29px;
  line-height:1.32;
  margin-bottom:13px;
}
.function-copy p{
  padding-right:0;
  font-size:17.5px;
  line-height:1.68;
}

/* Resource page: stop pushing the title and search box to opposite edges on wide screens. */
.resources-page .resource-main{
  padding-top:36px;
}
.resources-page .resource-page-head{
  display:grid;
  grid-template-columns:max-content minmax(420px,620px);
  justify-content:start;
  align-items:end;
  column-gap:clamp(72px,8vw,138px);
  row-gap:20px;
  margin-bottom:26px;
}
.resources-page .resource-page-head > div:first-child{
  min-width:180px;
}
.resources-page .resource-page-head .resources-search{
  width:100%;
  max-width:620px;
}
.resources-page .compact-resource-head .page-kicker{
  margin-bottom:6px;
}
.resources-page .resource-page-head h1{
  line-height:1.02;
}

/* Restore and strengthen sticky navigation.
   The decorative-layer rule from the previous version had overridden sticky with position:relative. */
.resources-page .resource-sidebar{
  position:sticky!important;
  top:calc(var(--header-h) + 20px)!important;
  align-self:start;
  z-index:12;
  max-height:calc(100vh - var(--header-h) - 40px);
  max-height:calc(100svh - var(--header-h) - 40px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  background:rgba(251,251,248,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(27,43,46,.045);
}
.resources-page .resource-sidebar::before{
  z-index:0;
}
.resources-page .resource-sidebar > *{
  position:relative;
  z-index:1;
}

/* Tablet/mobile keeps the existing normal-flow layout. */
@media (max-width:900px){
  .resources-page .resource-page-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    margin-bottom:28px;
  }
  .resources-page .resource-page-head > div:first-child{
    min-width:0;
  }
  .resources-page .resource-page-head .resources-search{
    width:100%;
    max-width:none;
  }
  .resources-page .resource-sidebar{
    position:relative!important;
    top:auto!important;
    max-height:none;
    overflow:visible;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .function-copy h3{
    font-size:25px;
  }
  .function-copy p{
    font-size:15.5px;
  }
}
@media (max-width:650px){
  .function-copy{
    min-height:132px;
    padding:21px 22px;
  }
  .function-copy h3{
    font-size:24px;
  }
}

/* ===== V13: WeChat official-account page and management ===== */
.wechat-page{background:var(--bg);color:var(--ink)}
.wechat-main{position:relative;z-index:2;min-height:calc(100vh - var(--header-h) - 124px);padding:54px 0 84px;overflow:hidden}
.wechat-ambient{z-index:1}
.wechat-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:72px;padding-top:20px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.wechat-hero h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(58px,5vw,84px);line-height:1;margin:12px 0 18px;font-weight:700;letter-spacing:-.04em}
.wechat-hero p{max-width:700px;margin:0;color:var(--muted);font-size:18px;line-height:1.85}
.wechat-hero-mark{justify-self:end;width:210px;height:210px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid rgba(40,86,106,.13);background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.9),rgba(239,244,241,.58) 64%,rgba(226,236,233,.3));box-shadow:0 18px 48px rgba(31,70,86,.05)}
.wechat-hero-mark::before,.wechat-hero-mark::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(40,86,106,.14)}
.wechat-hero-mark::before{inset:24px}.wechat-hero-mark::after{inset:54px;border-style:solid;opacity:.7}
.wechat-hero-mark span{position:absolute;width:56px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,166,47,.55),transparent);transform:rotate(-17deg)}
.wechat-hero-mark b{font:700 27px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:var(--brand);z-index:2}
.wechat-content{padding-top:38px}
.wechat-section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:27px}
.wechat-section-head>div{display:grid;gap:5px}.wechat-section-head>div>span{font-size:11px;letter-spacing:.18em;color:#8a9692}.wechat-section-head h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:36px;margin:0}.wechat-section-head>p{margin:0;color:var(--muted);font-size:14px}
.wechat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wechat-card{min-width:0;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.67);box-shadow:0 6px 20px rgba(28,42,45,.025);transition:transform 380ms var(--ease-soft),border-color 300ms ease,box-shadow 380ms ease,background 300ms ease;transform-origin:center bottom}
.wechat-card:hover{transform:translate3d(0,-9px,0) scale(1.008);border-color:#bdcbc6;background:rgba(255,255,255,.92);box-shadow:0 20px 44px rgba(27,44,47,.085)}
.wechat-card-cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(145deg,#edf3ef,#f8f8f4);border-bottom:1px solid var(--line)}
.wechat-card-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 520ms var(--ease-soft),filter 320ms ease}
.wechat-card:hover .wechat-card-cover img{transform:scale(1.055);filter:saturate(1.03)}
.wechat-card-badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;height:27px;padding:0 10px;border-radius:999px;background:rgba(247,247,243,.88);border:1px solid rgba(255,255,255,.72);backdrop-filter:blur(8px);font-size:11px;font-weight:650;color:var(--brand);letter-spacing:.05em}
.wechat-card-placeholder{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:10px;background:radial-gradient(circle at 65% 24%,rgba(255,255,255,.86),transparent 42%),linear-gradient(135deg,#edf3f0,#f9faf6)}
.wechat-card-placeholder b{font:700 34px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:rgba(40,86,106,.34);letter-spacing:.08em}.wechat-card-placeholder span{font-size:13px;color:#83908b;letter-spacing:.12em}
.wechat-card-copy{padding:20px 21px 18px}
.wechat-card-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#89938f;font-size:12px;margin-bottom:12px}.wechat-card-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wechat-card-meta time{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;flex:0 0 auto}
.wechat-card h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:24px;line-height:1.48;margin:0;min-height:71px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color 260ms ease,transform 340ms var(--ease-soft)}
.wechat-card:hover h3{color:var(--brand);transform:translateX(2px)}
.wechat-card-link{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid #edf1ee;color:#74807c;font-size:13px}
.wechat-card-arrow{width:41px;height:29px;flex-basis:41px}
.wechat-empty{grid-column:1/-1;min-height:300px;display:grid;place-items:center;align-content:center;text-align:center;border:1px dashed #cfd8d4;border-radius:16px;background:rgba(255,255,255,.38)}
.wechat-empty>span{font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;color:#9aa4a0}.wechat-empty h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:30px;margin:14px 0 9px}.wechat-empty p{margin:0;color:var(--muted)}
.update-row.is-wechat::before{background:linear-gradient(180deg,#d4a53b,#6f9eab)}.update-row.is-wechat .update-index small{color:#b48729}.update-row.is-wechat .update-kicker{color:#8c702f}

/* WeChat administration keeps the current management visual language. */
.admin-wechat-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:20px}
.admin-wechat-overview article{min-height:88px;padding:16px 18px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.72);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:end;box-shadow:0 5px 18px rgba(28,42,45,.025)}
.admin-wechat-overview span{font-size:12px;color:#7d8884}.admin-wechat-overview strong{grid-row:1/3;grid-column:2;align-self:center;font-family:"Songti SC","STSong",SimSun,serif;font-size:34px;color:var(--brand)}.admin-wechat-overview small{font-size:11.5px;color:#9aa29f}
.admin-wechat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.admin-wechat-card{min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;outline:none;transition:transform 320ms var(--ease-soft),border-color 260ms ease,box-shadow 320ms ease}
.admin-wechat-card:hover,.admin-wechat-card:focus-visible{transform:translateY(-6px);border-color:#bdcbc6;box-shadow:0 16px 34px rgba(28,42,45,.075)}
.admin-wechat-cover{height:150px;position:relative;overflow:hidden;background:#edf3ef;border-bottom:1px solid var(--line)}.admin-wechat-cover>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms var(--ease-soft)}.admin-wechat-card:hover .admin-wechat-cover>img{transform:scale(1.04)}
.admin-wechat-cover>.status-pill{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.90);backdrop-filter:blur(7px)}
.admin-wechat-placeholder{height:100%;display:grid;place-items:center;align-content:center;gap:8px;background:radial-gradient(circle at 68% 22%,rgba(255,255,255,.82),transparent 44%),linear-gradient(135deg,#ecf2ef,#fafaf7)}.admin-wechat-placeholder b{font:700 31px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:rgba(40,86,106,.35)}.admin-wechat-placeholder span{font-size:12px;letter-spacing:.1em;color:#84908c}
.admin-wechat-copy{padding:15px 16px 14px}.admin-wechat-meta{display:flex;justify-content:space-between;gap:12px;color:#8d9894;font-size:11.5px}.admin-wechat-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-wechat-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:20px;line-height:1.45;margin:11px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:58px}.admin-wechat-copy>p{font-size:11.5px;line-height:1.45;color:#9aa29f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.admin-wechat-card .admin-resource-card-foot{margin-top:12px}
.wechat-drawer .image-input-row{align-items:center}.wechat-cover-preview-wrap{margin-top:10px;min-height:190px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#f3f6f2;display:grid;place-items:center}.wechat-cover-preview-wrap .drawer-cover-preview{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:0;margin:0}.wechat-cover-placeholder{color:#9aa39f;font-size:13px;letter-spacing:.08em}
#wechatExtractHint{transition:color 220ms ease}#extractWechatButton[disabled],#saveWechatButton[disabled]{opacity:.6;cursor:wait}

@media (max-width:1250px){.wechat-grid,.admin-wechat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wechat-hero{grid-template-columns:minmax(0,1fr) 210px;gap:48px}.wechat-hero-mark{width:180px;height:180px}}
@media (max-width:900px){.wechat-main{padding-top:34px}.wechat-hero{grid-template-columns:1fr;padding-bottom:34px}.wechat-hero-mark{display:none}.wechat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-wechat-overview{grid-template-columns:1fr 1fr}.admin-wechat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:650px){.wechat-grid,.admin-wechat-grid{grid-template-columns:1fr}.wechat-hero h1{font-size:54px}.wechat-hero p{font-size:16px}.wechat-card h3{font-size:22px;min-height:auto}.wechat-card-copy{padding:17px}.admin-wechat-overview{grid-template-columns:1fr}.wechat-section-head{align-items:flex-start;flex-direction:column;gap:8px}}


/* ===== V13 focused fixes: WeChat brand mark / login errors / guest read-only debug ===== */
.wechat-hero-mark{
  overflow:visible;
}
.wechat-hero-mark .wechat-hero-logo{
  position:relative;
  z-index:3;
  width:142px;
  height:142px;
  display:block;
  border-radius:50%;
  object-fit:contain;
  filter:drop-shadow(0 13px 24px rgba(25,60,82,.10));
}
.wechat-hero-mark span{
  z-index:1;
  opacity:.48;
}
.wechat-hero-mark b{
  display:none;
}

.login-error-message{
  margin:-10px 0 -2px;
  min-height:22px;
  color:#a64b42;
  font-size:13px;
  line-height:1.6;
  padding-left:2px;
}
.login-form.has-login-error .line-input#adminPassword{
  border-color:rgba(166,75,66,.58);
  box-shadow:0 0 0 3px rgba(166,75,66,.055);
}

.guest-readonly-badge{
  display:grid;
  gap:4px;
  margin-bottom:12px;
  padding:11px 12px;
  border:1px solid rgba(40,86,106,.16);
  border-radius:10px;
  background:rgba(238,244,241,.72);
}
.guest-readonly-badge strong{
  color:var(--brand);
  font-size:13px;
  font-weight:700;
}
.guest-readonly-badge span{
  color:#7e8b86;
  font-size:11px;
  line-height:1.5;
}
.admin-guest-readonly .admin-main input:disabled,
.admin-guest-readonly .admin-main textarea:disabled,
.admin-guest-readonly .admin-main select:disabled,
.admin-guest-readonly .admin-drawer input:disabled,
.admin-guest-readonly .admin-drawer textarea:disabled,
.admin-guest-readonly .admin-drawer select:disabled{
  opacity:.76;
  color:#66726e;
  background:#f5f7f3;
  cursor:not-allowed;
}
.admin-guest-readonly .guest-locked-control{
  opacity:.42;
  pointer-events:none;
}
.admin-guest-readonly button:disabled{
  cursor:not-allowed;
}


/* ===== V14 resource-view reliability fixes ===== */
.resource-frame{
  z-index:0;
}
.resource-exit-wrap{
  z-index:2147483000!important;
  pointer-events:auto!important;
}
.resource-exit{
  pointer-events:auto!important;
  touch-action:none;
}
.resource-load-error{
  z-index:2147482000;
}

/* Resource viewer: hidden error layer must really stay hidden */
.resource-load-error[hidden] {
  display: none !important;
}

/* ===== V15 site expansion: same visual language, smoother cards, proportional desktop/tablet layout ===== */

/* Eight-item navigation keeps the existing underline/type treatment while fluidly fitting desktop and tablet widths. */
@media (min-width:701px){
  .site-header .header-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(12px,1.45vw,30px);
  }
  .site-header .nav{
    display:flex!important;
    justify-content:center;
    min-width:0;
    gap:clamp(8px,1.55vw,30px);
  }
  .site-header .nav-link{
    font-size:clamp(11.5px,1.03vw,18px);
    padding-inline:clamp(1px,.2vw,3px);
    white-space:nowrap;
  }
  .site-header .brand{gap:clamp(7px,.8vw,13px)}
  .site-header .brand-logo{width:clamp(33px,3vw,46px);height:clamp(33px,3vw,46px)}
  .site-header .brand-name{font-size:clamp(17px,1.45vw,24px)}
  .site-header .icon-button{width:clamp(38px,3vw,46px);height:clamp(38px,3vw,46px)}
}
@media (min-width:701px) and (max-width:1100px){
  .container{width:calc(100% - clamp(28px,4.5vw,48px))}
  .site-header .header-inner{column-gap:8px}
  .site-header .nav{gap:clamp(5px,.75vw,9px)}
  .site-header .nav-link{font-size:clamp(10.5px,1.45vw,13px);letter-spacing:-.02em}
  .site-header .brand-name{font-size:clamp(15px,2vw,19px)}
}
/* Mobile may use the compact legacy layout; tablets at 701px+ remain in the desktop composition. */
@media (max-width:700px){
  .site-header .nav{display:none!important}
}

/* Resource-card performance pass: preserve every visible hover state, but stop animating layout-affecting padding. */
.resource-card{will-change:auto;backface-visibility:hidden}
.resource-card .resource-meta>span:first-child{
  position:relative;
  z-index:0;
  padding:0!important;
  background:transparent!important;
  transform:translateX(0);
  transition:color 250ms ease,transform 250ms ease!important;
}
.resource-card .resource-meta>span:first-child::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-3px -9px;
  border-radius:999px;
  background:var(--brand-soft);
  opacity:0;
  transform:scale(.72);
  transform-origin:center;
  transition:opacity 260ms ease,transform 340ms var(--ease-soft);
  pointer-events:none;
}
.resource-card:hover .resource-meta>span:first-child{
  color:var(--brand)!important;
  padding:0!important;
  transform:translateX(9px);
}
.resource-card:hover .resource-meta>span:first-child::before{opacity:1;transform:scale(1)}
.resource-card,.resource-card .resource-thumb,.resource-card .resource-thumb img,.resource-card .resource-body,.resource-card .resource-title{
  transform:translateZ(0);
}
.resource-card .resource-thumb img{backface-visibility:hidden}

/* Shared expanded catalog pages */
.catalog-page{min-height:100vh;background:var(--bg)}
.catalog-main{position:relative;z-index:2;min-height:calc(100vh - var(--header-h) - 124px);padding:clamp(44px,5.2vw,84px) 0 clamp(72px,6vw,112px)}
.catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(32px,3.5vw,54px)}
.catalog-head h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(50px,4.25vw,74px);line-height:1.08;margin:0 0 14px}
.catalog-head p{margin:0;max-width:760px;color:var(--muted);font-size:clamp(15px,1.15vw,18px);line-height:1.8}
.catalog-head>span{flex:0 0 auto;color:#77827f;font-size:14px;padding-bottom:8px}
.catalog-ambient{opacity:.72}
.catalog-card-description{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.empty-state,.about-empty{grid-column:1/-1;min-height:220px;display:grid;place-items:center;align-content:center;text-align:center;border:1px dashed var(--line-strong);border-radius:14px;background:rgba(255,255,255,.52);padding:34px}
.empty-state h3,.about-empty strong{font-family:"Songti SC","STSong",SimSun,serif;font-size:25px;margin:0 0 10px}
.empty-state p,.about-empty p{color:var(--muted);margin:0;line-height:1.7}

/* Physical tools: four across and every incomplete row is centered. */
.tool-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,2.4vw,42px) clamp(18px,1.8vw,30px)}
.tool-grid>.resource-card{flex:0 1 calc((100% - 3 * clamp(18px,1.8vw,30px))/4);width:calc((100% - 3 * clamp(18px,1.8vw,30px))/4);min-width:0}

/* Exercise directory reuses the current course resource visual hierarchy. */
.compact-resource-head{margin-bottom:34px}
.exercise-sidebar .resource-mode-tabs{grid-template-columns:1fr 1fr}
.exercise-tree{padding:10px 0 18px}
.exercise-all,.exercise-tree-group button{width:100%;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#596460;transition:background 180ms ease,color 180ms ease,transform 180ms var(--ease)}
.exercise-all{padding:13px 18px;font-size:15px;font-weight:650}
.exercise-tree-group{border-top:1px solid rgba(224,229,225,.72)}
.exercise-tree-group .tree-unit{padding:15px 18px;font-size:15px;font-weight:650}
.exercise-tree-group .tree-lesson{padding:11px 18px 11px 36px;font-size:14px}
.exercise-all em,.exercise-tree-group em{font-style:normal;font-size:12px;color:#8d9693}
.exercise-all:hover,.exercise-tree-group button:hover,.exercise-all.is-selected,.exercise-tree-group button.is-selected{background:rgba(237,243,243,.72);color:var(--brand)}
.exercise-tree-group button:hover{transform:translateX(2px)}

/* Digital library: a restrained modern shelf, retaining the site's cream/blue palette. */
.library-head{margin-bottom:24px}
.library-search-row{display:flex;justify-content:flex-end;margin-bottom:38px}
.library-search-row .resources-search{width:min(520px,100%)}
.library-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:44px clamp(24px,2.5vw,46px);padding:20px 8px 46px;position:relative}
.library-shelf::after{content:"";position:absolute;left:0;right:0;bottom:24px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 8%,var(--line-strong) 92%,transparent);box-shadow:0 9px 18px rgba(35,56,58,.05)}
.book-card{width:clamp(150px,12.4vw,205px);position:relative;z-index:1;transition:transform 360ms var(--ease-soft)}
.book-card:hover{transform:translate3d(0,-9px,0)}
.book-cover{aspect-ratio:2/3;border:1px solid var(--line);border-radius:7px 11px 11px 7px;background:#eef1ee;overflow:hidden;box-shadow:5px 8px 18px rgba(31,52,56,.075);position:relative}
.book-cover::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.42);z-index:2}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms var(--ease-soft)}
.book-card:hover .book-cover img{transform:scale(1.035)}
.book-card-copy{padding:14px 4px 0}
.book-card-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:19px;line-height:1.4;margin:0 0 5px}
.book-card-copy p{margin:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.book-detail{min-height:calc(100vh - var(--header-h));padding:clamp(60px,7vw,110px) 0;display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:clamp(48px,6vw,110px);align-items:center}
.book-detail-cover{aspect-ratio:2/3;max-width:360px;border-radius:8px 14px 14px 8px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:12px 20px 42px rgba(31,52,56,.11);background:#eef1ee}
.book-detail-cover img{width:100%;height:100%;object-fit:cover}
.book-detail-copy h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(44px,4vw,68px);line-height:1.15;margin:0 0 14px}
.book-author{color:var(--brand);font-weight:650;margin:0 0 28px}
.book-description{max-width:860px;color:var(--muted);font-size:17px;line-height:1.9;white-space:pre-line}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.detail-tags span{padding:5px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:13px}
.book-actions,.training-document-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.book-actions .primary-button,.book-actions .secondary-button,.training-document-actions .primary-button,.training-document-actions .secondary-button{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px}

/* Training */
.training-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.4vw,40px) clamp(18px,1.8vw,28px)}
.training-card{min-width:0;transition:transform 360ms var(--ease-soft)}
.training-card:hover{transform:translate3d(0,-8px,0)}
.training-cover{aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#eef1ee;position:relative;box-shadow:var(--shadow-soft)}
.training-cover img{width:100%;height:100%;object-fit:cover;transition:transform 420ms var(--ease-soft)}
.training-card:hover .training-cover img{transform:scale(1.045)}
.training-cover>span{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(247,247,243,.92);backdrop-filter:blur(5px);font-size:12px;color:var(--brand);font-weight:650}
.training-copy{padding:16px 3px 0}
.training-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:21px;margin:0 0 9px}
.training-copy>p{color:var(--muted);font-size:14px;line-height:1.65;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:46px}
.training-copy>div{display:flex;justify-content:space-between;color:#7e8885;font-size:12px;margin-top:13px}
.training-detail{min-height:calc(100vh - var(--header-h));padding:clamp(58px,6vw,96px) 0}
.training-detail header{max-width:920px;margin-bottom:38px}
.training-detail h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(46px,4vw,68px);margin:0 0 16px}
.training-detail header p{color:var(--muted);font-size:17px;line-height:1.85;white-space:pre-line}
.training-player{display:block;width:min(1100px,100%);max-height:70vh;background:#111;border-radius:13px;box-shadow:var(--shadow)}

/* About team/contact screens: exactly the same full-screen composition as the current About page. */
.about-hero-copy .page-kicker{font-size:clamp(11px,1vw,var(--about-kicker-size,14px))}
.about-hero-copy h1{font-size:clamp(42px,4.6vw,var(--about-title-size,68px))}
.about-hero-copy p{font-size:clamp(15px,1.4vw,var(--about-lead-size,20px))}
.about-people-screen{align-items:center;min-height:100svh;height:100svh}
.about-people-section{width:100%;padding:clamp(28px,4vh,54px) 0}
.about-people-head{text-align:center;margin:0 auto clamp(26px,4vh,48px);max-width:820px}
.about-people-head h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(38px,3.4vw,56px);margin:0 0 12px}
.about-people-head p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.member-grid,.contact-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2vw,30px)}
.member-card,.contact-card{flex:0 1 calc((100% - 3 * clamp(18px,2vw,30px))/4);width:calc((100% - 3 * clamp(18px,2vw,30px))/4);min-width:0;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.70);overflow:hidden;transition:transform 360ms var(--ease-soft),border-color 300ms ease,box-shadow 360ms ease}
.member-card:hover,.contact-card:hover{transform:translate3d(0,-7px,0);border-color:#bdcac6;box-shadow:0 18px 38px rgba(31,52,56,.07)}
.member-photo{aspect-ratio:4/3;background:#eef1ee;overflow:hidden}
.member-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 450ms var(--ease-soft)}
.member-card:hover .member-photo img{transform:scale(1.035)}
.member-photo-placeholder{height:100%;display:grid;place-items:center;font-family:"Songti SC","STSong",SimSun,serif;font-size:64px;color:#8aa0a8;background:linear-gradient(145deg,#f0f4f2,#e8efed)}
.member-copy{padding:clamp(15px,1.45vw,22px)}
.member-name-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.member-name-line h3,.contact-card h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(20px,1.6vw,25px);margin:0}
.member-name-line span,.contact-role{font-size:12px;color:var(--brand)}
.member-research{font-size:13px;color:#56625f;line-height:1.6;margin:0 0 10px}
.member-research b{display:block;color:#8a9591;font-size:11px;letter-spacing:.08em;margin-bottom:3px}
.member-bio{font-size:13px;color:var(--muted);line-height:1.65;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.contact-card{padding:clamp(20px,2vw,30px);min-height:250px;position:relative}
.contact-index{position:absolute;right:20px;top:20px;font:650 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#9ba6a2}
.contact-role{margin:8px 0 24px}
.contact-lines{display:grid;gap:13px}
.contact-lines a,.contact-lines p{margin:0;display:grid;gap:4px}
.contact-lines small{color:#919a97;font-size:11px}
.contact-lines strong{font-size:13px;font-weight:550;color:#4e5b57;overflow-wrap:anywhere}
.contact-lines a:hover strong{color:var(--brand)}

/* Global site-search overlay */
.site-search-overlay{position:fixed;inset:0;z-index:2147482500;background:rgba(31,42,43,.30);backdrop-filter:blur(4px);display:grid;place-items:start center;padding:clamp(84px,11vh,132px) 20px 30px;opacity:0;pointer-events:none;transition:opacity 190ms ease}
.site-search-overlay.is-open{opacity:1;pointer-events:auto}
.site-search-panel{width:min(920px,100%);max-height:min(720px,calc(100vh - 130px));background:rgba(250,250,247,.985);border:1px solid rgba(198,208,204,.95);border-radius:16px;box-shadow:0 28px 70px rgba(31,48,51,.18);overflow:hidden;transform:translateY(-10px) scale(.985);transition:transform 260ms var(--ease-soft)}
.site-search-overlay.is-open .site-search-panel{transform:none}
.site-search-input-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.site-search-input-row svg{width:23px;height:23px;fill:none;stroke:var(--brand);stroke-width:1.8}
.site-search-input{border:0;background:transparent;outline:0;font-size:18px;min-width:0;width:100%}
.site-search-close{border:0;background:transparent;cursor:pointer;color:#7c8783;font-size:24px;width:38px;height:38px;border-radius:8px}
.site-search-close:hover{background:#edf1ee;color:var(--ink)}
.site-search-results{overflow:auto;max-height:610px;padding:10px}
.site-search-hint{padding:28px;text-align:center;color:var(--muted)}
.site-search-group{padding:10px 8px 4px}
.site-search-group>h3{font-size:11px;letter-spacing:.14em;color:#8c9693;margin:6px 8px 7px;text-transform:uppercase}
.site-search-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:13px;align-items:center;padding:10px;border-radius:10px;transition:background 150ms ease}
.site-search-item:hover,.site-search-item.is-active{background:var(--brand-soft)}
.site-search-item-cover{width:54px;height:42px;border-radius:7px;background:#e8eeeb;overflow:hidden;display:grid;place-items:center;color:var(--brand);font:650 12px/1 ui-monospace,monospace}
.site-search-item-cover img{width:100%;height:100%;object-fit:cover}
.site-search-item strong{display:block;font-family:"Songti SC","STSong",SimSun,serif;font-size:17px;margin-bottom:3px}
.site-search-item span{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-search-item b{font-weight:400;color:var(--brand);font-size:17px}

/* WeChat/article viewer fallback uses the existing circular viewer button. */
.wechat-view-page{margin:0;overflow:hidden;background:#eef1ee}
.wechat-view-frame{position:fixed;inset:0;width:100%;height:100%;border:0;background:#fff}
.wechat-view-fallback{position:fixed;left:50%;bottom:20px;z-index:2147481000;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:rgba(247,247,243,.94);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-soft);font-size:12px;color:#65716d}
.wechat-view-fallback a{color:var(--brand);font-weight:650}

/* Admin expansion */
.admin-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.admin-module-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;cursor:pointer;transition:transform 180ms var(--ease),border-color 180ms ease,box-shadow 180ms ease}
.admin-module-card:hover{transform:translateY(-2px);border-color:#bdc9c5;box-shadow:var(--shadow-soft)}
.admin-module-thumb{width:84px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#edf1ee}
.admin-module-thumb.portrait{aspect-ratio:2/3}
.admin-module-thumb img{width:100%;height:100%;object-fit:cover}
.admin-module-copy{min-width:0}
.admin-module-copy h3{font-family:"Songti SC","STSong",SimSun,serif;font-size:18px;margin:0 0 7px}
.admin-module-copy p{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.admin-module-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#87918e}
.admin-module-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.admin-module-actions button,.admin-sort-actions button{border:1px solid var(--line);background:#fafbf8;border-radius:7px;padding:5px 8px;cursor:pointer;font-size:12px}
.admin-module-actions button:hover,.admin-sort-actions button:hover{border-color:#afc0ba;color:var(--brand)}
.admin-directory-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.admin-directory-group{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.admin-directory-group>header{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.admin-directory-group>header h3{margin:0;font-size:18px;font-family:"Songti SC","STSong",SimSun,serif}
.admin-directory-list{padding:8px}
.admin-directory-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px;border-radius:8px}
.admin-directory-row:hover{background:#f6f8f5}
.admin-directory-row.child{padding-left:30px;color:#5c6864}
.admin-directory-row strong{font-size:13px}
.admin-sort-actions{display:flex;gap:4px}
.admin-module-drawer .drawer-grid{grid-template-columns:1fr 1fr}
.admin-file-status{font-size:12px;color:#7b8783;line-height:1.6}
.admin-file-status.is-error{color:var(--danger)}
.admin-team-tabs{display:flex;gap:8px;margin-bottom:18px}
.admin-team-tabs button{border:1px solid var(--line);background:#fff;padding:9px 16px;border-radius:999px;cursor:pointer;color:#67716e}
.admin-team-tabs button.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Desktop/tablet proportional composition. Do not image-scale the whole page: text remains sharp. */
@media (min-width:701px) and (max-width:1100px){
  .resource-main{padding-top:clamp(30px,4vh,54px)}
  .resource-layout{grid-template-columns:clamp(190px,25vw,250px) minmax(0,1fr);gap:clamp(18px,2.5vw,28px)}
  .resources-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px) clamp(12px,1.6vw,18px)}
  .resource-title{font-size:clamp(15px,2vw,19px)}
  .resource-meta-line,.resource-lesson,.resource-meta{font-size:clamp(10.5px,1.4vw,13px)}
  .resource-sidebar{position:sticky;top:calc(var(--header-h) + 18px);max-height:calc(100svh - var(--header-h) - 36px)}
  .tool-grid>.resource-card{flex-basis:calc((100% - 3 * 14px)/4);width:calc((100% - 3 * 14px)/4)}
  .tool-grid{column-gap:14px;row-gap:24px}
  .training-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px}
  .member-card,.contact-card{flex-basis:calc((100% - 3 * 14px)/4);width:calc((100% - 3 * 14px)/4)}
  .member-grid,.contact-grid{gap:14px}
  .member-photo{aspect-ratio:4/3}
  .member-copy{padding:12px}
  .member-bio{-webkit-line-clamp:3;font-size:11.5px}
  .member-research{font-size:11.5px}
  .contact-card{padding:16px;min-height:210px}
  .about-people-head{margin-bottom:clamp(18px,3vh,34px)}
  .library-shelf{gap:34px 24px}
  .book-card{width:clamp(125px,15vw,165px)}
}
@media (min-width:701px) and (max-height:780px){
  :root{--header-h:68px}
  .catalog-main{padding-top:34px;padding-bottom:58px}
  .catalog-head{margin-bottom:28px}
  .catalog-head h1{font-size:clamp(42px,4vw,60px)}
  .about-people-section{padding:18px 0}
  .about-people-head{margin-bottom:20px}
  .about-people-head h2{font-size:clamp(34px,3.2vw,48px)}
  .member-photo{aspect-ratio:16/10}
  .member-copy{padding-top:12px;padding-bottom:12px}
  .member-bio{-webkit-line-clamp:2}
  .contact-card{min-height:190px}
}

/* Mobile may reflow; desktop/tablet rules above intentionally keep the same composition. */
@media (max-width:700px){
  .catalog-head{align-items:flex-start;flex-direction:column}
  .catalog-head h1{font-size:46px}
  .tool-grid>.resource-card{flex:0 1 100%;width:100%;max-width:520px}
  .training-grid{grid-template-columns:1fr}
  .library-shelf{gap:34px 18px}
  .book-card{width:calc(50% - 12px);max-width:190px}
  .book-detail{grid-template-columns:1fr;gap:34px;align-items:start}
  .book-detail-cover{width:min(260px,76vw);justify-self:center}
  .member-card,.contact-card{flex:0 1 100%;width:100%;max-width:520px}
  .about-people-screen{height:auto;min-height:100svh}
  .about-people-section{padding:58px 0}
  .admin-module-grid{grid-template-columns:1fr}
  .admin-directory-columns{grid-template-columns:1fr}
  .site-search-overlay{padding-top:76px}
  .site-search-item{grid-template-columns:44px minmax(0,1fr) auto}
  .site-search-item-cover{width:44px;height:36px}
}

/* V15.1 align the global-search CSS with the generated search DOM. */
.site-search-backdrop{position:absolute;inset:0}
.site-search-panel{position:relative;z-index:1}
.site-search-panel>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px 12px;border-bottom:0}
.site-search-panel>header h2{font-family:"Songti SC","STSong",SimSun,serif;font-size:27px;margin:0}
.site-search-panel>header .page-kicker{margin-bottom:5px}
.site-search-input-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:0 20px 12px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:#fff}
.site-search-input-wrap .icon{width:22px;height:22px;color:var(--brand)}
.site-search-input-wrap input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:17px}
.site-search-result{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:13px;padding:10px;border-radius:10px;transition:background 150ms ease,transform 160ms var(--ease)}
.site-search-result:hover,.site-search-result.is-active{background:var(--brand-soft);transform:translateX(2px)}
.site-search-result>img,.site-search-result-mark{width:56px;height:42px;border-radius:7px;object-fit:cover;background:#e8eeeb;display:grid;place-items:center;color:var(--brand);font:650 11px/1 ui-monospace,monospace}
.site-search-result>span{min-width:0}
.site-search-result strong{display:block;font-family:"Songti SC","STSong",SimSun,serif;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-search-result small{display:block;color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-search-result i{font-style:normal;color:var(--brand)}
.site-search-hint strong,.site-search-hint span{display:block}.site-search-hint span{font-size:12px;margin-top:8px;color:#8b9592}
body.site-search-open{overflow:hidden}

/* Eight footer entries also stay on one line for desktop/tablet when possible. */
@media (min-width:701px){
  .footer-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2vw,32px)}
  .footer-links{justify-self:center;display:flex!important;align-items:center;justify-content:center;gap:clamp(8px,1.45vw,28px);min-width:0}
  .footer-links a{font-size:clamp(10.5px,1vw,16px);white-space:nowrap}
  .footer-brand .brand-name{font-size:clamp(16px,1.3vw,22px)}
  .admin-link{font-size:clamp(12px,1vw,16px)}
}
.pdf-download-float{position:fixed;z-index:2147481800;left:50%;bottom:18px;transform:translateX(-50%);height:38px;padding:0 16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(201,210,206,.92);border-radius:999px;background:rgba(247,247,243,.94);box-shadow:var(--shadow-soft);font-size:12px;font-weight:650;color:var(--brand);backdrop-filter:blur(5px)}
.pdf-download-float:hover{background:#fff;border-color:#aebfba}


/* V15.2 — tablet remains the same desktop composition.  We resize real layout values instead of zooming the page, so text stays crisp. */
@media (min-width:701px) and (max-width:900px){
  :root{--header-h:clamp(64px,7.3vw,70px)}
  .home-page{overflow:hidden}
  .home-scroll{height:100svh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .home-scroll::-webkit-scrollbar{display:none}
  .home-screen{height:100svh;min-height:100svh;padding-top:var(--header-h)}
  .screen-inner{min-height:calc(100svh - var(--header-h));padding:clamp(34px,5.2vh,58px) 0}
  .physics-ambient{position:fixed;top:var(--header-h);bottom:0;height:auto}
  .function-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:0}
  .updates-screen .screen-inner{min-height:calc(100svh - var(--header-h));padding-bottom:clamp(42px,6vh,76px)}
  .closing-inner{min-height:calc(100svh - var(--header-h) - var(--footer-h))}

  .resource-page-head,.exercise-page-head{align-items:end;flex-direction:row}
  .resources-search{width:min(520px,46vw)}
  .resource-layout,.exercise-layout{grid-template-columns:clamp(232px,26vw,280px) minmax(0,1fr);gap:clamp(20px,2.6vw,28px)}
  .resource-sidebar,.exercise-sidebar{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100svh - var(--header-h) - 48px);overflow:auto}

  .about-page{overflow:hidden}
  .about-page .site-header{position:fixed;top:0;left:0;right:0}
  .about-scroll,.paged-scroll{height:100svh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .about-scroll::-webkit-scrollbar,.paged-scroll::-webkit-scrollbar{display:none}
  .about-screen,.about-brand-section,.about-people-screen{height:100svh;min-height:100svh;padding-top:var(--header-h);overflow:hidden}
  .about-brand-grid{grid-template-columns:minmax(0,1.12fr) minmax(230px,.88fr);min-height:calc(100svh - var(--header-h));padding:clamp(24px,4.2vh,46px) 0;gap:clamp(24px,4vw,44px)}
  .about-logo-stage{justify-self:center;width:clamp(230px,30vw,300px);height:clamp(230px,30vw,300px)}
  .about-logo-stage img{width:clamp(160px,21vw,205px);height:clamp(160px,21vw,205px)}
  .about-people-section{min-height:calc(100svh - var(--header-h));padding:clamp(24px,4vh,42px) 0}
  .about-closing-section{min-height:calc(100svh - var(--header-h) - var(--footer-h))}
}

/* ===== V16 requested density / navigation / brand / page cues ===== */
:root{--footer-h:66px}

/* All occurrences of the shared site mark stay circular and sharp. */
.site-logo-image,.brand-logo,.intro-mark,.wechat-hero-logo,.login-large-logo,.about-logo-float img{border-radius:50%;object-fit:cover}

/* Eight-item navigation: larger type, tighter spacing instead of shrinking the text. */
@media (min-width:1101px){
  .site-header .nav{gap:clamp(10px,1.1vw,22px)}
  .site-header .nav-link{font-size:clamp(16.5px,1.22vw,19px);letter-spacing:0}
  .footer-links{gap:clamp(9px,1vw,20px)}
  .footer-links a{font-size:clamp(16px,1.08vw,18px)!important}
  .admin-link{font-size:17px!important}
}
@media (min-width:701px) and (max-width:1100px){
  .site-header .nav{gap:clamp(4px,.62vw,7px)}
  .site-header .nav-link{font-size:clamp(13.5px,1.48vw,16px);letter-spacing:-.025em}
  .footer-links{gap:clamp(4px,.62vw,8px)!important}
  .footer-links a{font-size:clamp(13px,1.42vw,15.5px)!important;letter-spacing:-.025em}
  .footer-brand .brand-name{font-size:clamp(15px,1.75vw,19px)!important}
  .admin-link{font-size:clamp(13px,1.42vw,15px)!important}
}

/* Footer is half the previous visual height while remaining vertically centered. */
.site-footer,.footer-inner{min-height:var(--footer-h)!important;height:var(--footer-h)}
.about-footer{flex:0 0 var(--footer-h)!important}
.footer-brand .brand-logo{width:38px;height:38px}
.site-footer .header-brand-brush{font-size:24px!important}
.site-footer .header-brand-block{font-size:15px!important}
.catalog-main,.wechat-main{min-height:calc(100vh - var(--header-h) - var(--footer-h))}

/* Pull the newly added catalog pages upward; course resources keeps its existing tuned position. */
.tools-page .catalog-main,.library-page .catalog-main,.training-page .catalog-main{padding-top:clamp(20px,2.15vw,30px)}
.exercises-page .resource-main{padding-top:28px}
.tools-page .catalog-head,.training-page .catalog-head{margin-bottom:clamp(25px,2.4vw,38px)}
.library-page .catalog-head{margin-bottom:18px}
.library-search-row{margin-bottom:30px}
.wechat-main{padding-top:20px;padding-bottom:58px}
.wechat-hero{padding-top:0;padding-bottom:38px}
.wechat-hero h1{font-size:clamp(50px,4.2vw,72px);letter-spacing:-.025em;white-space:nowrap}

/* Exercise navigation must use exactly the same width/rhythm as course resources. */
.resources-page .resource-layout,.exercises-page .resource-layout{grid-template-columns:330px minmax(0,1fr);gap:42px}
.exercises-page .resource-sidebar{position:sticky!important;top:calc(var(--header-h) + 20px)!important;align-self:start;z-index:12;max-height:calc(100svh - var(--header-h) - 40px);overflow-y:auto;overflow-x:hidden;background:rgba(251,251,248,.94);box-shadow:0 10px 30px rgba(27,43,46,.045)}
@media (min-width:701px) and (max-width:1100px){
  .resources-page .resource-layout,.exercises-page .resource-layout{grid-template-columns:clamp(250px,27vw,286px) minmax(0,1fr);gap:clamp(20px,2.5vw,28px)}
  .resources-page .resource-sidebar,.exercises-page .resource-sidebar{position:sticky!important;top:calc(var(--header-h) + 18px)!important;max-height:calc(100svh - var(--header-h) - 36px);overflow-y:auto}
}

/* About first screen: make the right mark more authoritative without changing its language. */
@media (min-width:1101px){
  .about-brand-grid{grid-template-columns:minmax(0,1.14fr) minmax(390px,.86fr);gap:clamp(72px,7vw,112px)}
  .about-logo-stage{width:400px;height:400px}
  .about-logo-stage img,.about-logo-float img{width:282px;height:282px}
}
@media (min-width:701px) and (max-width:1100px){
  .about-logo-stage{width:clamp(300px,33vw,350px)!important;height:clamp(300px,33vw,350px)!important}
  .about-logo-stage img,.about-logo-float img{width:clamp(210px,23vw,245px)!important;height:clamp(210px,23vw,245px)!important}
}

/* Team/contact headings live at the top, leaving the maximum useful height for biographies. */
.about-people-screen{align-items:stretch!important}
.about-people-section{min-height:calc(100svh - var(--header-h));padding:clamp(17px,2.2vh,28px) 0 72px!important;display:flex;flex-direction:column;justify-content:flex-start}
.about-people-head{margin:0 auto clamp(18px,2.5vh,30px)!important}
.about-people-head .page-kicker{margin-bottom:8px}
.about-people-head h2{margin-bottom:8px}
.member-bio{-webkit-line-clamp:7}
@media (min-width:701px) and (max-height:780px){
  .about-people-section{padding-top:12px!important;padding-bottom:60px!important}
  .about-people-head{margin-bottom:14px!important}
  .member-bio{-webkit-line-clamp:4}
}

/* One centered scroll hint on every non-final Home/About page. */
.home-screen>.scroll-cue,.about-screen>.scroll-cue{z-index:12;bottom:14px}
.scroll-cue{font-size:13px;font-weight:600;letter-spacing:.13em;color:#677a7e;gap:8px}
.scroll-cue-icon{width:32px;height:39px;background:rgba(255,255,255,.48);border-color:rgba(40,86,106,.22);animation:cueFloat 1.85s cubic-bezier(.45,.05,.55,.95) infinite}
.scroll-cue-icon::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(40,86,106,.30);top:7px;left:50%;transform:translateX(-50%);animation:cueDot 1.85s ease-in-out infinite}
@keyframes cueDot{0%,100%{opacity:.28;transform:translate(-50%,0)}50%{opacity:.82;transform:translate(-50%,8px)}}

/* Hero buttons: keep the two existing boxes, remove arrows, enlarge and center the labels. */
.hero-actions{gap:20px}
.hero-action{min-width:205px;height:62px;gap:0!important;padding:0 28px;font-size:20px;text-align:center;justify-content:center}
.hero-action>span:first-child{width:100%;text-align:center}
.hero-action .motion-arrow{display:none!important}

/* Cleaner, larger and slower opening mark. No lower-right extrusion or cast shadow. */
.intro-stage{width:780px;height:590px}
.intro-logo-scene,.intro-logo-3d{width:440px;height:440px}
.intro-logo-depth,.intro-logo-shadow{display:none!important}
.intro-logo-face{box-shadow:none!important;overflow:hidden}
.intro-logo-rim{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;border-color:rgba(79,157,183,.38)!important}
.intro-logo-scene::before,.intro-logo-scene::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);border:1px solid rgba(40,86,106,.13);animation:introHalo 2.9s ease-in-out infinite}
.intro-logo-scene::before{width:478px;height:478px}
.intro-logo-scene::after{width:514px;height:514px;border-style:dashed;border-color:rgba(217,166,47,.16);animation-delay:-1.15s}
@keyframes introHalo{0%,100%{opacity:.30;transform:translate(-50%,-50%) scale(.985)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.018)}}
.intro-wordmark{gap:22px}
.intro-brush{font-size:108px}
.intro-block{font-size:66px}
.intro-sub{font-size:22px;margin-top:18px}
@media (min-width:901px) and (max-height:840px){
  .intro-stage{width:690px;height:500px}
  .intro-logo-scene,.intro-logo-3d{width:405px;height:405px}
  .intro-logo-scene::before{width:440px;height:440px}.intro-logo-scene::after{width:472px;height:472px}
  .intro-brush{font-size:100px}.intro-block{font-size:62px}.intro-sub{font-size:20px}
}
@media (min-width:701px) and (max-width:900px){
  .intro-stage{width:560px;height:430px}
  .intro-logo-scene,.intro-logo-3d{width:310px;height:310px}
  .intro-logo-scene::before{width:340px;height:340px}.intro-logo-scene::after{width:366px;height:366px}
  .intro-brush{font-size:72px}.intro-block{font-size:46px}.intro-sub{font-size:17px}
}

/* Admin control for the single global round site logo. */
.site-logo-admin-row{display:grid;grid-template-columns:94px minmax(0,1fr);gap:18px;align-items:center}
.site-logo-admin-preview{width:94px;height:94px;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong);background:#eef2ef;box-shadow:var(--shadow-soft)}
.site-logo-admin-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
@media (max-width:700px){
  .site-logo-admin-row{grid-template-columns:72px minmax(0,1fr)}.site-logo-admin-preview{width:72px;height:72px}.site-logo-admin-fields{grid-template-columns:1fr}
  .wechat-hero h1{white-space:normal}
}

/* ===== V16.1 visual calibration after desktop review ===== */
@media (min-width:1101px){
  .site-header .nav{gap:clamp(9px,.95vw,19px)}
  .site-header .nav-link{font-size:clamp(18px,1.30vw,20.5px)}
  .footer-links{gap:clamp(8px,.85vw,17px)}
  .footer-links a{font-size:clamp(17.5px,1.14vw,19.5px)!important}
  .admin-link{font-size:18px!important}
  .about-logo-stage{width:430px;height:430px}
  .about-logo-stage img,.about-logo-float img{width:310px;height:310px}
}
@media (min-width:701px) and (max-width:1100px){
  .site-header .nav{gap:clamp(3px,.54vw,6px)}
  .site-header .nav-link{font-size:clamp(14.5px,1.58vw,17px)}
  .footer-links{gap:clamp(3px,.52vw,6px)!important}
  .footer-links a{font-size:clamp(14px,1.52vw,16.5px)!important}
  .admin-link{font-size:clamp(14px,1.5vw,16px)!important}
  .about-logo-stage{width:clamp(320px,35vw,370px)!important;height:clamp(320px,35vw,370px)!important}
  .about-logo-stage img,.about-logo-float img{width:clamp(225px,24.5vw,260px)!important;height:clamp(225px,24.5vw,260px)!important}
}
.tools-page .catalog-main,.library-page .catalog-main,.training-page .catalog-main,.wechat-page .catalog-main{padding-top:clamp(14px,1.55vw,22px)}
.exercises-page .resource-main{padding-top:20px}
.wechat-main{padding-top:14px}
.about-people-section{padding-top:clamp(8px,1.2vh,14px)!important}
.about-people-head{margin-bottom:clamp(14px,2vh,24px)!important}
@media (min-width:901px) and (max-height:840px){
  .intro-stage{width:710px;height:510px}
  .intro-logo-scene,.intro-logo-3d{width:410px;height:410px}
  .intro-logo-scene::before{width:446px;height:446px}.intro-logo-scene::after{width:478px;height:478px}
  .intro-brush{font-size:102px}.intro-block{font-size:64px}.intro-sub{font-size:21px}
}
@media (min-width:701px) and (max-width:900px){
  .site-header .header-actions{grid-column:3!important;justify-self:end}
}
@media (min-width:701px) and (max-width:1100px){
  .site-header .nav-link{font-size:clamp(15.5px,1.58vw,17px)}
  .footer-links a{font-size:clamp(15px,1.52vw,16.5px)!important}
}


/* ===== V17 layout-rhythm polish: requested navigation, cues, library/WeChat alignment ===== */
:root{--footer-h:73px}

/* More breathing room between all eight navigation items without reducing the enlarged type. */
@media (min-width:1101px){
  .site-header .nav{gap:clamp(16px,1.45vw,28px)!important}
  .footer-links{gap:clamp(14px,1.30vw,25px)!important}
}
@media (min-width:701px) and (max-width:1100px){
  .site-header .container,.site-footer .container{width:calc(100% - 24px)}
  .site-header .nav{gap:clamp(9px,1.12vw,13px)!important}
  .footer-links{gap:clamp(8.5px,1.02vw,12px)!important}
}

/* Footer is 1.1x the R2 66px height on every public page. */
.site-footer,.footer-inner{height:var(--footer-h)!important;min-height:var(--footer-h)!important}
.about-footer{flex:0 0 var(--footer-h)!important}
.closing-inner{min-height:calc(100svh - var(--header-h) - var(--footer-h))!important}
.exercises-page .site-footer,.exercises-page .footer-inner{height:var(--footer-h)!important;min-height:var(--footer-h)!important}

/* Paged cues are positional anchors, not transition pieces. The cue stays fixed; only its ink breathes. */
.home-page .scroll-cue,.about-page .scroll-cue{display:grid!important;bottom:14px!important;transform:translateX(-50%)!important}
.scroll-cue b,.scroll-cue-icon{animation:none!important;transform:none!important}
.scroll-cue-icon svg{animation:cueInkPulse 1.85s ease-in-out infinite;transform:none!important}
.scroll-cue-icon::after{animation:cueDotPulse 1.85s ease-in-out infinite!important;transform:translateX(-50%)!important}
@keyframes cueInkPulse{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes cueDotPulse{0%,100%{opacity:.22}50%{opacity:.72}}

/* Exercise sidebar uses the exact same top tab height and footer rhythm as course resources. */
.resources-page .resource-mode-tabs,.exercises-page .resource-mode-tabs{height:64px!important;min-height:64px!important}
.resources-page .resource-mode-tab,.exercises-page .resource-mode-tab{height:64px!important;min-height:64px!important}

/* WeChat: tighten the gap between the account hero and the article list. */
.wechat-hero{padding-bottom:22px!important}
.wechat-content{padding-top:18px!important}
.wechat-section-head{margin-bottom:24px}

/* Library: search is part of the heading row; its bottom edge aligns with the subtitle baseline area. */
.library-head{align-items:flex-end!important;margin-bottom:34px!important}
.library-head-tools{flex:0 1 min(520px,42vw);width:min(520px,42vw);display:grid;justify-items:end;align-self:flex-end;gap:8px}
.library-head-tools>span{color:#77827f;font-size:14px;padding-right:4px}
.library-head-tools .resources-search{width:100%}
.library-search-row{display:none!important}

/* About: a little more air on the left of the first screen, while keeping the same two-column composition. */
@media (min-width:701px){
  .about-brand-grid .about-hero-copy{padding-left:clamp(26px,3vw,52px)}
}

/* Team/contact headings sit comfortably below the header—not flush against it, not vertically centered. */
.about-people-section{padding-top:clamp(34px,4.4vh,52px)!important;padding-bottom:72px!important}
.about-people-head{margin-bottom:clamp(20px,2.8vh,30px)!important}
@media (min-width:701px) and (max-height:780px){
  .about-people-section{padding-top:32px!important;padding-bottom:60px!important}
  .about-people-head{margin-bottom:18px!important}
}

@media (max-width:700px){
  .library-head-tools{width:100%;max-width:520px;justify-items:stretch}
  .library-head-tools>span{justify-self:end}
}


/* ===== V18 screenshot-driven refinement: shared directories, true footer floor, wall shelf, people motion ===== */

/* Navigation: give the eight items more air by using more of the header/footer width, not by shrinking text. */
@media (min-width:1101px){
  .site-header>.container,.site-footer>.container{width:min(1810px,calc(100% - clamp(44px,5.6vw,96px)))}
  .site-header .nav{gap:clamp(22px,1.75vw,34px)!important}
  .footer-links{gap:clamp(19px,1.55vw,31px)!important}
}
@media (min-width:701px) and (max-width:1100px){
  .site-header>.container,.site-footer>.container{width:calc(100% - 18px)!important}
  .site-header .nav{gap:clamp(10px,1.32vw,15px)!important}
  .footer-links{gap:clamp(9.5px,1.18vw,14px)!important}
}

/* The resource main owns the remaining viewport, so a short/failed exercise list cannot leave fake footer space. */
.resources-page .resource-main,.exercises-page .resource-main{
  min-height:calc(100svh - var(--header-h) - var(--footer-h));
  box-sizing:border-box;
}

/* Course and exercise directories now share one outer geometry and surface exactly. */
.resources-page .resource-sidebar,.exercises-page .resource-sidebar{
  position:sticky!important;
  top:calc(var(--header-h) + 20px)!important;
  align-self:start;
  height:clamp(420px,58svh,535px);
  min-height:clamp(420px,58svh,535px);
  max-height:calc(100svh - var(--header-h) - 38px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  scrollbar-width:thin;
}
.resources-page .resource-mode-tabs,.exercises-page .resource-mode-tabs{
  height:64px!important;min-height:64px!important;background:#fbfbf8!important;border-radius:14px 14px 0 0!important;
}
.resources-page .resource-mode-tab,.exercises-page .resource-mode-tab{height:64px!important;min-height:64px!important}
.exercises-page .exercise-tree{padding:0 0 16px}
.exercises-page .exercise-all{min-height:64px;padding:0 18px 0 22px;font-size:16px;border-bottom:1px solid rgba(225,229,225,.65)}
.exercises-page .exercise-tree-group{border-top:0;border-bottom:1px solid rgba(225,229,225,.65)}
.exercises-page .exercise-tree-group .tree-unit{min-height:50px;padding:0 17px 0 18px;font-size:16px;border-left:2px solid transparent}
.exercises-page .exercise-tree-group .tree-lesson{min-height:43px;padding:0 16px 0 36px;font-size:14.5px;border-left:2px solid transparent}
.exercises-page .exercise-all em,.exercises-page .exercise-tree-group em{background:#f1f3f0;border-radius:6px;padding:3px 7px;font-size:13px}
@media (min-width:701px) and (max-width:1100px){
  .resources-page .resource-sidebar,.exercises-page .resource-sidebar{height:clamp(390px,56svh,500px);min-height:clamp(390px,56svh,500px)}
}

/* A wall-mounted digital shelf: no wood texture, only the existing cream / Mingxing blue language. */
.library-wall{
  position:relative;
  border:1px solid rgba(205,214,210,.82);
  border-radius:18px;
  padding:clamp(54px,5vw,76px) clamp(20px,2.5vw,38px) clamp(38px,4vw,58px);
  background:
    linear-gradient(90deg,rgba(40,86,106,.022) 1px,transparent 1px),
    linear-gradient(rgba(40,86,106,.018) 1px,transparent 1px),
    rgba(250,250,247,.72);
  background-size:54px 54px;
  overflow:hidden;
}
.library-wall::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 84% 18%,rgba(40,86,106,.055),transparent 23%),radial-gradient(circle at 12% 78%,rgba(217,166,47,.045),transparent 21%);
}
.library-wall-mark{position:absolute;left:clamp(22px,2.6vw,42px);top:18px;display:flex;align-items:baseline;gap:10px;color:rgba(40,86,106,.55);letter-spacing:.1em}
.library-wall-mark span{font-family:"Songti SC","STSong",SimSun,serif;font-size:15px;font-weight:700}.library-wall-mark b{font:650 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;color:#9aa4a1}
.library-shelf{display:grid!important;gap:clamp(46px,5.5vw,72px)!important;padding:0!important;position:relative;z-index:1}
.library-shelf::after{display:none!important}
.library-shelf-row{position:relative;padding:0 clamp(12px,1.5vw,24px) 31px}
.library-books{min-height:300px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(22px,2.2vw,38px)}
.library-shelf-row .book-card{width:clamp(142px,11.2vw,190px);flex:0 1 clamp(142px,11.2vw,190px)}
.wall-shelf{position:absolute;left:1.2%;right:1.2%;bottom:4px;height:28px;pointer-events:none}
.wall-shelf>span{position:absolute;left:0;right:0;top:0;height:10px;border:1px solid rgba(40,86,106,.28);border-radius:4px;background:linear-gradient(180deg,#f9fbf8,#e7eeeb);box-shadow:0 8px 16px rgba(31,70,86,.08),inset 0 -2px 0 rgba(40,86,106,.08)}
.wall-shelf>span::after{content:"";position:absolute;left:2.5%;right:2.5%;bottom:-5px;height:1px;background:rgba(40,86,106,.16)}
.wall-shelf>i{position:absolute;top:9px;width:30px;height:18px;border:1px solid rgba(40,86,106,.24);border-top:0;border-radius:0 0 7px 7px;background:linear-gradient(90deg,rgba(237,243,243,.55),rgba(255,255,255,.72));box-shadow:0 5px 8px rgba(31,70,86,.045)}
.wall-shelf>i::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#f7f7f3;border:1px solid rgba(40,86,106,.28);left:50%;top:5px;transform:translateX(-50%)}
.wall-shelf>i:first-child{left:12%}.wall-shelf>i:nth-child(2){right:12%}
.library-wall .book-card-copy{padding-top:11px;text-align:center}.library-wall .book-card-copy h3{font-size:18px}.library-wall .book-card-copy p{font-size:12px}
.library-wall .book-cover{box-shadow:5px 8px 18px rgba(31,52,56,.08),0 1px 0 rgba(255,255,255,.7)}
.library-empty{width:100%;min-height:330px}
@media (min-width:701px) and (max-width:1100px){
  .library-wall{padding-inline:18px}.library-books{min-height:270px;gap:clamp(16px,2vw,25px)}.library-shelf-row .book-card{width:clamp(138px,17vw,174px);flex-basis:clamp(138px,17vw,174px)}
}

/* Team/contact headings move down again while still reserving ample biography height. */
.about-people-section{padding-top:clamp(58px,7.4vh,78px)!important;padding-bottom:72px!important}
.about-people-head{margin-bottom:clamp(22px,3vh,34px)!important}
@media (min-width:701px) and (max-height:780px){
  .about-people-section{padding-top:50px!important;padding-bottom:60px!important}
  .about-people-head{margin-bottom:20px!important}
}

/* Layered people motion: page transition moves the card, while its photo/text settle independently. */
.about-people-screen.is-active-section .member-card .member-photo,
.about-people-screen.is-active-section .contact-card::before{
  animation:peopleMediaIn 720ms calc(120ms + var(--people-order,0)*70ms) cubic-bezier(.16,1,.3,1) both;
}
.about-people-screen.is-active-section .member-card .member-copy,
.about-people-screen.is-active-section .contact-card>*{
  animation:peopleCopyIn 680ms calc(190ms + var(--people-order,0)*70ms) cubic-bezier(.16,1,.3,1) both;
}
.contact-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand),rgba(40,86,106,.18));transform-origin:top}
@keyframes peopleMediaIn{from{opacity:.20;transform:translate3d(0,18px,0) scale(1.025)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes peopleCopyIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){
  .about-people-screen.is-active-section .member-card .member-photo,.about-people-screen.is-active-section .member-card .member-copy,.about-people-screen.is-active-section .contact-card::before,.about-people-screen.is-active-section .contact-card>*{animation:none!important}
}

/* V18.1 — shelf rail sits directly beneath the book covers, so the books visually rest on the wall shelf. */
.library-shelf-row{padding-bottom:38px}
.library-books{align-items:flex-start;min-height:calc(clamp(142px,11.2vw,190px) * 1.5 + 76px)}
.library-wall .book-card-copy{padding-top:24px}
.wall-shelf{top:calc(clamp(142px,11.2vw,190px) * 1.5 - 2px);bottom:auto;z-index:0}
.library-shelf-row .book-card{z-index:1}
@media (min-width:701px) and (max-width:1100px){
  .library-books{min-height:calc(clamp(138px,17vw,174px) * 1.5 + 72px)}
  .wall-shelf{top:calc(clamp(138px,17vw,174px) * 1.5 - 2px)}
}


/* ===== V19 cue reliability / navigation emphasis / click-flow polish ===== */

/* One cue is anchored to the viewport, never to a moving screen. It can fade, but it never changes position. */
.home-page .paged-global-cue,.about-page .paged-global-cue{
  position:fixed!important;
  left:50%!important;
  bottom:clamp(13px,1.8vh,18px)!important;
  z-index:82!important;
  transform:translateX(-50%)!important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 180ms ease,visibility 0s linear 0s!important;
  will-change:opacity;
}
.home-page .paged-global-cue.is-cue-hidden,.about-page .paged-global-cue.is-cue-hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity 160ms ease,visibility 0s linear 160ms!important;
}
.paged-global-cue.no-cue-transition{transition:none!important}
body.is-page-transitioning .paged-global-cue{transform:translateX(-50%)!important;filter:none!important}

/* The third home screen contains four rows; lift title + board and reserve a clean lane for the fixed cue. */
.updates-screen .section-layout{
  padding-top:clamp(38px,5.0vh,58px)!important;
  padding-bottom:clamp(92px,11vh,118px)!important;
}
.updates-screen .updates-heading{margin-bottom:clamp(18px,2.5vh,27px)!important}
@media (min-width:901px) and (max-height:820px){
  .updates-screen .section-layout{padding-top:30px!important;padding-bottom:94px!important}
  .updates-screen .updates-heading{margin-bottom:17px!important}
}

/* Stronger top-navigation hover, expressed with the existing Mingxing blue and the existing underline language. */
.site-header .nav-link{
  isolation:isolate;
  transition:color 220ms ease,transform 220ms cubic-bezier(.16,1,.3,1),text-shadow 220ms ease!important;
}
.site-header .nav-link::before{
  content:"";
  position:absolute;
  left:-8px;right:-8px;top:16px;bottom:16px;
  z-index:-1;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(40,86,106,.065));
  box-shadow:inset 0 0 0 1px rgba(40,86,106,.075),0 7px 18px rgba(31,70,86,.045);
  opacity:0;
  transform:scale(.88);
  transition:opacity 220ms ease,transform 260ms cubic-bezier(.16,1,.3,1),box-shadow 220ms ease;
}
.site-header .nav-link:hover{
  color:var(--brand-dark)!important;
  transform:translate3d(0,-1px,0);
  text-shadow:0 5px 14px rgba(40,86,106,.10);
}
.site-header .nav-link:hover::before{opacity:1;transform:scale(1)}
.site-header .nav-link:hover::after{width:72%}
.site-header .nav-link.is-active::after{width:100%}
.site-header .nav-link:active{transform:translate3d(0,0,0) scale(.975)}

/* Footer links get the same family of feedback, but remain quieter than the primary navigation. */
.footer-links a,.admin-link{transition:color 200ms ease,transform 200ms cubic-bezier(.16,1,.3,1),text-shadow 200ms ease!important}
.footer-links a:hover,.admin-link:hover{transform:translate3d(0,-1px,0);text-shadow:0 4px 12px rgba(40,86,106,.09)}
.footer-links a:active,.admin-link:active{transform:scale(.98)}

/* Immediate tactile feedback before cross-page / viewer navigation starts. */
.hero-action,.function-card,.update-row,.resource-card,.tool-card,.exercise-card,.wechat-card,.book-card,.training-card,
.library-shelf-row .book-card,.catalog-card{
  -webkit-tap-highlight-color:transparent;
}
.hero-action:active,.function-card:active,.update-row:active,.resource-card:active,.tool-card:active,.exercise-card:active,
.wechat-card:active,.book-card:active,.training-card:active,.catalog-card:active{
  transition-duration:85ms!important;
  transform:translate3d(0,-1px,0) scale(.992)!important;
}

/* Native cross-document transition: crisp movement only; no blur/fuzzy frame during a click. */
::view-transition-group(root){animation-duration:380ms!important;animation-timing-function:cubic-bezier(.16,1,.3,1)!important}
::view-transition-old(root){animation:mxPageOldV19 245ms cubic-bezier(.4,0,.2,1) both!important}
::view-transition-new(root){animation:mxPageNewV19 380ms cubic-bezier(.16,1,.3,1) both!important}
@keyframes mxPageOldV19{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:.12;transform:translate3d(0,-7px,0) scale(.998)}}
@keyframes mxPageNewV19{from{opacity:.12;transform:translate3d(0,9px,0) scale(.998)}65%{opacity:.93;transform:translate3d(0,1px,0) scale(.9997)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .home-page .paged-global-cue,.about-page .paged-global-cue{transition:none!important}
  .site-header .nav-link,.site-header .nav-link::before,.footer-links a,.admin-link{transition:none!important;transform:none!important}
}
/* V19.1 — lift the entire latest-updates composition so four ribbons and the fixed cue never compete. */
.updates-screen .screen-stage{transform:translate3d(0,clamp(-90px,-9.2vh,-68px),0)!important}
@media (min-width:901px) and (max-height:820px){.updates-screen .screen-stage{transform:translate3d(0,-74px,0)!important}}
/* V19.2 — keep the third-screen title fully clear of the fixed header while making four update ribbons comfortably fit above the cue. */
.updates-screen .screen-stage{transform:translate3d(0,-28px,0)!important}
.updates-screen .updates-list{gap:11px!important}
.updates-screen .update-row{min-height:104px!important;padding:13px 20px!important}
.updates-screen .update-row:hover{padding:13px 20px!important}
@media (min-width:901px) and (max-height:820px){
  .updates-screen .screen-stage{transform:translate3d(0,-22px,0)!important}
  .updates-screen .update-row{min-height:96px!important;padding:10px 18px!important}
  .updates-screen .update-row:hover{padding:10px 18px!important}
  .updates-screen .updates-list{gap:9px!important}
}


/* ===== V21 member-card equal-height system =====
   Team pages stay visually balanced even when member biographies differ in length.
   The outer card height and inner content rows are explicit on desktop/tablet;
   long copy is contained inside the biography area instead of stretching one card. */
.member-grid{align-items:stretch}
.member-card{display:flex;flex-direction:column;align-self:stretch}
.member-card .member-photo{flex:0 0 auto}
.member-card .member-copy{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  align-content:stretch;
}
.member-card .member-name-line{
  height:clamp(30px,2.55vw,38px);
  min-height:clamp(30px,2.55vw,38px);
  align-items:flex-start;
}
.member-card .member-name-line h3{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.member-card .member-name-line span{
  flex:0 1 44%;
  min-width:0;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.member-card .member-research{
  height:58px;
  min-height:58px;
  margin-bottom:10px;
  overflow:hidden;
}
.member-card .member-research span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.member-card .member-research.is-empty{visibility:hidden}
.member-card .member-bio{
  min-height:0;
  align-self:stretch;
  overflow:hidden;
}

/* Every desktop/tablet team page contains at most four members, so they share one
   flex row.  Explicit stretch makes the tallest card define the row and the other
   cards match it exactly; this avoids hard-coded heights and therefore never clips
   a long biography just to achieve visual equality. */
@media (min-width:701px){
  .member-grid{align-items:stretch}
  .member-card{height:auto;min-height:0}
}
@media (min-width:701px) and (max-width:1100px){
  .member-card .member-research{height:54px;min-height:54px}
}
@media (min-width:701px) and (max-height:780px){
  .member-card .member-name-line{min-height:28px;margin-bottom:8px}
  .member-card .member-research{height:56px;min-height:56px;margin-bottom:7px}
}
@media (max-width:700px){
  .member-card .member-research{height:58px;min-height:58px}
}
@media (min-width:701px) and (min-height:781px) and (max-height:900px){
  .member-bio{-webkit-line-clamp:5}
}


/* ===== WeChat article reader R11 ===== */

.wechat-view-body{
  overflow:auto;
  background:#f4f5f1;
}

.wechat-article-page{
  min-height:100vh;
  padding:72px 24px 120px;
}

.wechat-article-page[hidden]{
  display:none;
}

.wechat-article-shell{
  width:min(820px,100%);
  margin:0 auto;
  padding:clamp(34px,5vw,68px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(25,38,40,.07);
}

.wechat-article-head{
  text-align:left;
}

.wechat-article-kicker{
  margin-bottom:18px;
  color:var(--brand);
  font-size:11px;
  letter-spacing:.18em;
}

.wechat-article-head h1{
  margin:0;
  color:var(--ink);
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:clamp(32px,5vw,50px);
  font-weight:600;
  line-height:1.28;
}

.wechat-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:20px;
  color:#78827f;
  font-size:14px;
}

.wechat-article-original{
  display:inline-flex;
  align-items:center;
  margin-top:18px;
  color:var(--brand);
  font-size:14px;
  font-weight:650;
}

.wechat-article-divider{
  height:1px;
  margin:34px 0 40px;
  background:var(--line);
}

.wechat-article-content{
  color:#303836;
  font-size:17px;
  line-height:1.9;
  overflow-wrap:anywhere;
}

.wechat-article-content section,
.wechat-article-content article,
.wechat-article-content div,
.wechat-article-content p{
  max-width:100%;
}

.wechat-article-content p{
  margin:1em 0;
}

.wechat-article-content h1,
.wechat-article-content h2,
.wechat-article-content h3,
.wechat-article-content h4,
.wechat-article-content h5,
.wechat-article-content h6{
  margin:1.6em 0 .7em;
  color:var(--ink);
  font-family:"Songti SC","STSong",SimSun,serif;
  line-height:1.45;
}

.wechat-article-content img{
  display:block;
  max-width:100%;
  height:auto;
  margin:24px auto;
  border-radius:8px;
}

.wechat-article-content blockquote{
  margin:24px 0;
  padding:14px 18px;
  color:#59635f;
  background:#f6f8f5;
  border-left:3px solid var(--brand);
}

.wechat-article-content table{
  width:100%;
  margin:22px 0;
  border-collapse:collapse;
}

.wechat-article-content th,
.wechat-article-content td{
  padding:9px 11px;
  border:1px solid var(--line);
}

.wechat-article-content pre{
  overflow:auto;
  padding:16px;
  background:#f4f6f3;
  border-radius:9px;
  font-size:14px;
  line-height:1.65;
}

.wechat-article-content a{
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:650px){
  .wechat-article-page{
    padding:28px 12px 88px;
  }

  .wechat-article-shell{
    padding:30px 20px 42px;
    border-radius:13px;
  }

  .wechat-article-head h1{
    font-size:31px;
  }

  .wechat-article-content{
    font-size:16px;
    line-height:1.85;
  }
}


/* ===== Admin Analytics Dashboard 20260817 ===== */

#view-analytics{
  --analytics-gold:#b3915f;
}

.analytics-admin-top{
  align-items:flex-start;
}

.analytics-live-status{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  letter-spacing:.04em;
}

.analytics-live-dot,
.analytics-inline-live{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 5px rgba(40,83,78,.08);
}

.analytics-live-dot{
  animation:analyticsPulse 2s ease-in-out infinite;
}

@keyframes analyticsPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(40,83,78,.08)}
  50%{box-shadow:0 0 0 8px rgba(40,83,78,.02)}
}

.analytics-metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 20px;
}

.analytics-metric-card{
  position:relative;
  min-height:178px;
  padding:22px 24px 20px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,249,246,.96));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 36px rgba(30,48,47,.055);
}

.analytics-metric-card::after{
  content:"";
  position:absolute;
  right:-44px;
  bottom:-54px;
  width:150px;
  height:150px;
  border:1px solid rgba(41,78,74,.07);
  border-radius:50%;
}

.analytics-live-card::after{
  border-color:rgba(179,145,95,.13);
}

.analytics-metric-icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:10px;
  background:rgba(46,82,78,.075);
}

.analytics-metric-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:var(--brand);
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.analytics-live-card .analytics-metric-icon{
  background:rgba(179,145,95,.10);
}

.analytics-live-card .analytics-metric-icon svg{
  stroke:var(--analytics-gold);
}

.analytics-metric-card>span{
  display:block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
}

.analytics-metric-card>strong{
  position:relative;
  z-index:1;
  display:block;
  margin:8px 0 7px;
  color:var(--ink);
  font-size:clamp(34px,3.2vw,48px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}

.analytics-metric-card>small{
  position:relative;
  z-index:1;
  color:#89928f;
  font-size:10px;
  letter-spacing:.08em;
}

.analytics-inline-live{
  width:6px;
  height:6px;
  margin-right:4px;
  vertical-align:1px;
}

.analytics-chart-panel{
  padding:24px 26px 20px;
  overflow:hidden;
}

.analytics-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.analytics-chart-head h2{
  margin:4px 0 5px;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:25px;
  font-weight:600;
}

.analytics-chart-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.analytics-range-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f4f6f3;
}

.analytics-range-tabs button{
  min-width:64px;
  height:32px;
  padding:0 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#737e7a;
  cursor:pointer;
  font-size:12px;
  transition:background 160ms ease,color 160ms ease,box-shadow 160ms ease;
}

.analytics-range-tabs button:hover{
  color:var(--ink);
}

.analytics-range-tabs button.active{
  background:#fff;
  color:var(--brand);
  box-shadow:0 2px 7px rgba(32,48,47,.08);
}

.analytics-legend{
  display:flex;
  gap:20px;
  margin:23px 0 4px;
  color:#68736f;
  font-size:11px;
}

.analytics-legend span{
  display:flex;
  align-items:center;
  gap:7px;
}

.analytics-legend i{
  width:18px;
  height:2px;
  border-radius:999px;
}

.analytics-legend-view{
  background:var(--brand);
}

.analytics-legend-visitor{
  background:var(--analytics-gold);
}

.analytics-chart-wrap{
  position:relative;
  min-height:360px;
  margin-top:4px;
  overflow:hidden;
}

.analytics-chart-svg{
  display:block;
  width:100%;
  height:auto;
  min-height:340px;
}

.analytics-chart-svg text{
  fill:#8a9490;
  font-family:inherit;
  font-size:10px;
}

.analytics-grid-line{
  stroke:rgba(81,99,95,.10);
  stroke-width:1;
}

.analytics-view-line{
  fill:none;
  stroke:var(--brand);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.analytics-visitor-line{
  fill:none;
  stroke:var(--analytics-gold);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.analytics-view-area{
  fill:url(#analyticsViewArea);
}

.analytics-chart-loading,
.analytics-chart-empty,
.analytics-chart-error{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
}

.analytics-chart-error{
  color:#9c6058;
}

.analytics-chart-tooltip{
  position:absolute;
  z-index:5;
  min-width:132px;
  padding:10px 12px;
  pointer-events:none;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,252,.97);
  box-shadow:0 12px 30px rgba(25,42,41,.12);
  transform:translate(-50%,-110%);
}

.analytics-chart-tooltip strong{
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  font-size:11px;
}

.analytics-chart-tooltip span{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

.analytics-chart-tooltip b{
  color:var(--ink);
  font-weight:650;
}

.analytics-chart-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:#929b98;
  font-size:10px;
}

@media (max-width:900px){
  .analytics-metric-grid{
    grid-template-columns:1fr;
  }

  .analytics-metric-card{
    min-height:150px;
  }

  .analytics-chart-head{
    flex-direction:column;
  }

  .analytics-range-tabs{
    align-self:flex-start;
  }
}

@media (max-width:560px){
  .analytics-chart-panel{
    padding:18px 14px;
  }

  .analytics-chart-wrap{
    min-height:300px;
  }

  .analytics-chart-svg{
    min-height:290px;
  }
}


/* ===== Catalog Sidebar System 20260817 ===== */

.catalog-sidebar-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(26px,3.4vw,52px);
  align-items:start;
}

.catalog-filter-sidebar{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  max-height:calc(100svh - var(--header-h) - 48px);
  overflow:auto;
  padding:6px 6px 22px 2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(86,104,99,.18) transparent;
}

.catalog-sidebar-head{
  padding:0 12px 20px;
}

.catalog-sidebar-head h1{
  margin:6px 0 8px;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:36px;
  font-weight:600;
  letter-spacing:-.035em;
  color:var(--ink);
}

.catalog-sidebar-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.catalog-sidebar-search{
  position:relative;
  margin:0 8px 22px;
}

.catalog-sidebar-search .search-icon{
  position:absolute;
  left:13px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  stroke:var(--muted);
}

.catalog-sidebar-search .search-input{
  width:100%;
  height:42px;
  padding:0 12px 0 39px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.68);
  font-size:12px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.catalog-sidebar-search .search-input:focus{
  outline:0;
  background:#fff;
  border-color:rgba(52,88,82,.42);
  box-shadow:0 0 0 4px rgba(46,82,78,.055);
}

.catalog-filter-section{
  margin-bottom:22px;
}

.catalog-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 13px 7px;
  color:#8a9591;
}

.catalog-filter-title span{
  font-size:11px;
  font-weight:650;
  letter-spacing:.08em;
}

.catalog-filter-title small{
  font-size:8px;
  letter-spacing:.14em;
  opacity:.65;
}

.catalog-filter-item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:8px 12px 8px 15px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#66716d;
  text-align:left;
  cursor:pointer;
  transition:
    color 180ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(.16,1,.3,1);
}

.catalog-filter-item::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:2px;
  border-radius:999px;
  background:var(--brand);
  opacity:0;
  transform:scaleY(.35);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(.16,1,.3,1);
}

.catalog-filter-item:hover{
  color:var(--ink);
  background:rgba(52,82,77,.045);
  transform:translateX(2px);
}

.catalog-filter-item.is-selected{
  color:var(--brand);
  background:rgba(46,82,78,.075);
}

.catalog-filter-item.is-selected::before{
  opacity:1;
  transform:scaleY(1);
}

.catalog-filter-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.catalog-filter-item em{
  min-width:23px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(77,94,89,.065);
  color:#89928f;
  font-size:9px;
  font-style:normal;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.catalog-filter-item.is-selected em{
  background:rgba(46,82,78,.11);
  color:var(--brand);
}

.catalog-filter-empty{
  margin:4px 13px;
  color:#a1aaa7;
  font-size:10px;
}

.catalog-sidebar-content{
  min-width:0;
}

.catalog-content-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:28px;
}

.catalog-content-head h2{
  margin:5px 0 7px;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:clamp(32px,3.6vw,52px);
  font-weight:600;
  letter-spacing:-.04em;
}

.catalog-content-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.catalog-result-count{
  flex:none;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.58);
  font-size:11px;
}

.library-page .library-main{
  padding-top:0;
}

/* 筛选变化时浏览器原生 View Transition */
::view-transition-old(root){
  animation-duration:180ms;
}

::view-transition-new(root){
  animation-duration:260ms;
}

@media (max-width:900px){
  .catalog-sidebar-layout{
    display:block;
  }

  .catalog-filter-sidebar{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    margin-bottom:30px;
    padding:0;
  }

  .catalog-sidebar-head{
    padding-left:0;
    padding-right:0;
  }

  .catalog-sidebar-head h1{
    font-size:34px;
  }

  .catalog-sidebar-search{
    margin-left:0;
    margin-right:0;
  }

  .catalog-filter-nav{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 8px;
    scrollbar-width:none;
  }

  .catalog-filter-nav::-webkit-scrollbar{
    display:none;
  }

  .catalog-filter-section{
    display:flex;
    gap:7px;
    margin:0;
    flex:none;
  }

  .catalog-filter-title{
    display:none;
  }

  .catalog-filter-section>div{
    display:flex;
    gap:7px;
  }

  .catalog-filter-item{
    width:auto;
    min-width:max-content;
    min-height:36px;
    padding:7px 11px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.55);
  }

  .catalog-filter-item::before{
    display:none;
  }

  .catalog-filter-item:hover{
    transform:none;
  }

  .catalog-filter-item.is-selected{
    border-color:rgba(46,82,78,.26);
  }
}

@media (max-width:560px){
  .catalog-content-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (prefers-reduced-motion:reduce){
  .catalog-filter-item,
  .catalog-filter-item::before{
    transition:none!important;
  }
}


/* ===== Library Directory Typography R2 ===== */

.library-page .catalog-filter-sidebar{
  width:100%;
}

.library-page .catalog-sidebar-head h1{
  font-size:44px;
  line-height:1.08;
}

.library-page .catalog-sidebar-head p{
  font-size:14px;
  line-height:1.75;
}

.library-page .catalog-sidebar-search .search-input{
  height:46px;
  font-size:14px;
}

.library-page .catalog-filter-title{
  padding-top:4px;
  padding-bottom:10px;
}

.library-page .catalog-filter-title span{
  font-size:14px;
  font-weight:650;
  letter-spacing:.06em;
}

.library-page .catalog-filter-title small{
  font-size:10px;
}

.library-page .catalog-filter-item{
  min-height:48px;
  padding:10px 13px 10px 18px;
  border-radius:11px;
}

.library-page .catalog-filter-item span{
  font-size:15px;
  line-height:1.35;
  font-weight:520;
}

.library-page .catalog-filter-item em{
  min-width:29px;
  padding:3px 7px;
  font-size:11px;
}

.library-page .catalog-filter-item::before{
  top:10px;
  bottom:10px;
  width:3px;
}

.library-page
.catalog-filter-item.is-selected span{
  font-weight:650;
}

.library-page .catalog-filter-empty{
  font-size:13px;
}

@media (min-width:901px){
  .library-page .catalog-sidebar-layout{
    grid-template-columns:
      minmax(255px,285px)
      minmax(0,1fr);
  }
}

@media (max-width:900px){
  .library-page .catalog-filter-item{
    min-height:42px;
    padding:9px 13px;
  }

  .library-page .catalog-filter-item span{
    font-size:14px;
  }
}


/* ===== Training Directory Typography R2 ===== */

.training-page .catalog-sidebar-head h1{
  font-size:44px;
  line-height:1.08;
}

.training-page .catalog-sidebar-head p{
  font-size:14px;
  line-height:1.75;
}

.training-page .catalog-sidebar-search .search-input{
  height:46px;
  font-size:14px;
}

.training-page .catalog-filter-title span{
  font-size:14px;
  font-weight:650;
}

.training-page .catalog-filter-title small{
  font-size:10px;
}

.training-page .catalog-filter-item{
  min-height:48px;
  padding:10px 13px 10px 18px;
  border-radius:11px;
}

.training-page .catalog-filter-item span{
  font-size:15px;
  line-height:1.35;
  font-weight:520;
}

.training-page .catalog-filter-item em{
  min-width:29px;
  padding:3px 7px;
  font-size:11px;
}

.training-page .catalog-filter-item::before{
  width:3px;
}

.training-page
.catalog-filter-item.is-selected span{
  font-weight:650;
}

.training-page .catalog-filter-empty{
  font-size:13px;
}

@media (min-width:901px){
  .training-page .catalog-sidebar-layout{
    grid-template-columns:
      minmax(255px,285px)
      minmax(0,1fr);
  }
}

@media (max-width:900px){
  .training-page .catalog-filter-item{
    min-height:42px;
    padding:9px 13px;
  }

  .training-page .catalog-filter-item span{
    font-size:14px;
  }
}


/* ===== WeChat Directory R2 ===== */

.wechat-page{
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(64,91,83,.05),
      transparent 28%
    ),
    var(--bg);
}

.wechat-page .wechat-main{
  min-height:auto;
}

.wechat-directory-layout{
  position:relative;
  z-index:2;
}

.wechat-page .catalog-sidebar-head h1{
  font-size:44px;
  line-height:1.08;
}

.wechat-page .catalog-sidebar-head p{
  font-size:14px;
  line-height:1.75;
}

.wechat-page
.catalog-sidebar-search
.search-input{
  height:46px;
  font-size:14px;
}

.wechat-page .catalog-filter-title span{
  font-size:14px;
  font-weight:650;
}

.wechat-page .catalog-filter-title small{
  font-size:10px;
}

.wechat-page .catalog-filter-item{
  min-height:48px;
  padding:10px 13px 10px 18px;
  border-radius:11px;
}

.wechat-page .catalog-filter-item span{
  font-size:15px;
  line-height:1.35;
  font-weight:520;
}

.wechat-page .catalog-filter-item em{
  min-width:29px;
  padding:3px 7px;
  font-size:11px;
}

.wechat-page
.catalog-filter-item.is-selected span{
  font-weight:650;
}

.wechat-page .catalog-filter-item::before{
  width:3px;
}

.wechat-directory-head{
  margin-bottom:30px;
}

.wechat-directory-head h2{
  max-width:780px;
}

.wechat-directory-content{
  min-height:60vh;
}

.wechat-directory-content .wechat-grid{
  margin-top:0;
}

@media (min-width:901px){
  .wechat-page .catalog-sidebar-layout{
    grid-template-columns:
      minmax(255px,285px)
      minmax(0,1fr);
  }
}

@media (max-width:900px){
  .wechat-page .catalog-filter-item{
    min-height:42px;
    padding:9px 13px;
  }

  .wechat-page .catalog-filter-item span{
    font-size:14px;
  }
}


/* ===== Member Adaptive Cards R3 ===== */

/* ---------- 整体 ---------- */

.about-people-section{
  width:min(1280px,92vw);
  margin-inline:auto;
}

.member-grid{
  width:100%;
  margin-inline:auto;
  align-items:stretch;
}

.member-card{
  position:relative;
  height:100%;
  overflow:hidden;

  border:
    1px solid rgba(54,72,70,.13);

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(248,249,246,.78)
    );

  box-shadow:
    0 16px 42px rgba(40,52,50,.055);

  transition:
    transform .34s cubic-bezier(.16,1,.3,1),
    border-color .34s ease,
    box-shadow .34s ease;

  will-change:
    transform,
    opacity;
}

.member-card:hover{
  transform:translate3d(0,-4px,0);

  border-color:
    rgba(42,76,72,.22);

  box-shadow:
    0 22px 58px rgba(38,54,51,.095);
}


/* ---------- 进入动画 ---------- */

.member-grid.member-motion-ready
.member-card{
  opacity:0;

  transform:
    translate3d(0,22px,0)
    scale(.982);

  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    border-color .34s ease,
    box-shadow .34s ease;

  transition-delay:
    var(--member-delay,0ms);
}

.member-grid.member-motion-ready
.member-card.is-member-visible{
  opacity:1;

  transform:
    translate3d(0,0,0)
    scale(1);
}

.member-grid.member-motion-ready
.member-card.is-member-visible:hover{
  transform:
    translate3d(0,-4px,0)
    scale(1);
}

.member-card.member-motion-done{
  transition-delay:0ms!important;
}


/* ---------- 照片：优先完整显示人物 ---------- */

.member-photo{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255,255,255,.96),
      rgba(239,242,238,.92) 58%,
      rgba(229,234,230,.9)
    );
}

.member-photo::after{
  content:"";
  position:absolute;
  inset:auto 10% 0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(44,71,68,.16),
      transparent
    );
}

.member-photo img{
  display:block;

  width:100%!important;
  height:100%!important;

  object-fit:contain!important;
  object-position:center top!important;

  transform:scale(1);

  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    filter .4s ease;

  filter:
    saturate(.94)
    contrast(.99);
}

.member-card:hover
.member-photo img{
  transform:scale(1.018);
}


/* ---------- 文字区 ---------- */

.member-copy{
  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;

  padding:24px 26px 26px;
}

.member-name-line{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px;
}

.member-name-line h3{
  margin:0;

  font-size:
    clamp(24px,2vw,31px);

  line-height:1.16;
  letter-spacing:.015em;
}

.member-name-line > span{
  font-size:13px;
  line-height:1.4;

  color:
    rgba(39,56,54,.6);
}

.member-research{
  margin:19px 0 0;

  display:grid;
  gap:7px;
}

.member-research b,
.member-bio-block > b{
  font-size:11px;

  letter-spacing:.12em;

  color:
    rgba(38,64,61,.48);

  font-weight:700;
}

.member-research span{
  font-size:15px;
  line-height:1.7;

  color:
    rgba(31,48,46,.78);
}

.member-bio-block{
  margin-top:19px;

  padding-top:18px;

  border-top:
    1px solid rgba(52,74,71,.1);

  display:flex;
  flex-direction:column;

  min-height:0;
  flex:1;
}

.member-bio{
  margin:8px 0 0;

  color:
    rgba(31,47,45,.72);

  font-size:14px;
  line-height:1.82;

  white-space:normal;

  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
}


/* ---------- 一人：横向大人物档案 ---------- */

.member-grid.count-1{
  display:flex;
  justify-content:center;

  max-width:960px;
}

.member-grid.count-1
.member-card{
  width:min(960px,90vw);

  display:grid;

  grid-template-columns:
    minmax(300px,40%)
    minmax(0,1fr);
}

.member-grid.count-1
.member-photo{
  min-height:100%;
  height:100%;
}

.member-grid.count-1
.member-copy{
  padding:
    32px 36px 34px;
}

.member-grid.count-1
.member-name-line h3{
  font-size:
    clamp(30px,2.4vw,38px);
}

.member-grid.count-1
.member-research span{
  font-size:16px;
}

.member-grid.count-1
.member-bio{
  font-size:15px;
  line-height:1.9;
}


/* 一人 + 字数 */

.member-grid.count-1.page-bio-short
.member-card{
  min-height:390px;
}

.member-grid.count-1.page-bio-medium
.member-card{
  min-height:430px;
}

.member-grid.count-1.page-bio-long
.member-card{
  min-height:470px;
}

.member-grid.count-1.page-bio-xlong
.member-card{
  min-height:500px;
}

.member-grid.count-1.page-bio-short
.member-bio{
  -webkit-line-clamp:7;
}

.member-grid.count-1.page-bio-medium
.member-bio{
  -webkit-line-clamp:10;
}

.member-grid.count-1.page-bio-long
.member-bio{
  -webkit-line-clamp:13;
}

.member-grid.count-1.page-bio-xlong
.member-bio{
  -webkit-line-clamp:10;
}


/* ---------- 两人 ---------- */

.member-grid.count-2{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:24px;

  max-width:1080px;
}

.member-grid.count-2
.member-card{
  display:flex;
  flex-direction:column;
}

.member-grid.count-2
.member-photo{
  height:250px;
  flex:0 0 250px;
}

.member-grid.count-2.page-bio-medium
.member-photo{
  height:235px;
  flex-basis:235px;
}

.member-grid.count-2.page-bio-long
.member-photo,
.member-grid.count-2.page-bio-xlong
.member-photo{
  height:220px;
  flex-basis:220px;
}

.member-grid.count-2.page-bio-short
.member-bio{
  -webkit-line-clamp:6;
}

.member-grid.count-2.page-bio-medium
.member-bio{
  -webkit-line-clamp:8;
}

.member-grid.count-2.page-bio-long
.member-bio{
  -webkit-line-clamp:9;
}

.member-grid.count-2.page-bio-xlong
.member-bio{
  -webkit-line-clamp:7;
}


/* ---------- 三人 ---------- */

.member-grid.count-3{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  max-width:1180px;
}

.member-grid.count-3
.member-card{
  display:flex;
  flex-direction:column;
}

.member-grid.count-3
.member-photo{
  height:220px;
  flex:0 0 220px;
}

.member-grid.count-3.page-bio-medium
.member-bio{
  -webkit-line-clamp:6;
}

.member-grid.count-3.page-bio-long
.member-bio,
.member-grid.count-3.page-bio-xlong
.member-bio{
  -webkit-line-clamp:5;
}


/* ---------- 四人 ---------- */

.member-grid.count-4{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:17px;

  max-width:1240px;
}

.member-grid.count-4
.member-card{
  display:flex;
  flex-direction:column;
}

.member-grid.count-4
.member-photo{
  height:190px;
  flex:0 0 190px;
}

.member-grid.count-4
.member-copy{
  padding:20px 20px 22px;
}

.member-grid.count-4
.member-name-line h3{
  font-size:
    clamp(21px,1.7vw,27px);
}

.member-grid.count-4
.member-bio{
  font-size:13px;
}

.member-grid.count-4.page-bio-short
.member-bio{
  -webkit-line-clamp:5;
}

.member-grid.count-4.page-bio-medium
.member-bio{
  -webkit-line-clamp:5;
}

.member-grid.count-4.page-bio-long
.member-bio,
.member-grid.count-4.page-bio-xlong
.member-bio{
  -webkit-line-clamp:4;
}


/* ---------- 完整介绍按钮 ---------- */

.member-more-button{
  appearance:none;

  margin-top:auto;
  padding:15px 0 0;

  border:0;
  background:transparent;

  display:inline-flex;
  align-items:center;
  gap:10px;

  width:max-content;

  color:
    rgba(25,67,63,.78);

  font:inherit;
  font-size:13px;

  cursor:pointer;

  transition:
    gap .3s cubic-bezier(.16,1,.3,1),
    color .3s ease;
}

.member-more-button i{
  font-style:normal;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1);
}

.member-more-button:hover{
  gap:14px;

  color:
    rgba(20,62,58,1);
}

.member-more-button:hover i{
  transform:translateX(4px);
}


/* ---------- 完整介绍侧滑层 ---------- */

body.member-detail-open{
  overflow:hidden;
}

.member-detail-layer{
  position:fixed;
  inset:0;

  z-index:1200;

  display:grid;

  grid-template-columns:
    1fr minmax(420px,650px);

  pointer-events:none;
}

.member-detail-layer[hidden]{
  display:none;
}

.member-detail-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(24,35,34,.06);

  backdrop-filter:
    blur(0);

  opacity:0;

  transition:
    opacity .32s ease,
    backdrop-filter .32s ease;
}

.member-detail-panel{
  position:relative;

  grid-column:2;

  z-index:2;

  height:100%;

  overflow:auto;

  padding:
    34px
    clamp(30px,4vw,56px)
    52px;

  border-left:
    1px solid rgba(45,68,65,.12);

  background:
    rgba(249,250,247,.97);

  box-shadow:
    -26px 0 70px
    rgba(27,40,38,.08);

  opacity:0;

  transform:
    translate3d(32px,0,0);

  transition:
    opacity .32s ease,
    transform .38s cubic-bezier(.16,1,.3,1);
}

.member-detail-layer.is-open{
  pointer-events:auto;
}

.member-detail-layer.is-open
.member-detail-backdrop{
  opacity:1;

  background:
    rgba(25,36,35,.18);

  backdrop-filter:
    blur(5px);
}

.member-detail-layer.is-open
.member-detail-panel{
  opacity:1;

  transform:
    translate3d(0,0,0);
}

.member-detail-close{
  position:sticky;
  top:0;

  margin-left:auto;

  z-index:3;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(43,67,64,.13);

  border-radius:999px;

  background:
    rgba(255,255,255,.86);

  color:#243735;

  font-size:27px;
  line-height:1;

  cursor:pointer;

  transition:
    transform .25s ease,
    background .25s ease;
}

.member-detail-close:hover{
  transform:rotate(5deg) scale(1.04);

  background:#fff;
}

.member-detail-photo{
  width:min(330px,76%);

  aspect-ratio:4/5;

  margin:
    12px auto 30px;

  overflow:hidden;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #f0f3ef,
      #e7ece8
    );
}

.member-detail-photo img{
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center top;
}

.member-detail-photo-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  font-size:56px;

  color:
    rgba(39,66,62,.28);
}

.member-detail-copy{
  max-width:520px;

  margin-inline:auto;
}

.member-detail-copy h2{
  margin:11px 0 0;

  font-size:
    clamp(32px,4vw,48px);

  line-height:1.08;
}

.member-detail-role{
  margin:11px 0 0;

  color:
    rgba(37,55,53,.6);

  font-size:15px;
}

.member-detail-research,
.member-detail-bio{
  margin-top:28px;
  padding-top:22px;

  border-top:
    1px solid rgba(45,68,65,.1);

  display:grid;
  gap:9px;
}

.member-detail-research small,
.member-detail-bio small{
  font-size:11px;
  font-weight:700;

  letter-spacing:.13em;

  color:
    rgba(37,61,58,.45);
}

.member-detail-research strong{
  font-size:17px;
  line-height:1.7;

  font-weight:550;
}

.member-detail-bio p{
  margin:0;

  font-size:15px;
  line-height:1.95;

  color:
    rgba(29,46,44,.78);

  white-space:pre-wrap;
}


/* ---------- 管理后台简介输入 ---------- */

.member-bio-editor{
  min-height:190px!important;

  resize:vertical;
}

.member-bio-editor-meta{
  margin-top:8px;

  display:flex;
  justify-content:space-between;
  gap:16px;

  font-size:12px;

  color:
    rgba(37,55,53,.52);
}

.member-bio-editor-meta strong{
  flex:none;

  color:
    rgba(29,63,59,.72);
}


/* ---------- 平板 ---------- */

@media(max-width:1000px){

  .member-grid.count-3,
  .member-grid.count-4{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    max-width:850px;
  }

  .member-grid.count-4
  .member-photo,
  .member-grid.count-3
  .member-photo{
    height:215px;
    flex-basis:215px;
  }
}


/* ---------- 手机 ---------- */

@media(max-width:760px){

  .member-grid.count-1,
  .member-grid.count-2,
  .member-grid.count-3,
  .member-grid.count-4{
    display:grid;

    grid-template-columns:1fr;

    width:100%;
    max-width:560px;
  }

  .member-grid.count-1
  .member-card{
    width:100%;

    display:flex;
    flex-direction:column;

    min-height:0!important;
  }

  .member-grid.count-1
  .member-photo,
  .member-grid.count-2
  .member-photo,
  .member-grid.count-3
  .member-photo,
  .member-grid.count-4
  .member-photo{
    width:100%;

    height:auto;
    min-height:0;

    flex:none;

    aspect-ratio:4/3;
  }

  .member-grid.count-1
  .member-copy{
    padding:25px 23px 28px;
  }

  .member-detail-layer{
    display:block;
  }

  .member-detail-panel{
    position:absolute;
    inset:auto 0 0;

    height:min(90vh,850px);

    border-left:0;

    border-top:
      1px solid rgba(45,68,65,.12);

    border-radius:
      22px 22px 0 0;

    transform:
      translate3d(0,30px,0);
  }

  .member-detail-layer.is-open
  .member-detail-panel{
    transform:
      translate3d(0,0,0);
  }
}


/* ---------- 矮屏 ---------- */

@media(
  min-width:761px
) and (
  max-height:820px
){

  .member-grid.count-1
  .member-card{
    max-height:445px;
  }

  .member-grid.count-1
  .member-copy{
    padding:
      24px 30px 26px;
  }

  .member-grid.count-1
  .member-bio{
    -webkit-line-clamp:7;
  }
}


/* ---------- 减少动画 ---------- */

@media(
  prefers-reduced-motion:reduce
){

  .member-card,
  .member-photo img,
  .member-more-button,
  .member-more-button i,
  .member-detail-backdrop,
  .member-detail-panel,
  .member-detail-close{
    transition:none!important;
    animation:none!important;
  }

  .member-grid.member-motion-ready
  .member-card{
    opacity:1!important;

    transform:none!important;
  }

  .member-card:hover{
    transform:none!important;
  }

  .member-card:hover
  .member-photo img{
    transform:none!important;
  }
}


/* ===== Member Card R4 Safe Layout ===== */

/*
 * R4 原则：
 * 1. 先保证照片完整
 * 2. 不变形
 * 3. 姓名/方向/简介永远可见
 * 4. 再保留轻动画
 */


/* =========================
   成员区域总宽度
   ========================= */

.about-page .about-people-section{
  width:min(1280px,92vw)!important;
  max-width:1280px!important;
  margin-inline:auto!important;
}

.about-page .member-grid{
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
}


/* =========================
   清除旧卡片尺寸约束
   ========================= */

.about-page .member-card{
  width:auto!important;
  max-width:none!important;

  height:auto!important;
  max-height:none!important;

  aspect-ratio:auto!important;

  position:relative!important;

  overflow:hidden!important;

  display:flex!important;
  flex-direction:column!important;

  opacity:1;

  border-radius:22px!important;

  background:
    rgba(252,252,249,.92)!important;

  border:
    1px solid rgba(46,68,65,.13)!important;

  box-shadow:
    0 18px 50px
    rgba(35,49,47,.07)!important;
}


/* =========================
   照片基础规则
   ========================= */

.about-page .member-photo{
  position:relative!important;

  width:100%!important;
  max-width:none!important;

  overflow:hidden!important;

  background:
    linear-gradient(
      145deg,
      #f2f4f0,
      #e9eeea
    )!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/*
 * 关键：
 * contain = 人物照片整体放进去
 * 不拉伸
 * 不改变比例
 */

.about-page .member-photo img{
  display:block!important;

  width:100%!important;
  height:100%!important;

  max-width:100%!important;
  max-height:100%!important;

  object-fit:contain!important;
  object-position:center center!important;

  aspect-ratio:auto!important;

  transform:none;

  transition:
    transform .45s
    cubic-bezier(.16,1,.3,1),
    filter .35s ease!important;
}


/* =========================
   文字区必须显示
   ========================= */

.about-page .member-copy{
  display:flex!important;
  flex-direction:column!important;

  position:relative!important;

  width:auto!important;
  min-width:0!important;
  max-width:none!important;

  height:auto!important;
  min-height:0!important;

  overflow:visible!important;

  visibility:visible!important;
  opacity:1!important;

  padding:
    28px 30px 30px!important;

  color:#182120!important;
}


/* 姓名 */

.about-page .member-name-line{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;

  gap:8px 12px!important;
}

.about-page .member-name-line h3{
  display:block!important;

  margin:0!important;

  font-size:
    clamp(27px,2.1vw,34px)!important;

  line-height:1.15!important;

  color:#182120!important;
}


/* 身份 */

.about-page .member-name-line > span{
  display:inline-block!important;

  font-size:14px!important;

  color:
    rgba(29,47,44,.58)!important;
}


/* 研究方向 */

.about-page .member-research{
  display:grid!important;

  margin:20px 0 0!important;

  gap:7px!important;

  visibility:visible!important;
  opacity:1!important;
}

.about-page .member-research b{
  display:block!important;

  font-size:11px!important;
  letter-spacing:.12em!important;

  color:
    rgba(36,61,57,.48)!important;
}

.about-page .member-research span{
  display:block!important;

  font-size:15px!important;
  line-height:1.7!important;

  color:
    rgba(28,47,44,.76)!important;
}


/* 简介区域 */

.about-page .member-bio-block{
  display:flex!important;
  flex-direction:column!important;

  flex:1!important;

  margin-top:20px!important;
  padding-top:18px!important;

  border-top:
    1px solid
    rgba(42,65,61,.10)!important;

  visibility:visible!important;
  opacity:1!important;
}

.about-page .member-bio-block > b{
  display:block!important;

  font-size:11px!important;

  letter-spacing:.12em!important;

  color:
    rgba(36,61,57,.48)!important;
}

.about-page .member-bio{
  display:block!important;

  margin:9px 0 0!important;

  width:100%!important;

  overflow:visible!important;

  white-space:normal!important;

  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;

  font-size:var(--about-member-bio-size,14.5px)!important;
  line-height:1.85!important;

  color:
    rgba(28,46,43,.72)!important;

  visibility:visible!important;
  opacity:1!important;
}


/* ============================================================
   1 人：真正的左图右文大卡
   ============================================================ */

.about-page .member-grid.count-1{
  display:flex!important;

  justify-content:center!important;

  width:100%!important;
  max-width:980px!important;

  margin-inline:auto!important;
}

.about-page
.member-grid.count-1
.member-card{

  display:grid!important;

  grid-template-columns:
    minmax(330px,40%)
    minmax(0,1fr)!important;

  width:min(940px,90vw)!important;
  max-width:940px!important;

  min-height:420px!important;

  height:auto!important;

  aspect-ratio:auto!important;
}


/* 左侧图片区域 */

.about-page
.member-grid.count-1
.member-photo{

  width:100%!important;

  height:100%!important;

  min-height:420px!important;

  max-height:520px!important;

  aspect-ratio:auto!important;
}


/* 人越少文字越大 */

.about-page
.member-grid.count-1
.member-copy{

  padding:
    34px 38px 36px!important;
}


/* 短简介 */

.about-page
.member-grid.count-1.page-bio-short
.member-card{
  min-height:420px!important;
}


/* 中简介 */

.about-page
.member-grid.count-1.page-bio-medium
.member-card{
  min-height:450px!important;
}


/* 长简介 */

.about-page
.member-grid.count-1.page-bio-long
.member-card{
  min-height:480px!important;
}


/* 超长简介 */

.about-page
.member-grid.count-1.page-bio-xlong
.member-card{
  min-height:500px!important;
}


/* ============================================================
   2 人
   ============================================================ */

.about-page .member-grid.count-2{
  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  gap:24px!important;

  max-width:1080px!important;

  margin-inline:auto!important;
}

.about-page
.member-grid.count-2
.member-photo{
  height:280px!important;
}


/* ============================================================
   3 人
   ============================================================ */

.about-page .member-grid.count-3{
  display:grid!important;

  grid-template-columns:
    repeat(3,minmax(0,1fr))!important;

  gap:20px!important;

  max-width:1180px!important;

  margin-inline:auto!important;
}

.about-page
.member-grid.count-3
.member-photo{
  height:250px!important;
}


/* ============================================================
   4 人
   ============================================================ */

.about-page .member-grid.count-4{
  display:grid!important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))!important;

  gap:18px!important;

  max-width:1240px!important;

  margin-inline:auto!important;
}

.about-page
.member-grid.count-4
.member-photo{
  height:220px!important;
}


/* ============================================================
   动画 —— 只做轻动画，不影响布局
   ============================================================ */

.about-page .member-card{
  transition:
    transform .36s
    cubic-bezier(.16,1,.3,1),
    box-shadow .36s ease,
    border-color .36s ease!important;
}

.about-page .member-card:hover{
  transform:
    translate3d(0,-4px,0)!important;

  box-shadow:
    0 24px 65px
    rgba(35,49,47,.10)!important;

  border-color:
    rgba(38,69,64,.22)!important;
}

.about-page
.member-card:hover
.member-photo img{
  transform:
    scale(1.012)!important;
}


/* 页面出现动画 */

.about-page
.member-grid.member-motion-ready
.member-card{
  opacity:0!important;

  transform:
    translate3d(0,20px,0)
    scale(.985)!important;
}

.about-page
.member-grid.member-motion-ready
.member-card.is-member-visible{
  opacity:1!important;

  transform:
    translate3d(0,0,0)
    scale(1)!important;
}

.about-page
.member-grid.member-motion-ready
.member-card.is-member-visible:hover{
  transform:
    translate3d(0,-4px,0)
    scale(1)!important;
}


/* ============================================================
   平板
   ============================================================ */

@media(max-width:980px){

  .about-page
  .member-grid.count-1
  .member-card{

    grid-template-columns:
      minmax(280px,38%)
      minmax(0,1fr)!important;

    width:min(860px,92vw)!important;
  }

  .about-page
  .member-grid.count-3,
  .about-page
  .member-grid.count-4{

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
  }
}


/* ============================================================
   手机
   ============================================================ */

@media(max-width:720px){

  .about-page
  .member-grid.count-1,
  .about-page
  .member-grid.count-2,
  .about-page
  .member-grid.count-3,
  .about-page
  .member-grid.count-4{

    display:grid!important;

    grid-template-columns:
      1fr!important;

    max-width:560px!important;
  }

  .about-page
  .member-grid.count-1
  .member-card{

    display:flex!important;
    flex-direction:column!important;

    width:100%!important;

    min-height:0!important;
  }

  .about-page
  .member-grid.count-1
  .member-photo,
  .about-page
  .member-grid.count-2
  .member-photo,
  .about-page
  .member-grid.count-3
  .member-photo,
  .about-page
  .member-grid.count-4
  .member-photo{

    width:100%!important;

    height:auto!important;

    min-height:300px!important;

    max-height:430px!important;

    aspect-ratio:4/3!important;
  }

  .about-page
  .member-copy{

    padding:
      25px 24px 28px!important;
  }
}


/* 减少动画 */

@media(prefers-reduced-motion:reduce){

  .about-page .member-card,
  .about-page .member-photo img{
    transition:none!important;
    animation:none!important;
  }

  .about-page
  .member-grid.member-motion-ready
  .member-card{
    opacity:1!important;
    transform:none!important;
  }
}


/* ===== MX Member Profile R5 ===== */

/*
 * 独立成员卡系统
 * 不再依赖旧 member-card/member-photo/member-copy
 */


/* ----------------------------------------------------------
   Grid
   ---------------------------------------------------------- */

.about-page .mx-member-grid{
  width:100%;
  margin-inline:auto;

  display:grid;
  align-items:stretch;

  position:relative;
  z-index:2;
}


/* ----------------------------------------------------------
   Card
   ---------------------------------------------------------- */

.about-page .mx-member-profile{
  min-width:0;
  height:100%;

  overflow:hidden;

  border:
    1px solid rgba(45,69,65,.14);

  border-radius:24px;

  background:
    rgba(252,252,249,.96);

  box-shadow:
    0 18px 52px
    rgba(34,48,45,.075);

  transition:
    transform .42s
    cubic-bezier(.16,1,.3,1),
    box-shadow .42s ease,
    border-color .42s ease;

  will-change:transform;
}

.about-page
.mx-member-profile:hover{
  transform:
    translate3d(0,-5px,0);

  border-color:
    rgba(39,75,69,.24);

  box-shadow:
    0 26px 70px
    rgba(32,48,45,.115);
}


/* ----------------------------------------------------------
   Photo area
   ---------------------------------------------------------- */

.about-page .mx-member-media{
  position:relative;

  width:100%;
  min-width:0;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #eef2ee,
      #e7ece8
    );
}


/*
 * 背景图只是负责填满空白。
 * 前景图永远 contain，因此不会裁人物。
 */

.about-page .mx-member-backdrop{
  position:absolute;
  inset:-24px;

  width:calc(100% + 48px);
  height:calc(100% + 48px);

  object-fit:cover;
  object-position:center;

  filter:
    blur(20px)
    saturate(.72);

  opacity:.16;

  transform:scale(1.06);

  pointer-events:none;
}

.about-page .mx-member-image{
  position:absolute;
  inset:0;

  z-index:2;

  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  transform:scale(1);

  transition:
    transform .55s
    cubic-bezier(.16,1,.3,1),
    filter .4s ease;

  filter:
    saturate(.96)
    contrast(.99);
}

.about-page
.mx-member-profile:hover
.mx-member-image{
  transform:scale(1.018);
}


/* ----------------------------------------------------------
   Placeholder
   ---------------------------------------------------------- */

.about-page .mx-member-placeholder{
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  font-size:64px;
  font-weight:500;

  color:
    rgba(33,66,61,.25);
}


/* ----------------------------------------------------------
   Body
   ---------------------------------------------------------- */

.about-page .mx-member-body{
  min-width:0;

  display:flex;
  flex-direction:column;

  padding:
    30px 34px 32px;

  color:#17201f;
}


/* 姓名 */

.about-page .mx-member-name-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;

  gap:8px 14px;
}

.about-page
.mx-member-name-line h3{
  margin:0;

  font-size:
    clamp(29px,2.2vw,38px);

  line-height:1.12;
  letter-spacing:.01em;

  color:#17201f;
}

.about-page .mx-member-role{
  font-size:14px;

  color:
    rgba(33,51,48,.58);
}


/* 标签 */

.about-page .mx-member-label{
  display:block;

  font-size:11px;
  line-height:1;

  font-weight:700;

  letter-spacing:.13em;

  color:
    rgba(34,61,57,.46);
}


/* 研究方向 */

.about-page .mx-member-research{
  margin-top:22px;
}

.about-page
.mx-member-research p{
  margin:9px 0 0;

  font-size:16px;
  line-height:1.72;

  color:
    rgba(27,47,43,.78);
}


/* 简介 */

.about-page .mx-member-bio-block{
  flex:1;

  margin-top:22px;
  padding-top:20px;

  border-top:
    1px solid
    rgba(44,68,64,.10);

  display:flex;
  flex-direction:column;

  min-height:0;
}

.about-page .mx-member-bio{
  margin:10px 0 0;

  font-size:15px;
  line-height:1.88;

  color:
    rgba(27,45,42,.72);

  white-space:pre-line;

  overflow:hidden;

  display:-webkit-box;
  -webkit-box-orient:vertical;
}


/* ----------------------------------------------------------
   1 人
   ---------------------------------------------------------- */

.about-page
.mx-member-grid.count-1{
  display:flex;

  justify-content:center;

  width:100%;
  max-width:1040px;
}

.about-page
.mx-member-grid.count-1
.mx-member-profile{
  width:min(980px,90vw);

  min-height:430px;

  display:grid;

  grid-template-columns:
    minmax(330px,42%)
    minmax(380px,1fr);
}

.about-page
.mx-member-grid.count-1
.mx-member-media{
  min-height:430px;
  height:100%;
}

.about-page
.mx-member-grid.count-1
.mx-member-body{
  padding:
    36px 40px 38px;
}


/* 简介长度决定卡片高度 */

.about-page
.mx-member-grid.count-1.page-bio-short
.mx-member-profile{
  min-height:420px;
}

.about-page
.mx-member-grid.count-1.page-bio-medium
.mx-member-profile{
  min-height:450px;
}

.about-page
.mx-member-grid.count-1.page-bio-long
.mx-member-profile{
  min-height:480px;
}

.about-page
.mx-member-grid.count-1.page-bio-xlong
.mx-member-profile{
  min-height:500px;
}


/* 一人简介显示行数 */

.about-page
.mx-member-grid.count-1.page-bio-short
.mx-member-bio{
  -webkit-line-clamp:7;
}

.about-page
.mx-member-grid.count-1.page-bio-medium
.mx-member-bio{
  -webkit-line-clamp:10;
}

.about-page
.mx-member-grid.count-1.page-bio-long
.mx-member-bio{
  -webkit-line-clamp:13;
}

.about-page
.mx-member-grid.count-1.page-bio-xlong
.mx-member-bio{
  -webkit-line-clamp:9;
}


/*
 * 特别宽的图片：
 * 不强行塞进窄竖列，自动变成上图下文。
 */

.about-page
.mx-member-grid.count-1
.mx-member-profile.photo-layout-landscape-wide{
  grid-template-columns:1fr;

  max-width:900px;
}

.about-page
.mx-member-grid.count-1
.mx-member-profile.photo-layout-landscape-wide
.mx-member-media{
  min-height:260px;
  height:300px;
}


/* ----------------------------------------------------------
   2 人
   ---------------------------------------------------------- */

.about-page
.mx-member-grid.count-2{
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:24px;

  max-width:1080px;
}

.about-page
.mx-member-grid.count-2
.mx-member-profile{
  display:flex;
  flex-direction:column;
}

.about-page
.mx-member-grid.count-2
.mx-member-media{
  height:255px;
  flex:none;
}

.about-page
.mx-member-grid.count-2
.mx-member-bio{
  -webkit-line-clamp:7;
}


/* ----------------------------------------------------------
   3 人
   ---------------------------------------------------------- */

.about-page
.mx-member-grid.count-3{
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  max-width:1180px;
}

.about-page
.mx-member-grid.count-3
.mx-member-profile{
  display:flex;
  flex-direction:column;
}

.about-page
.mx-member-grid.count-3
.mx-member-media{
  height:225px;
}

.about-page
.mx-member-grid.count-3
.mx-member-bio{
  -webkit-line-clamp:5;
}


/* ----------------------------------------------------------
   4 人
   ---------------------------------------------------------- */

.about-page
.mx-member-grid.count-4{
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;

  max-width:1240px;
}

.about-page
.mx-member-grid.count-4
.mx-member-profile{
  display:flex;
  flex-direction:column;
}

.about-page
.mx-member-grid.count-4
.mx-member-media{
  height:195px;
}

.about-page
.mx-member-grid.count-4
.mx-member-body{
  padding:
    22px 22px 24px;
}

.about-page
.mx-member-grid.count-4
.mx-member-name-line h3{
  font-size:
    clamp(22px,1.7vw,27px);
}

.about-page
.mx-member-grid.count-4
.mx-member-bio{
  font-size:13.5px;

  -webkit-line-clamp:4;
}


/* ----------------------------------------------------------
   不同原图比例的图片框
   2～4人情况下自动适配
   ---------------------------------------------------------- */

.about-page
.mx-member-grid:not(.count-1)
.photo-portrait-tall{
  height:250px;
}

.about-page
.mx-member-grid:not(.count-1)
.photo-square{
  height:220px;
}

.about-page
.mx-member-grid:not(.count-1)
.photo-landscape{
  height:190px;
}

.about-page
.mx-member-grid:not(.count-1)
.photo-landscape-wide{
  height:175px;
}


/* ----------------------------------------------------------
   查看完整介绍
   ---------------------------------------------------------- */

.about-page .mx-member-more{
  appearance:none;

  border:0;
  padding:18px 0 0;
  margin-top:auto;

  background:transparent;

  display:inline-flex;
  align-items:center;

  gap:9px;

  width:max-content;

  font:inherit;
  font-size:13px;

  color:
    rgba(24,69,63,.78);

  cursor:pointer;

  transition:
    gap .3s
    cubic-bezier(.16,1,.3,1),
    color .3s ease;
}

.about-page
.mx-member-more i{
  font-style:normal;

  transition:
    transform .3s
    cubic-bezier(.16,1,.3,1);
}

.about-page
.mx-member-more:hover{
  gap:13px;

  color:
    rgb(22,65,60);
}

.about-page
.mx-member-more:hover i{
  transform:
    translateX(4px);
}


/* ----------------------------------------------------------
   进入动画
   ---------------------------------------------------------- */

.about-page
.member-motion-ready
.mx-member-profile{
  opacity:0;

  transform:
    translate3d(0,22px,0)
    scale(.985);

  transition:
    opacity .55s
    cubic-bezier(.16,1,.3,1),
    transform .60s
    cubic-bezier(.16,1,.3,1),
    box-shadow .42s ease,
    border-color .42s ease;

  transition-delay:
    var(--member-delay,0ms);
}

.about-page
.member-motion-ready
.mx-member-profile.is-member-visible{
  opacity:1;

  transform:
    translate3d(0,0,0)
    scale(1);
}

.about-page
.member-motion-ready
.mx-member-profile.is-member-visible:hover{
  transform:
    translate3d(0,-5px,0)
    scale(1);
}


/* ----------------------------------------------------------
   平板
   ---------------------------------------------------------- */

@media(max-width:1000px){

  .about-page
  .mx-member-grid.count-1
  .mx-member-profile{
    width:min(880px,92vw);

    grid-template-columns:
      minmax(280px,38%)
      minmax(340px,1fr);
  }

  .about-page
  .mx-member-grid.count-3,
  .about-page
  .mx-member-grid.count-4{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


/* ----------------------------------------------------------
   空间不够时，绝不挤掉文字
   自动上图下文
   ---------------------------------------------------------- */

@media(max-width:820px){

  .about-page
  .mx-member-grid.count-1
  .mx-member-profile{
    display:flex;

    flex-direction:column;

    width:min(620px,92vw);

    min-height:0;
  }

  .about-page
  .mx-member-grid.count-1
  .mx-member-media{
    width:100%;

    height:330px;
    min-height:330px;
  }

  .about-page
  .mx-member-grid.count-1
  .mx-member-body{
    padding:
      27px 27px 31px;
  }
}


/* ----------------------------------------------------------
   手机
   ---------------------------------------------------------- */

@media(max-width:700px){

  .about-page
  .mx-member-grid.count-1,
  .about-page
  .mx-member-grid.count-2,
  .about-page
  .mx-member-grid.count-3,
  .about-page
  .mx-member-grid.count-4{
    grid-template-columns:1fr;

    max-width:560px;
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-media,
  .about-page
  .mx-member-grid.count-3
  .mx-member-media,
  .about-page
  .mx-member-grid.count-4
  .mx-member-media{
    height:290px;
  }
}


/* ----------------------------------------------------------
   减少动画
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .about-page
  .mx-member-profile,

  .about-page
  .mx-member-image,

  .about-page
  .mx-member-more,

  .about-page
  .mx-member-more i{
    animation:none!important;
    transition:none!important;
  }

  .about-page
  .member-motion-ready
  .mx-member-profile{
    opacity:1!important;
    transform:none!important;
  }
}


/* ===== Admin homepage function editor R2 ===== */

/* Only affects: Admin -> Homepage -> Function module */
#view-homepage [data-home-panel="functions"] .function-editor-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

#view-homepage [data-home-panel="functions"] .function-edit-card{
  min-width:0;
  border:1px solid #dce4e0;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px rgba(28,42,45,.035);
  transition:
    transform 240ms var(--ease-soft),
    border-color 220ms ease,
    box-shadow 240ms ease;
}

#view-homepage [data-home-panel="functions"] .function-edit-card:hover{
  transform:translateY(-2px);
  border-color:#c8d5d0;
  box-shadow:0 12px 30px rgba(28,42,45,.055);
}

/* Compact illustration preview */
#view-homepage [data-home-panel="functions"] .function-edit-preview{
  height:150px;
  aspect-ratio:auto;
  padding:18px 24px;
  background:
    radial-gradient(circle at 75% 18%,rgba(255,255,255,.88),transparent 38%),
    linear-gradient(135deg,#edf3ef 0%,#f6f7f3 100%);
  border-bottom:1px solid #e1e7e3;
}

#view-homepage [data-home-panel="functions"] .function-edit-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform 320ms var(--ease-soft);
}

#view-homepage [data-home-panel="functions"] .function-edit-card:hover .function-edit-preview img{
  transform:scale(1.018);
}

/* Main fields: title + description side by side */
#view-homepage [data-home-panel="functions"] .function-edit-fields{
  padding:17px 18px 18px;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:14px 16px;
  align-items:start;
}

#view-homepage [data-home-panel="functions"] .function-edit-fields>.form-group{
  min-width:0;
  margin:0;
}

#view-homepage [data-home-panel="functions"] .function-edit-fields>.form-group:nth-child(3),
#view-homepage [data-home-panel="functions"] .function-link-editor{
  grid-column:1/-1;
}

#view-homepage [data-home-panel="functions"] .function-edit-fields .textarea.short{
  min-height:82px;
  resize:vertical;
}

#view-homepage [data-home-panel="functions"] .image-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
}

#view-homepage [data-home-panel="functions"] .image-input-row .file-button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:16px;
  border-radius:9px;
}

/* Two sub-entry editors */
#view-homepage [data-home-panel="functions"] .function-link-editor{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding-top:2px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit{
  min-width:0;
  padding:13px 14px 14px;
  border:1px solid #dfe7e3;
  border-radius:12px;
  background:#f8faf7;
  display:grid;
  gap:10px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit-head{
  min-height:30px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e2e8e4;
  padding-bottom:8px;
  margin-bottom:1px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit-head strong{
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:17px;
  color:var(--ink);
}

#view-homepage [data-home-panel="functions"] .function-link-edit .form-group{
  min-width:0;
  margin:0;
  gap:5px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit .form-label{
  font-size:12px;
  color:#697572;
}

#view-homepage [data-home-panel="functions"] .function-link-edit .line-input{
  min-width:0;
  background:#fff;
}

/* Footer / ordering */
#view-homepage [data-home-panel="functions"] .function-edit-actions{
  min-height:54px;
  padding:10px 16px;
  background:#fafbf8;
  border-top:1px solid #e2e7e4;
}

#view-homepage [data-home-panel="functions"] .function-edit-actions .form-help{
  margin:0;
  color:#89938f;
  font-size:12px;
  letter-spacing:.02em;
}

#view-homepage [data-home-panel="functions"] .mini-actions{
  gap:6px;
}

#view-homepage [data-home-panel="functions"] .mini-actions button{
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #dbe3df;
  border-radius:8px;
  background:#fff;
  color:#60716b;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

#view-homepage [data-home-panel="functions"] .mini-actions button:not(:disabled):hover{
  color:var(--brand);
  border-color:#bdcec7;
  background:#f1f6f3;
  transform:translateY(-1px);
}

#view-homepage [data-home-panel="functions"] .mini-actions button:disabled{
  opacity:.28;
  cursor:default;
}

/* Medium width: keep cards readable */
@media (max-width:1180px){
  #view-homepage [data-home-panel="functions"] .function-editor-grid{
    grid-template-columns:1fr;
  }
}

/* Mobile/tablet */
@media (max-width:650px){
  #view-homepage [data-home-panel="functions"] .function-edit-fields{
    grid-template-columns:1fr;
  }

  #view-homepage [data-home-panel="functions"] .function-edit-fields>.form-group{
    grid-column:1;
  }

  #view-homepage [data-home-panel="functions"] .function-link-editor{
    grid-template-columns:1fr;
  }

  #view-homepage [data-home-panel="functions"] .function-edit-preview{
    height:125px;
    padding:14px 18px;
  }

  #view-homepage [data-home-panel="functions"] .image-input-row{
    grid-template-columns:1fr;
  }
}


/* ===== Admin homepage function editor R2 overlap fix ===== */

/*
  Keep the four function cards in a 2-column grid,
  but stop nesting another two-column layout in the main fields.
*/
#view-homepage [data-home-panel="functions"] .function-edit-fields{
  grid-template-columns:1fr;
  gap:14px;
}

#view-homepage [data-home-panel="functions"] .function-edit-fields>.form-group,
#view-homepage [data-home-panel="functions"] .function-edit-fields>.form-group:nth-child(3),
#view-homepage [data-home-panel="functions"] .function-link-editor{
  grid-column:1;
  min-width:0;
}

/* Give description enough room without making the card excessively tall. */
#view-homepage [data-home-panel="functions"] .function-edit-fields .textarea.short{
  min-height:74px;
  height:74px;
  line-height:1.55;
}

/* Prevent long image paths from pushing the upload button outside the card. */
#view-homepage [data-home-panel="functions"] .image-input-row{
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
}

#view-homepage [data-home-panel="functions"] .image-input-row .line-input{
  width:100%;
  min-width:0;
}

/* Entry 1 and Entry 2 remain side by side, but both boxes get equal height. */
#view-homepage [data-home-panel="functions"] .function-link-editor{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:12px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit{
  height:100%;
  min-width:0;
  align-content:start;
}

/*
  Search entry has no target-address field.
  Keep a stable minimum height so it still aligns with a normal link entry.
*/
#view-homepage [data-home-panel="functions"] .function-link-edit{
  min-height:300px;
}

/* Controls must never exceed their own entry column. */
#view-homepage [data-home-panel="functions"] .function-link-edit .line-input,
#view-homepage [data-home-panel="functions"] .function-link-edit input,
#view-homepage [data-home-panel="functions"] .function-link-edit select{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Slightly reduce preview height once more to keep the editor compact. */
#view-homepage [data-home-panel="functions"] .function-edit-preview{
  height:138px;
}

/* On narrower admin content, stop squeezing the two entry boxes. */
@media (max-width:1380px){
  #view-homepage [data-home-panel="functions"] .function-link-editor{
    grid-template-columns:1fr;
  }

  #view-homepage [data-home-panel="functions"] .function-link-edit{
    min-height:0;
  }
}

/* Cards themselves become single-column only when space is genuinely limited. */
@media (max-width:1080px){
  #view-homepage [data-home-panel="functions"] .function-editor-grid{
    grid-template-columns:1fr;
  }

  #view-homepage [data-home-panel="functions"] .function-link-editor{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  #view-homepage [data-home-panel="functions"] .function-link-editor{
    grid-template-columns:1fr;
  }

  #view-homepage [data-home-panel="functions"] .function-edit-preview{
    height:118px;
  }
}


/* ===== Admin homepage function editor R2 compact height fix ===== */

/*
  Remove the artificial 300px entry-card height.
  CSS Grid stretch will still keep Entry 1 / Entry 2 visually aligned
  within the same row, without leaving a large empty area.
*/
#view-homepage [data-home-panel="functions"] .function-link-edit{
  min-height:0;
}

/* Keep the two entry cards aligned naturally. */
#view-homepage [data-home-panel="functions"] .function-link-editor{
  align-items:stretch;
}

/* Slightly tighten the internal spacing. */
#view-homepage [data-home-panel="functions"] .function-link-edit{
  padding:12px 13px 13px;
  gap:9px;
}

#view-homepage [data-home-panel="functions"] .function-link-edit-head{
  min-height:27px;
  padding-bottom:7px;
}


/* ===== Frontend homepage function cards R2 static layout ===== */

/*
  Homepage function module only.
  Four fixed cards + two independent entries.
  Static layout first; motion will be added after visual confirmation.
*/

#homeFunctionGrid.function-grid{
  width:100%;
  max-width:1480px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,1.45vw,25px);
  align-items:stretch;
}

/* Card shell */
#homeFunctionGrid .function-card{
  min-width:0;
  min-height:390px;
  display:grid;
  grid-template-rows:190px minmax(0,1fr);
  position:relative;
  overflow:hidden;

  border:1px solid rgba(205,216,212,.96);
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.90) 0%,
      rgba(251,252,249,.94) 100%
    );

  box-shadow:
    0 7px 24px rgba(28,42,45,.032);

  color:var(--ink);
  transform:none;
}

/*
  Disable the historical card/image hover movement for now.
  Motion will be rebuilt after static layout is confirmed.
*/
#homeFunctionGrid .function-card:hover{
  transform:none;
}

#homeFunctionGrid .function-card:active{
  transform:none!important;
}

/* Illustration stage */
#homeFunctionGrid .function-visual{
  width:100%;
  height:190px;
  aspect-ratio:auto;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:20px 22px;

  border-bottom:1px solid rgba(214,222,218,.92);

  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(255,255,255,.92),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #edf3ef 0%,
      #f5f6f2 100%
    );
}

#homeFunctionGrid .function-visual::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:14px;
  height:22px;
  border-radius:50%;
  background:rgba(76,111,116,.055);
  filter:blur(14px);
  pointer-events:none;
}

/*
  Important for the final 1600×900 PNG illustrations:
  do not crop the illustration.
*/
#homeFunctionGrid .function-visual img{
  width:100%;
  height:100%;
  max-width:92%;
  max-height:100%;
  display:block;
  position:relative;
  z-index:1;
  object-fit:contain;
  object-position:center;
  transform:none;
}

/* Text area */
#homeFunctionGrid .function-copy{
  min-width:0;
  min-height:0;
  padding:21px 22px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
}

#homeFunctionGrid .function-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  margin-bottom:10px;
}

#homeFunctionGrid .function-heading h3,
#homeFunctionGrid .function-copy h3{
  min-width:0;
  margin:0;
  font-family:"Songti SC","STSong",SimSun,serif;
  font-size:27px;
  line-height:1.28;
  font-weight:700;
  letter-spacing:.01em;
  color:#202728;
}

/* Decorative card-level arrow */
#homeFunctionGrid .function-card-arrow{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;

  border:1px solid rgba(40,86,106,.20);
  border-radius:50%;

  background:rgba(255,255,255,.58);
  color:#64808a;

  font-size:17px;
  line-height:1;
}

/*
  Equal description reserve:
  different copy lengths will not shift the two entry buttons.
*/
#homeFunctionGrid .function-copy>p{
  min-height:3.35em;
  margin:0;
  padding:0;

  color:#697572;
  font-size:15.5px;
  line-height:1.68;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Two independent destinations */
#homeFunctionGrid .function-links{
  width:100%;
  margin-top:auto;
  padding-top:18px;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#homeFunctionGrid .function-link{
  width:100%;
  min-width:0;
  height:41px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:0 12px;

  border:1px solid rgba(202,214,210,.96);
  border-radius:10px;

  background:rgba(247,249,246,.92);
  color:#536762;

  font:650 14px/1.2 inherit;
  text-decoration:none;
  white-space:nowrap;

  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

#homeFunctionGrid button.function-link{
  font-family:inherit;
}

#homeFunctionGrid .function-link span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

#homeFunctionGrid .function-link i{
  flex:0 0 auto;
  font-style:normal;
  font-size:15px;
  font-weight:400;
  color:#789097;
}

/* Search is a button but visually belongs to the same entry family. */
#homeFunctionGrid .function-link.is-search{
  text-align:left;
}

/*
  The old .function-arrow class is intentionally not reused.
  This keeps the old V12 display:none!important rule isolated.
*/
#homeFunctionGrid .function-arrow{
  display:none!important;
}


/* ===== Responsive static composition ===== */

/*
  Medium desktop / notebook:
  use 2×2 instead of squeezing four narrow cards.
*/
@media (max-width:1250px){
  #homeFunctionGrid.function-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:900px;
    gap:16px 18px;
  }

  #homeFunctionGrid .function-card{
    min-height:310px;
    grid-template-rows:128px minmax(0,1fr);
  }

  #homeFunctionGrid .function-visual{
    height:128px;
    padding:13px 20px;
  }

  #homeFunctionGrid .function-copy{
    padding:16px 18px 16px;
  }

  #homeFunctionGrid .function-heading{
    margin-bottom:7px;
  }

  #homeFunctionGrid .function-heading h3,
  #homeFunctionGrid .function-copy h3{
    font-size:23px;
  }

  #homeFunctionGrid .function-copy>p{
    font-size:14px;
    line-height:1.52;
    min-height:3.04em;
  }

  #homeFunctionGrid .function-links{
    padding-top:11px;
  }

  #homeFunctionGrid .function-link{
    height:36px;
    font-size:13px;
  }
}

/*
  Explicitly override the old V15.2 tablet rule that forced 4 columns.
*/
@media (min-width:701px) and (max-width:900px){
  #homeFunctionGrid.function-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:760px;
  }
}

/* Phone: keep cards readable first; compact two-column handling comes later if needed. */
@media (max-width:700px){
  #homeFunctionGrid.function-grid{
    grid-template-columns:1fr;
    max-width:520px;
    gap:14px;
  }

  #homeFunctionGrid .function-card{
    min-height:310px;
  }
}

/* Static stage: suppress historical hover animation until the motion pass. */
#homeFunctionGrid .function-card,
#homeFunctionGrid .function-visual img,
#homeFunctionGrid .function-card-arrow,
#homeFunctionGrid .function-link,
#homeFunctionGrid .function-link i{
  transition:none;
}


/* ===== Frontend function cards R2 centered copy and buttons ===== */

/* Main card title: strict visual centering */
#homeFunctionGrid .function-heading{
  width:100%;
  display:block;
  margin-bottom:10px;
  text-align:center;
}

#homeFunctionGrid .function-heading h3,
#homeFunctionGrid .function-copy h3{
  width:100%;
  text-align:center;
  margin-inline:auto;
}

/*
  Keep the description visually quiet below the centered title.
  Centering it makes the whole card hierarchy consistent with the two CTA buttons.
*/
#homeFunctionGrid .function-copy>p{
  width:100%;
  max-width:94%;
  margin-inline:auto;
  text-align:center;
}

/* Bottom actions: true centered labels, no arrow reservation */
#homeFunctionGrid .function-links{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

#homeFunctionGrid .function-link{
  position:relative;
  justify-content:center;
  text-align:center;

  height:42px;
  padding:0 13px;

  border:1px solid rgba(187,204,199,.96);
  border-radius:11px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(243,247,244,.94)
    );

  color:#49645d;

  font-size:14px;
  font-weight:650;
  letter-spacing:.015em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 3px 10px rgba(28,42,45,.025);
}

#homeFunctionGrid .function-link span{
  width:100%;
  min-width:0;
  display:block;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Search button and ordinary links share exactly the same visual language */
#homeFunctionGrid .function-link.is-search{
  justify-content:center;
  text-align:center;
}

/* Old/new arrow elements are both suppressed defensively */
#homeFunctionGrid .function-card-arrow,
#homeFunctionGrid .function-link i,
#homeFunctionGrid .function-arrow{
  display:none!important;
}

/* Slight adjustment for medium-width 2×2 layout */
@media (max-width:1250px){
  #homeFunctionGrid .function-heading{
    margin-bottom:7px;
  }

  #homeFunctionGrid .function-copy>p{
    max-width:96%;
  }

  #homeFunctionGrid .function-link{
    height:37px;
    padding-inline:9px;
    font-size:13px;
  }
}


/* ===== V57 lightweight cross-page transition ===== */

/*
  Cross-page navigation should feel immediate rather than cinematic.
  Remove scale / blur / large translation from all historical page transitions.
*/

/* Root page: short clean cross-fade only */
::view-transition-group(root){
  animation-duration:210ms!important;
  animation-timing-function:cubic-bezier(.2,.72,.2,1)!important;
}

::view-transition-old(root){
  animation:mxPageFadeOutV57 120ms ease-out both!important;
}

::view-transition-new(root){
  animation:mxPageFadeInV57 210ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes mxPageFadeOutV57{
  from{
    opacity:1;
    transform:none;
    filter:none;
  }
  to{
    opacity:0;
    transform:none;
    filter:none;
  }
}

@keyframes mxPageFadeInV57{
  from{
    opacity:0;
    transform:none;
    filter:none;
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/*
  Header has the same geometry on all public pages.
  Do not cross-fade two copies of it, otherwise text and active underline
  can briefly look doubled.
*/
::view-transition-group(mx-site-header){
  animation:none!important;
}

::view-transition-old(mx-site-header){
  animation:none!important;
  opacity:0!important;
  transform:none!important;
  filter:none!important;
}

::view-transition-new(mx-site-header){
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* Remove old snapshot blending side effects */
::view-transition-image-pair(root),
::view-transition-image-pair(mx-site-header){
  isolation:auto;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(mx-site-header),
::view-transition-new(mx-site-header){
  mix-blend-mode:normal!important;
}

/* Reduced motion remains instant */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(mx-site-header),
  ::view-transition-old(mx-site-header),
  ::view-transition-new(mx-site-header){
    animation:none!important;
  }
}


/* ===== V58 stable header during cross-page transition ===== */

/*
  Keep the OLD header snapshot visually fixed for the whole root transition.
  The NEW real header takes over only after the transition finishes.

  This avoids:
  - header disappearing mid-transition
  - two nav bars cross-fading
  - active underline ghosting
  - logo/text double images
*/

::view-transition-group(mx-site-header){
  animation-duration:210ms!important;
  animation-timing-function:linear!important;
}

::view-transition-old(mx-site-header){
  animation:mxHeaderHoldV58 210ms linear both!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

::view-transition-new(mx-site-header){
  animation:mxHeaderWaitV58 210ms linear both!important;
  opacity:0!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

@keyframes mxHeaderHoldV58{
  from{
    opacity:1;
    transform:none;
    filter:none;
  }
  to{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes mxHeaderWaitV58{
  from{
    opacity:0;
    transform:none;
    filter:none;
  }
  to{
    opacity:0;
    transform:none;
    filter:none;
  }
}

/*
  Do not let the named-header snapshot inherit any old transition
  movement or opacity effects.
*/
::view-transition-image-pair(mx-site-header){
  isolation:isolate;
}

/* Reduced-motion users still switch instantly. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(mx-site-header),
  ::view-transition-old(mx-site-header),
  ::view-transition-new(mx-site-header){
    animation:none!important;
  }

  ::view-transition-old(mx-site-header){
    opacity:1!important;
  }
}


/* ===== Custom page transition R2 veil ===== */

/*
  Lightweight page-transition veil.

  Important:
  - Header is NEVER covered.
  - No cross-document snapshot.
  - New page is allowed to render underneath the veil.
  - The veil only masks the short navigation/loading seam.
*/

/* ---------- Leaving page ---------- */

html.mx-page-exit-base body::after,
html.mx-page-exit-covering body::after,
html.mx-page-enter-pending body::after,
html.mx-page-enter-reveal body::after{
  content:"";
  position:fixed;

  left:0;
  right:0;
  top:var(--header-h);
  bottom:0;

  z-index:2147480000;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255,255,255,.56) 0%,
      rgba(255,255,255,.16) 32%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(247,247,243,.985) 0%,
      rgba(247,248,244,.995) 52%,
      rgba(247,247,243,.995) 100%
    );

  transform:translate3d(0,0,0);
  will-change:opacity;
}

/*
  First frame before the leaving veil becomes visible.
  JS will add mx-page-exit-covering on the next animation frame.
*/
html.mx-page-exit-base body::after{
  opacity:0;
  transition:
    opacity 165ms cubic-bezier(.4,0,.2,1);
}

/* Softly cover the current page content. */
html.mx-page-exit-covering body::after{
  opacity:1;
  transition:
    opacity 165ms cubic-bezier(.4,0,.2,1);
}


/* ---------- Entering page ---------- */

/*
  The inline bootstrap installed in Step 73 adds this class before first paint,
  so the new document is already covered while its content initializes.
*/
html.mx-page-enter-pending body::after{
  opacity:1;
}

/*
  Once app.js says the new page is ready,
  the veil fades away and exposes the already-rendered document underneath.
*/
html.mx-page-enter-reveal body::after{
  opacity:0;
  transition:
    opacity 285ms cubic-bezier(.16,1,.3,1);
}


/* ---------- New-page content entrance ---------- */

/*
  Only used while the veil is revealing.
  Header remains completely outside this motion.
*/
html.mx-page-enter-reveal main{
  animation:
    mxPageContentEnterR2
    310ms
    cubic-bezier(.16,1,.3,1)
    both;
}

@keyframes mxPageContentEnterR2{
  from{
    opacity:.72;
    transform:translate3d(0,9px,0);
  }

  58%{
    opacity:.96;
    transform:translate3d(0,2px,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


/* ---------- Keep the site chrome stable ---------- */

html.mx-page-exit-base .site-header,
html.mx-page-exit-covering .site-header,
html.mx-page-enter-pending .site-header,
html.mx-page-enter-reveal .site-header{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){

  html.mx-page-exit-base body::after,
  html.mx-page-exit-covering body::after,
  html.mx-page-enter-pending body::after,
  html.mx-page-enter-reveal body::after{
    transition:none!important;
  }

  html.mx-page-enter-reveal main{
    animation:none!important;
  }
}


/* ===== Administrator access final UI R1 ===== */

/* ------------------------------------------------------------
   管理员与权限整体布局
------------------------------------------------------------ */

#view-admins{
  padding-bottom:64px;
}

#view-admins .admin-top{
  margin-bottom:22px;
}

#view-admins .admin-panel{
  margin-bottom:18px;
}


/* ------------------------------------------------------------
   空状态
------------------------------------------------------------ */

.admin-empty-state{
  min-height:148px;
  padding:24px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:#fbfcf9;
  text-align:center;
}

.admin-empty-state strong{
  font-size:15px;
}

.admin-empty-state span{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}


/* ------------------------------------------------------------
   主要管理员表格
------------------------------------------------------------ */

#adminOwnerList .admin-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

#adminOwnerList .admin-table{
  margin:0;
}

#adminOwnerList .admin-table th{
  white-space:nowrap;
}

#adminOwnerList .admin-table td{
  vertical-align:middle;
}

#adminOwnerList .table-sub{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}


/* ------------------------------------------------------------
   平台管理员列表
------------------------------------------------------------ */

.admin-platform-list{
  display:grid;
  gap:14px;
}

.admin-platform-card{
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.admin-platform-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 8px 24px rgba(34,54,48,.055);
  transform:translateY(-1px);
}


/* ------------------------------------------------------------
   平台管理员顶部
------------------------------------------------------------ */

.admin-platform-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.admin-platform-name{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.admin-platform-name strong{
  font-size:16px;
  line-height:1.4;
}

.admin-platform-head>.admin-platform-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

.admin-platform-actions .table-action{
  min-height:34px;
  padding:0 11px;
}


/* ------------------------------------------------------------
   危险操作
------------------------------------------------------------ */

.table-action.danger{
  color:#a94747;
  border-color:#e7caca;
  background:#fffafa;
}

.table-action.danger:hover{
  color:#8c3030;
  border-color:#d8aaaa;
  background:#fff4f4;
}


/* ------------------------------------------------------------
   平台管理员基本资料
------------------------------------------------------------ */

.admin-platform-meta{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:10px;
  margin:17px 0;
}

.admin-platform-meta>div{
  min-height:72px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fafbf9;
}

.admin-platform-meta span,
.admin-platform-meta small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.admin-platform-meta strong{
  display:block;
  margin:5px 0 3px;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.5;
}


/* ------------------------------------------------------------
   模块权限
------------------------------------------------------------ */

.admin-platform-permissions{
  padding-top:17px;
  border-top:1px solid var(--line);
}

.panel-head.slim{
  margin-bottom:13px;
}

.panel-head.slim h3{
  margin:0 0 4px;
  font-size:14px;
}

.panel-head.slim p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.admin-permission-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:8px;
}

.admin-permission-option{
  min-height:48px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fbfcfa;
  cursor:pointer;
  transition:
    border-color .16s ease,
    background .16s ease;
}

.admin-permission-option:hover{
  border-color:var(--line-strong);
  background:#fff;
}

.admin-permission-option input{
  width:17px;
  height:17px;
  flex:0 0 auto;
  accent-color:var(--brand);
}

.admin-permission-option span{
  min-width:0;
}

.admin-permission-option strong{
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
}


/* ------------------------------------------------------------
   Owner 数量
------------------------------------------------------------ */

#adminOwnerCount{
  white-space:nowrap;
}


/* ------------------------------------------------------------
   添加平台管理员按钮
------------------------------------------------------------ */

#addPlatformAdmin{
  min-height:42px;
  padding:0 17px;
  white-space:nowrap;
}


/* ------------------------------------------------------------
   响应式
------------------------------------------------------------ */

@media (max-width:1050px){

  .admin-permission-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media (max-width:780px){

  .admin-platform-head{
    flex-direction:column;
  }

  .admin-platform-head>
  .admin-platform-actions{
    justify-content:flex-start;
  }

  .admin-platform-meta{
    grid-template-columns:1fr;
  }

  .admin-permission-grid{
    grid-template-columns:1fr;
  }

  #view-admins .admin-top{
    align-items:flex-start;
    flex-direction:column;
  }

}



/* ===== Account security UI R1 ===== */

.account-security-summary{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
}

.account-security-summary>div{
  min-height:82px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafbf9;
}

.account-security-summary span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
}

.account-security-summary strong{
  display:block;
  overflow-wrap:anywhere;
  font-size:14px;
}

.account-security-email-card{
  min-height:94px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfcfa;
}

.account-security-email-card>div{
  min-width:0;
}

.account-security-label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
}

.account-security-email-card strong{
  display:block;
  overflow-wrap:anywhere;
  font-size:15px;
}

.account-security-email-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.account-security-lock{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f3f1;
  color:#78817e;
  font-size:11px;
}

.account-security-bind{
  max-width:760px;
}

.account-security-inline{
  display:grid;
  grid-template-columns:
    minmax(0,1fr) auto;
  gap:8px;
}

.account-security-code-box{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.account-security-ready{
  min-height:100px;
  padding:20px;
  display:grid;
  align-content:center;
  gap:6px;
  border:1px solid #cbdad3;
  border-radius:11px;
  background:#f7faf8;
}

.account-security-ready.neutral{
  border-color:var(--line);
  background:#fafbf9;
}

.account-security-ready strong{
  font-size:15px;
}

.account-security-ready span{
  max-width:720px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

@media (max-width:900px){

  .account-security-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media (max-width:650px){

  .account-security-summary{
    grid-template-columns:1fr;
  }

  .account-security-email-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .account-security-inline{
    grid-template-columns:1fr;
  }

}



/* ===== Account credentials UI R1 ===== */

.account-security-verify{
  padding:18px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfcfa;
}

.account-security-verify-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.account-security-verify-intro>div{
  display:grid;
  gap:6px;
  min-width:0;
}

.account-security-verify-intro strong{
  font-size:15px;
}

.account-security-verify-intro span{
  max-width:680px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.account-security-code-note{
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}

.account-security-edit{
  display:grid;
  gap:14px;
}

.account-security-grant{
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid #cbdad3;
  border-radius:10px;
  background:#f6faf8;
}

.account-security-grant>div{
  display:grid;
  gap:5px;
}

.account-security-grant strong{
  font-size:14px;
}

.account-security-grant span:not(.status-pill){
  color:var(--muted);
  font-size:11.5px;
  line-height:1.65;
}

.account-security-form{
  max-width:820px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.account-security-form .form-group{
  display:grid;
  gap:7px;
}

.account-security-form .form-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:650;
}

.account-security-form .form-label small{
  color:var(--muted);
  font-size:10px;
  font-weight:400;
}

.account-security-field-help{
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
}

.account-security-divider{
  height:1px;
  margin:17px 0;
  background:var(--line);
}

.account-security-password-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.account-security-password-rule{
  margin-top:12px;
  padding:11px 13px;
  display:grid;
  gap:3px;
  border-radius:9px;
  background:#fafbf9;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}

.account-security-password-rule strong{
  color:var(--ink);
  font-size:11.5px;
}

.account-security-warning{
  margin-top:12px;
  padding:12px 14px;
  display:grid;
  gap:4px;
  border:1px solid #ead9ba;
  border-radius:9px;
  background:#fffaf1;
}

.account-security-warning strong{
  font-size:12px;
}

.account-security-warning span{
  color:#88775d;
  font-size:11px;
}

.account-security-actions{
  margin-top:18px;
  padding-top:16px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  border-top:1px solid var(--line);
}


@media (max-width:760px){

  .account-security-verify-intro,
  .account-security-grant{
    align-items:flex-start;
    flex-direction:column;
  }

  .account-security-password-grid{
    grid-template-columns:1fr;
  }

  .account-security-actions{
    align-items:stretch;
    flex-direction:column-reverse;
  }

  .account-security-actions button{
    width:100%;
  }

}



/* ===== Mandatory credential setup UI R1 ===== */

.credential-setup-badge{
  margin:0 0 10px;
  padding:11px 12px;
  display:grid;
  gap:4px;
  border:1px solid #dfd1ae;
  border-radius:9px;
  background:#fffaf0;
}

.credential-setup-badge strong{
  color:#715f3e;
  font-size:11.5px;
}

.credential-setup-badge span{
  color:#8b7a59;
  font-size:10.5px;
  line-height:1.55;
}

body.admin-credential-setup-required
[data-admin-view]:disabled{
  opacity:.38;
  cursor:not-allowed;
}

body.admin-credential-setup-required
[data-admin-view="security"]{
  opacity:1;
}



/* ===== Approval Center UI R1 ===== */

#view-approvals{
  padding-bottom:64px;
}


.approval-page-head{
  align-items:flex-start;
}


.approval-refresh-button{
  flex:0 0 auto;
  min-width:82px;
}


.approval-summary-panel{
  margin-bottom:18px;
}


.approval-summary{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
}


.approval-summary article{
  min-height:104px;
  padding:17px 18px;
  display:grid;
  align-content:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fafbf9 100%
    );
}


.approval-summary span{
  color:var(--muted);
  font-size:11px;
}


.approval-summary strong{
  color:var(--ink);
  font-size:27px;
  line-height:1.08;
  font-weight:650;
}


.approval-summary small{
  color:var(--muted);
  font-size:10.5px;
}


.approval-workspace-panel{
  overflow:hidden;
}


.approval-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}


.approval-tabs button{
  min-height:34px;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}


.approval-tabs button:hover{
  background:#f6f8f5;
  color:var(--ink);
}


.approval-tabs button.active{
  border-color:var(--line-strong);
  background:#f3f6f2;
  color:var(--ink);
  font-weight:650;
}


.approval-workspace{
  min-height:540px;
  display:grid;
  grid-template-columns:
    minmax(300px,.78fr)
    minmax(420px,1.22fr);
  gap:16px;
}


.approval-list-pane{
  min-width:0;
}


.approval-list{
  display:grid;
  gap:9px;
}


.approval-request-card{
  width:100%;
  min-width:0;
  padding:15px 16px;
  display:grid;
  gap:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.approval-request-card:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  box-shadow:
    0 8px 22px
    rgba(34,52,49,.055);
}


.approval-request-card.active{
  border-color:
    rgba(58,97,87,.38);
  background:#f9fbf8;
  box-shadow:
    0 8px 24px
    rgba(34,52,49,.065);
}


.approval-request-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


.approval-request-top time{
  color:var(--muted);
  font-size:10px;
}


.approval-request-title{
  display:block;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.45;
}


.approval-request-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  color:var(--muted);
  font-size:10.5px;
}


.approval-status-pill{
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#f1f3f1;
  color:#68716e;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}


.approval-status-pill.status-pending{
  background:#fff6e6;
  color:#8a6530;
}


.approval-status-pill.status-approved{
  background:#edf7f0;
  color:#47725a;
}


.approval-status-pill.status-rejected{
  background:#fbefef;
  color:#8a5555;
}


.approval-status-pill.status-cancelled,
.approval-status-pill.status-canceled{
  background:#f1f2f3;
  color:#6c7377;
}


.approval-detail-pane{
  min-width:0;
  min-height:520px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfa;
}


.approval-detail-empty{
  min-height:480px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  text-align:center;
  color:var(--muted);
}


.approval-detail-empty strong{
  color:var(--ink);
  font-size:15px;
}


.approval-detail-empty p{
  max-width:300px;
  margin:0;
  font-size:11px;
  line-height:1.65;
}


.approval-detail-symbol{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:#637a73;
  font-family:serif;
  font-size:18px;
}


.approval-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}


.approval-detail-head>div{
  min-width:0;
}


.approval-detail-head h2{
  margin:9px 0 0;
  font-size:20px;
  line-height:1.35;
}


.approval-detail-close{
  width:32px;
  height:32px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--muted);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}


.approval-detail-close:hover{
  color:var(--ink);
  border-color:var(--line-strong);
}


.approval-detail-meta{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:15px;
}


.approval-detail-meta>div{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}


.approval-detail-meta span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:9.5px;
}


.approval-detail-meta strong{
  display:block;
  font-size:11.5px;
  line-height:1.45;
}


.approval-break{
  overflow-wrap:anywhere;
}


.approval-review-note{
  margin-bottom:14px;
  padding:12px 13px;
  border:1px solid #e7dcc6;
  border-radius:9px;
  background:#fffaf2;
}


.approval-review-note>span{
  display:block;
  margin-bottom:5px;
  color:#806f51;
  font-size:10px;
}


.approval-review-note p{
  margin:0;
  color:#665b48;
  font-size:11.5px;
  line-height:1.6;
}


.approval-review-note small{
  display:block;
  margin-top:6px;
  color:#97886e;
  font-size:9.5px;
}


.approval-json-section{
  margin-top:11px;
}


.approval-json-section h3{
  margin:0 0 7px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
}


.approval-json-section pre{
  max-height:300px;
  margin:0;
  padding:13px 14px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:#4b5552;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:10.5px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


.approval-json-section.proposed pre{
  background:#fbfcf8;
}


.approval-json-section.reviewed pre{
  background:#f7faf7;
}


.approval-loading{
  min-height:150px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  color:var(--muted);
  text-align:center;
}


.approval-loading strong{
  color:var(--ink);
  font-size:12px;
}


.approval-loading small{
  font-size:10px;
}


.approval-loading-dot{
  width:16px;
  height:16px;
  border:2px solid #dce4df;
  border-top-color:#607a71;
  border-radius:50%;
  animation:
    approval-spin .75s
    linear infinite;
}


@keyframes approval-spin{
  to{
    transform:rotate(360deg);
  }
}


@media (max-width:1100px){

  .approval-workspace{
    grid-template-columns:
      minmax(260px,.8fr)
      minmax(350px,1.2fr);
  }

}


@media (max-width:900px){

  .approval-summary{
    grid-template-columns:1fr;
  }


  .approval-workspace{
    grid-template-columns:1fr;
  }


  .approval-detail-pane{
    min-height:380px;
  }


  .approval-detail-empty{
    min-height:340px;
  }

}


@media (max-width:620px){

  .approval-detail-meta{
    grid-template-columns:1fr;
  }


  .approval-page-head{
    gap:14px;
  }

}


@media (prefers-reduced-motion:reduce){

  .approval-request-card{
    transition:none;
  }


  .approval-loading-dot{
    animation:none;
  }

}


/* ===== Approval Center Write UI R2 ===== */

#view-approvals .approval-write-panel{
  margin-top:18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:
    0 8px 24px rgba(34,54,48,.035);
}

#view-approvals .approval-write-panel.is-loading{
  opacity:.72;
}

#view-approvals .approval-write-empty{
  min-height:82px;
  display:grid;
  align-content:center;
  gap:5px;
  color:var(--muted);
}

#view-approvals .approval-write-empty strong{
  color:var(--ink);
  font-size:14px;
}

#view-approvals .approval-write-empty span{
  font-size:12px;
  line-height:1.65;
}

#view-approvals .approval-write-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}

#view-approvals .approval-write-head>div{
  min-width:0;
  display:grid;
  gap:5px;
}

#view-approvals .approval-write-head strong{
  font-size:15px;
  line-height:1.5;
}

#view-approvals .approval-write-head small{
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

#view-approvals .approval-write-status{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f7f9f7;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
}

#view-approvals .approval-write-status-pending{
  border-color:#dfd1ae;
  background:#fffaf0;
  color:#79653f;
}

#view-approvals .approval-write-status-approved{
  border-color:#c5dcd3;
  background:#f3faf6;
  color:#426a5d;
}

#view-approvals .approval-write-status-rejected{
  border-color:#e4c5c5;
  background:#fff7f7;
  color:#984c4c;
}

#view-approvals .approval-write-status-cancelled,
#view-approvals .approval-write-status-canceled{
  background:#f4f5f4;
  color:#777f7c;
}

#view-approvals .approval-write-note{
  margin-top:16px;
  display:grid;
  gap:7px;
}

#view-approvals .approval-write-note>span{
  font-size:12px;
  font-weight:650;
}

#view-approvals .approval-write-note>span small{
  margin-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:400;
}

#view-approvals .approval-write-note textarea{
  width:100%;
  min-height:104px;
  resize:vertical;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:12px;
  line-height:1.65;
  box-sizing:border-box;
}

#view-approvals .approval-write-note textarea:focus{
  outline:none;
  border-color:var(--line-strong);
  box-shadow:
    0 0 0 3px rgba(67,105,94,.07);
}

#view-approvals .approval-write-note>small{
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
}

#view-approvals .approval-write-actions{
  margin-top:16px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

#view-approvals .approval-write-actions button{
  min-height:40px;
  padding-inline:16px;
}

#view-approvals .approval-write-reject{
  color:#9b4545;
  border-color:#e4c5c5;
  background:#fffafa;
}

#view-approvals .approval-write-reject:hover{
  color:#843838;
  border-color:#d9afaf;
  background:#fff4f4;
}

#view-approvals .approval-write-readonly{
  margin-top:15px;
  padding:11px 13px;
  border-radius:9px;
  background:#f7f8f7;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.65;
}

#view-approvals .approval-write-readonly strong{
  color:var(--ink);
}

@media (max-width:720px){

  #view-approvals .approval-write-head{
    flex-direction:column;
  }

  #view-approvals .approval-write-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  #view-approvals .approval-write-actions button{
    width:100%;
  }

}



/* ============================================================
   CYF-A3+A4 ADMIN GOVERNANCE UI

   Only structural additions are defined here.
   Existing admin-panel / admin-subtabs / buttons / inputs /
   typography remain the primary visual system.
   ============================================================ */

.governance-policy-hidden,
.governance-empty-group{
  display:none !important;
}

.governance-admin-view{
  transform-origin:50% 0;
}

.governance-visibility-grid,
.governance-structure-layout{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:18px;
}

.governance-menu-list{
  display:grid;
  gap:8px;
}

.governance-menu-row{
  display:grid;
  grid-template-columns:
    minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:48px;
  padding:10px 2px;
  border-bottom:
    1px solid rgba(127,127,127,.16);
  transition:
    transform .18s ease,
    opacity .18s ease;
}

.governance-menu-row:last-child{
  border-bottom:0;
}

.governance-menu-row:hover{
  transform:translateY(-1px);
}

.governance-menu-row-locked{
  opacity:.58;
}

.governance-menu-copy{
  display:grid;
  gap:3px;
  min-width:0;
}

.governance-menu-copy strong,
.governance-menu-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
}

.governance-menu-copy small{
  opacity:.68;
}

.governance-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-weight:600;
}

.governance-switch input{
  width:17px;
  height:17px;
  margin:0;
}

.governance-structure-row{
  display:grid;
  grid-template-columns:
    minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:7px 0;
}

.governance-order-actions,
.governance-item-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.governance-order-actions
.secondary-button,
.governance-item-controls
.secondary-button{
  min-width:42px;
  padding-left:12px;
  padding-right:12px;
}

.governance-group-select{
  min-width:150px;
}

.governance-structure-menu-row{
  grid-template-columns:
    minmax(180px,1fr)
    minmax(230px,auto);
}

@media (max-width:1000px){

  .governance-visibility-grid,
  .governance-structure-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){

  .governance-menu-row,
  .governance-structure-menu-row,
  .governance-structure-row{
    grid-template-columns:1fr;
  }

  .governance-switch,
  .governance-order-actions,
  .governance-item-controls{
    justify-content:flex-start;
  }

  .governance-group-select{
    flex:1;
    min-width:0;
  }
}

@media (prefers-reduced-motion:reduce){

  .governance-menu-row{
    transition:none;
  }

  .governance-menu-row:hover{
    transform:none;
  }
}


/* ==========================================================
   DISCUSSION-D6-ABOUT-ENTRY-R2
   ========================================================== */


.about-discussion-screen{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}


.about-discussion-shell{
  position:relative;
  min-height:min(780px,calc(100vh - 90px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:clamp(90px,10vh,132px);
  padding-bottom:clamp(74px,9vh,118px);
  text-align:center;
}


.about-discussion-ambient{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}


.about-discussion-ambient::before,
.about-discussion-ambient::after{
  content:"";
  position:absolute;
  border-radius:50%;
}


.about-discussion-ambient::before{
  width:clamp(300px,38vw,620px);
  height:clamp(300px,38vw,620px);
  left:-14%;
  top:14%;
  background:
    radial-gradient(
      circle,
      rgba(79,146,203,.12),
      rgba(79,146,203,0) 68%
    );
}


.about-discussion-ambient::after{
  width:clamp(330px,42vw,680px);
  height:clamp(330px,42vw,680px);
  right:-17%;
  bottom:-8%;
  background:
    radial-gradient(
      circle,
      rgba(89,171,148,.10),
      rgba(89,171,148,0) 70%
    );
}


.about-discussion-orbit{
  position:absolute;
  display:block;
  border:1px solid rgba(83,133,176,.11);
  border-radius:50%;
}


.about-discussion-orbit::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  top:50%;
  left:-4px;
  border-radius:50%;
  background:rgba(72,139,196,.42);
  box-shadow:
    0 0 0 5px
    rgba(72,139,196,.055);
}


.about-discussion-orbit.orbit-one{
  width:390px;
  height:160px;
  left:3%;
  top:25%;
  transform:rotate(-19deg);
  animation:
    d6r2OrbitOne
    10s
    ease-in-out
    infinite
    alternate;
}


.about-discussion-orbit.orbit-two{
  width:300px;
  height:124px;
  right:4%;
  bottom:22%;
  transform:rotate(21deg);
  animation:
    d6r2OrbitTwo
    12s
    ease-in-out
    infinite
    alternate;
}


.about-discussion-dot{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(72,127,174,.28);
}


.about-discussion-dot.dot-one{
  left:16%;
  bottom:20%;
  animation:d6r2Float 5.6s ease-in-out infinite;
}


.about-discussion-dot.dot-two{
  right:18%;
  top:23%;
  width:7px;
  height:7px;
  animation:d6r2Float 6.8s ease-in-out -1.4s infinite;
}


.about-discussion-dot.dot-three{
  right:27%;
  bottom:18%;
  width:4px;
  height:4px;
  animation:d6r2Float 4.8s ease-in-out -.8s infinite;
}


.about-discussion-copy{
  width:min(760px,92vw);
}


.about-discussion-copy h2{
  margin:0 0 18px;
  color:var(--ink,#172b3b);
  font-size:clamp(40px,5.2vw,74px);
  font-weight:760;
  line-height:1.08;
  letter-spacing:-.045em;
}


.about-discussion-copy p{
  width:min(660px,92%);
  margin:0 auto;
  color:#657684;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.9;
}


.about-discussion-entry{
  position:relative;
  width:min(720px,calc(100vw - 40px));
  min-height:clamp(116px,13vw,145px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,30px);
  margin-top:clamp(35px,5vh,52px);
  padding:
    clamp(20px,2.6vw,29px)
    clamp(22px,3vw,34px);
  overflow:hidden;
  border:1px solid rgba(102,151,190,.23);
  border-radius:clamp(24px,3vw,34px);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.95),
      rgba(246,251,253,.89)
    );
  box-shadow:
    0 22px 60px rgba(29,75,108,.10),
    inset 0 1px 0 rgba(255,255,255,.86);
  color:inherit;
  text-align:left;
  text-decoration:none;
  transition:
    transform 440ms var(--ease-soft,ease),
    border-color 320ms ease,
    box-shadow 440ms var(--ease-soft,ease);
}


.about-discussion-entry::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-80px;
  top:-105px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(82,157,211,.16),
      rgba(82,157,211,0) 70%
    );
}


.about-discussion-entry:hover{
  transform:translateY(-7px) scale(1.008);
  border-color:rgba(71,143,199,.40);
  box-shadow:
    0 30px 76px rgba(25,77,115,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
}


.about-discussion-entry:focus-visible{
  outline:3px solid rgba(56,130,190,.24);
  outline-offset:5px;
}


.about-discussion-icon{
  position:relative;
  width:clamp(72px,8vw,92px);
  height:clamp(72px,8vw,92px);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      rgba(67,139,197,.12),
      rgba(90,180,157,.08)
    );
}


.about-discussion-icon .bubble{
  position:absolute;
  display:block;
  border:2px solid rgba(57,117,165,.72);
  border-radius:13px 13px 13px 5px;
  background:rgba(255,255,255,.80);
}


.about-discussion-icon .bubble-one{
  width:42%;
  height:35%;
  left:20%;
  top:23%;
  animation:
    d6r2BubbleOne
    4.6s
    ease-in-out
    infinite;
}


.about-discussion-icon .bubble-two{
  width:40%;
  height:33%;
  right:17%;
  bottom:21%;
  border-color:rgba(63,151,130,.65);
  animation:
    d6r2BubbleTwo
    5.2s
    ease-in-out
    -.9s
    infinite;
}


.about-discussion-entry-copy{
  position:relative;
  z-index:1;
  min-width:0;
}


.about-discussion-entry-copy small{
  display:block;
  margin-bottom:6px;
  color:#7291a7;
  font-size:clamp(10px,1vw,12px);
  font-weight:760;
  letter-spacing:.14em;
}


.about-discussion-entry-copy strong{
  display:block;
  color:#1b3548;
  font-size:clamp(22px,2.4vw,31px);
  font-weight:760;
  line-height:1.25;
}


.about-discussion-entry-copy em{
  display:block;
  margin-top:7px;
  color:#82919d;
  font-size:clamp(12px,1.15vw,14px);
  font-style:normal;
}


.about-discussion-arrow{
  position:relative;
  z-index:1;
  width:clamp(58px,7vw,78px);
  height:clamp(58px,7vw,78px);
  display:grid;
  place-items:center;
  border:1px solid rgba(71,140,193,.17);
  border-radius:50%;
  background:rgba(255,255,255,.67);
  transition:transform 360ms var(--ease-soft,ease);
}


.about-discussion-arrow b{
  color:#407caf;
  font-size:clamp(23px,2.4vw,30px);
  font-weight:500;
  transition:transform 340ms var(--ease-soft,ease);
}


.about-discussion-entry:hover
.about-discussion-arrow{
  transform:scale(1.05);
}


.about-discussion-entry:hover
.about-discussion-arrow b{
  transform:translateX(5px);
}


.about-discussion-note{
  margin:17px 0 0;
  color:rgba(102,119,132,.72);
  font-size:12px;
}


@keyframes d6r2OrbitOne{

  from{
    transform:rotate(-19deg) translate3d(0,0,0);
  }

  to{
    transform:rotate(-16deg) translate3d(16px,-8px,0);
  }
}


@keyframes d6r2OrbitTwo{

  from{
    transform:rotate(21deg) translate3d(0,0,0);
  }

  to{
    transform:rotate(18deg) translate3d(-14px,8px,0);
  }
}


@keyframes d6r2Float{

  0%,
  100%{
    transform:translate3d(0,0,0);
    opacity:.5;
  }

  50%{
    transform:translate3d(5px,-10px,0);
    opacity:1;
  }
}


@keyframes d6r2BubbleOne{

  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(-2px,-4px,0);
  }
}


@keyframes d6r2BubbleTwo{

  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(3px,-3px,0);
  }
}


@media(max-width:720px){

  .about-discussion-shell{
    min-height:calc(100svh - 70px);
    padding-inline:18px;
  }


  .about-discussion-entry{
    grid-template-columns:auto minmax(0,1fr);
    padding:19px 18px;
    border-radius:25px;
  }


  .about-discussion-icon{
    width:66px;
    height:66px;
  }


  .about-discussion-arrow{
    grid-column:1/-1;
    width:100%;
    height:43px;
    border-radius:14px;
  }

}


@media(prefers-reduced-motion:reduce){

  .about-discussion-orbit,
  .about-discussion-dot,
  .about-discussion-icon .bubble{
    animation:none!important;
  }


  .about-discussion-entry,
  .about-discussion-arrow,
  .about-discussion-arrow b{
    transition:none!important;
  }


  .about-discussion-entry:hover{
    transform:none;
  }

}


/* Discussion page shell */


.discussion-shell-page{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(70,143,201,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 85% 78%,
      rgba(76,171,146,.08),
      transparent 35%
    ),
    #f8faf9;
}


.discussion-shell-main{
  min-height:calc(100vh - 80px);
  display:grid;
  place-items:center;
  padding:120px 22px 70px;
}


.discussion-shell-card{
  width:min(820px,100%);
  padding:clamp(34px,6vw,68px);
  border:1px solid rgba(100,147,183,.20);
  border-radius:clamp(28px,4vw,42px);
  background:rgba(255,255,255,.89);
  box-shadow:
    0 30px 90px
    rgba(31,74,106,.12);
  text-align:center;
}


.discussion-shell-kicker{
  display:inline-block;
  margin-bottom:16px;
  color:#6086a4;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
}


.discussion-shell-card h1{
  margin:0 0 17px;
  color:#183144;
  font-size:clamp(42px,7vw,76px);
  line-height:1.08;
}


.discussion-shell-lead{
  width:min(620px,100%);
  margin:0 auto;
  color:#697d8c;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.9;
}


.discussion-shell-status{
  width:min(500px,100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:32px auto 0;
  padding:14px 18px;
  border:1px solid rgba(91,143,183,.15);
  border-radius:16px;
  background:rgba(245,250,252,.85);
  color:#60798c;
  font-size:13px;
}


.discussion-shell-status i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#63a990;
  box-shadow:
    0 0 0 5px
    rgba(99,169,144,.10);
}


.discussion-shell-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:11px;
  margin-top:28px;
}


.discussion-shell-actions a{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 21px;
  border-radius:14px;
  text-decoration:none;
  font-size:13px;
  font-weight:720;
}


.discussion-shell-back{
  border:1px solid rgba(99,132,158,.18);
  background:#fff;
  color:#536e82;
}


.discussion-shell-home{
  background:
    linear-gradient(
      135deg,
      #518ec3,
      #59a897
    );
  color:#fff;
}


/* ===== END DISCUSSION-D6-ABOUT-ENTRY-R2 ===== */

/* ===== ABOUT-MEMBER-SPLIT-R2 START ===== */

/*
 * 两位成员仍处于同一整屏。
 *
 * 主卡：
 *   张丽敏 -> 左侧大卡
 *
 * 副卡：
 *   蔡一帆 -> 右侧较小卡
 *
 * 每张卡内部：
 *   左 = 完整人物照片
 *   右 = 姓名 / 身份 / 研究方向 / 简介
 *
 * 不覆盖原有 transform / opacity，
 * 因而原成员进入动画、hover 动画继续生效。
 */

.about-page
.mx-member-grid.count-2{
  width:
    min(
      calc(100vw - 92px),
      1240px
    );

  margin-inline:auto;

  display:grid;

  grid-template-columns:
    minmax(0,1.62fr)
    minmax(0,.88fr);

  gap:
    clamp(
      24px,
      2.4vw,
      38px
    );

  align-items:center;
}


/* ==========================================================
 * Card
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-profile{
  min-width:0;
  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(210px,.80fr)
    minmax(0,1.20fr);

  overflow:hidden;

  border-radius:22px;
}


/*
 * 主卡稍高、稍宽。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child{
  height:
    clamp(
      405px,
      48dvh,
      515px
    );
}


/*
 * 副卡小一档，
 * 不和主卡争夺视觉中心。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2){
  height:
    clamp(
      345px,
      40dvh,
      430px
    );

  grid-template-columns:
    minmax(150px,.82fr)
    minmax(0,1.18fr);
}


/* ==========================================================
 * Photo side
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-media{
  position:relative;

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  overflow:hidden;

  border-right:
    1px solid
    rgba(34,75,88,.08);
}


/*
 * 模糊背景继续铺满照片区域。
 * 它只负责补齐留白。
 */
.about-page
.mx-member-grid.count-2
.mx-member-backdrop{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.08);

  filter:
    blur(18px)
    saturate(.82)
    brightness(1.08);

  opacity:.32;
}


/*
 * 真实人物图必须完整。
 *
 * contain:
 *   不裁头
 *   不裁脚
 *   不改变原图比例
 */
.about-page
.mx-member-grid.count-2
.mx-member-image{
  position:relative;
  z-index:2;

  display:block;

  width:100%;
  height:100%;

  object-fit:contain!important;
  object-position:center center!important;

  transform:none;
}


/* ==========================================================
 * Text side
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-body{
  min-width:0;
  min-height:0;

  height:100%;

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:
    clamp(
      14px,
      1.4vh,
      19px
    );

  padding:
    clamp(
      26px,
      2.5vw,
      40px
    );
}


/*
 * 主卡右侧留更舒展的文字空间。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-body{
  padding-inline:
    clamp(
      34px,
      3vw,
      48px
    );
}


/*
 * 副卡字体、间距自然收一档，
 * 但不做“缩小版网页”的廉价效果。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-body{
  padding:
    clamp(
      22px,
      2vw,
      30px
    );

  gap:
    clamp(
      11px,
      1.1vh,
      15px
    );
}


.about-page
.mx-member-grid.count-2
.mx-member-name-line{
  display:flex;
  flex-wrap:wrap;

  align-items:baseline;

  column-gap:13px;
  row-gap:5px;
}


.about-page
.mx-member-grid.count-2
.mx-member-name-line h3{
  margin:0;
}


.about-page
.mx-member-grid.count-2
.mx-member-research{
  margin:0;
}


.about-page
.mx-member-grid.count-2
.mx-member-bio-block{
  min-width:0;
  min-height:0;
}


.about-page
.mx-member-grid.count-2
.mx-member-bio{
  overflow-wrap:anywhere;
}


/*
 * 主卡尽可能直接显示更多简介。
 * 太长的仍由原“查看完整介绍”承接。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio{
  display:-webkit-box;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:9;

  line-clamp:9;

  overflow:hidden;
}


/*
 * 副卡信息短，
 * 最多约 5 行即可。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-bio{
  display:-webkit-box;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;

  line-clamp:5;

  overflow:hidden;
}


.about-page
.mx-member-grid.count-2
.mx-member-more{
  align-self:flex-start;

  margin-top:
    clamp(
      6px,
      1vh,
      12px
    );
}


/* ==========================================================
 * 矮屏桌面
 * ========================================================== */

@media
(max-height:790px)
and (min-width:981px){

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child{
    height:
      clamp(
        350px,
        46dvh,
        430px
      );
  }

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){
    height:
      clamp(
        305px,
        38dvh,
        370px
      );
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-body{
    padding-block:22px;
  }

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio{
    -webkit-line-clamp:7;
    line-clamp:7;
  }
}


/* ==========================================================
 * Tablet
 * ========================================================== */

@media
(max-width:980px){

  .about-page
  .mx-member-grid.count-2{
    width:min(92vw,760px);

    grid-template-columns:1fr;

    gap:20px;
  }

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    width:100%;
    height:auto;

    min-height:320px;

    grid-template-columns:
      minmax(190px,.82fr)
      minmax(0,1.18fr);
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-image{
    min-height:320px;
  }
}


/* ==========================================================
 * Mobile
 * ========================================================== */

@media
(max-width:620px){

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    display:block;

    min-height:0;
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-media{

    height:
      clamp(
        250px,
        84vw,
        370px
      );

    border-right:0;

    border-bottom:
      1px solid
      rgba(34,75,88,.08);
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-image{
    min-height:0;
  }

  .about-page
  .mx-member-grid.count-2
  .mx-member-body{
    height:auto;

    padding:
      25px 24px 28px;
  }

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-bio{

    display:block;

    overflow:visible;

    -webkit-line-clamp:unset;
    line-clamp:unset;
  }
}

/* ===== ABOUT-MEMBER-SPLIT-R2 END ===== */

/* ===== PASSWORD-RECOVERY-R1 START ===== */

.login-password-tools{
  display:flex;
  justify-content:flex-end;

  margin-top:-4px;
  margin-bottom:-2px;
}


.login-forgot-link{
  appearance:none;

  border:0;
  background:transparent;

  padding:4px 0;

  color:#456878;

  font:inherit;
  font-size:14px;

  cursor:pointer;

  transition:
    color 180ms ease,
    transform 180ms ease;
}


.login-forgot-link:hover{
  color:#153f56;
  transform:translateY(-1px);
}


.login-recovery-success{
  margin:0;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(62,122,102,.20);

  border-radius:10px;

  background:
    rgba(231,244,237,.72);

  color:#41695a;

  font-size:13px;
  line-height:1.7;
}


body.password-recovery-open{
  overflow:hidden;
}


.password-recovery-layer{
  position:fixed;
  inset:0;

  z-index:1000;

  display:grid;
  place-items:center;

  padding:28px;

  opacity:0;

  transition:
    opacity 180ms ease;
}


.password-recovery-layer[hidden]{
  display:none;
}


.password-recovery-layer.is-open{
  opacity:1;
}


.password-recovery-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(18,31,37,.25);

  backdrop-filter:
    blur(8px);
}


.password-recovery-dialog{
  position:relative;
  z-index:2;

  width:
    min(
      560px,
      calc(100vw - 32px)
    );

  max-height:
    min(
      760px,
      calc(100dvh - 36px)
    );

  overflow:auto;

  padding:
    clamp(
      30px,
      4vw,
      44px
    );

  border:
    1px solid
    rgba(38,76,90,.13);

  border-radius:22px;

  background:
    rgba(251,252,249,.97);

  box-shadow:
    0 28px 80px
    rgba(24,43,51,.16);

  transform:
    translateY(14px)
    scale(.985);

  transition:
    transform
    230ms
    cubic-bezier(
      .2,.7,.2,1
    );
}


.password-recovery-layer.is-open
.password-recovery-dialog{
  transform:
    translateY(0)
    scale(1);
}


.password-recovery-close{
  position:absolute;

  top:17px;
  right:18px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(40,78,92,.12);

  border-radius:50%;

  background:
    rgba(255,255,255,.70);

  color:#607077;

  font-size:25px;
  line-height:1;

  cursor:pointer;

  transition:
    transform 180ms ease,
    background 180ms ease;
}


.password-recovery-close:hover{
  transform:rotate(4deg);
  background:#fff;
}


.password-recovery-head{
  padding-right:38px;
  margin-bottom:26px;
}


.password-recovery-head h2{
  margin:
    7px 0 10px;

  font-family:
    "Songti SC",
    "STSong",
    SimSun,
    serif;

  font-size:
    clamp(
      28px,
      4vw,
      37px
    );

  color:#172529;
}


.password-recovery-head p{
  margin:0;

  color:#778488;

  font-size:14px;
  line-height:1.8;
}


.password-recovery-message{
  margin:
    0 0 18px;

  padding:
    11px 13px;

  border-radius:10px;

  background:
    rgba(244,232,227,.74);

  color:#875f53;

  font-size:13px;
  line-height:1.7;
}


.password-recovery-message[data-kind="success"]{
  background:
    rgba(230,242,236,.82);

  color:#456b5c;
}


.password-recovery-step{
  position:relative;
}


.password-recovery-step[hidden]{
  display:none;
}


.password-recovery-step-index{
  display:block;

  margin-bottom:16px;

  color:
    rgba(35,82,102,.44);

  font-size:12px;
  font-weight:700;

  letter-spacing:.18em;
}


.password-recovery-primary{
  width:100%;
  margin-top:10px;
}


.password-recovery-inline-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;

  margin-top:12px;
}


.password-recovery-inline-actions
button{
  min-height:46px;
}


.password-recovery-summary{
  margin:
    0 0 17px;

  color:#758286;

  font-size:14px;
  line-height:1.7;
}


.password-recovery-summary strong{
  color:#304f5d;
}


.password-recovery-code{
  letter-spacing:.24em;
  font-variant-numeric:
    tabular-nums;
}


.password-recovery-account{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:16px;

  margin-bottom:20px;

  padding:
    15px 17px;

  border:
    1px solid
    rgba(37,82,101,.12);

  border-radius:12px;

  background:
    rgba(235,242,242,.54);
}


.password-recovery-account span{
  color:#738187;
  font-size:13px;
}


.password-recovery-account strong{
  color:#173f58;
  font-size:18px;
}


.password-recovery-note{
  margin:
    2px 0 12px;

  color:#879194;

  font-size:12px;
  line-height:1.8;
}


@media
(max-width:560px){

  .password-recovery-layer{
    padding:16px;
  }

  .password-recovery-dialog{
    padding:
      30px 22px 25px;
  }

  .password-recovery-inline-actions{
    grid-template-columns:1fr;
  }
}


@media
(prefers-reduced-motion:reduce){

  .password-recovery-layer,
  .password-recovery-dialog,
  .login-forgot-link,
  .password-recovery-close{
    transition:none!important;
  }
}

/* ===== PASSWORD-RECOVERY-R1 END ===== */

/* ===== ABOUT-MEMBER-SPLIT-R3 START ===== */


/* ==========================================================
   1. 整体成员区域进一步加宽
   ========================================================== */

.about-page
.mx-member-grid.count-2{

  width:
    min(
      calc(100vw - 72px),
      1360px
    );

  /*
   * 主卡 : 副卡
   *
   * 约：
   *   张丽敏  820~850px
   *   蔡一帆  490~520px
   *
   * 两边都比上一版宽，
   * 但仍然保持非常明确的主次关系。
   */
  grid-template-columns:
    minmax(0,1.68fr)
    minmax(430px,1fr);

  gap:
    clamp(
      28px,
      2.2vw,
      36px
    );

  align-items:center;
}


/* ==========================================================
   2. 两张卡统一自然高度
   ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-profile{

  /*
   * 不能再用固定 height 截断正文。
   *
   * 内容多：
   *   卡片自然向下增长。
   *
   * 内容少：
   *   仍然保留足够的视觉高度。
   */
  height:auto!important;

  overflow:hidden;

  align-self:center;
}


/* ==========================================================
   3. 张丽敏 —— 主卡
   ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child{

  min-height:
    clamp(
      470px,
      52dvh,
      550px
    );

  /*
   * 图片约 39%
   * 正文约 61%
   *
   * 上一版正文偏窄，
   * 这次明显增加右侧文字宽度。
   */
  grid-template-columns:
    minmax(305px,.78fr)
    minmax(0,1.22fr);
}


/* ==========================================================
   4. 蔡一帆 —— 副卡
   ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2){

  /*
   * 右卡也比上一版明显更宽，
   * 不再出现过分瘦长的感觉。
   */
  min-height:
    clamp(
      390px,
      43dvh,
      455px
    );

  grid-template-columns:
    minmax(185px,.82fr)
    minmax(0,1.18fr);
}


/* ==========================================================
   5. 图片区域
   ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-media{

  width:100%;
  height:100%;

  min-height:inherit;

  overflow:hidden;
}


/*
 * 保留网站原有的
 * “模糊背景补边”。
 */
.about-page
.mx-member-grid.count-2
.mx-member-backdrop{

  width:100%;
  height:100%;

  object-fit:cover;
}


/*
 * 最重要：
 *
 * 人物真实照片必须完整显示，
 * 不因为卡片宽度增加重新裁剪。
 */
.about-page
.mx-member-grid.count-2
.mx-member-image{

  width:100%;
  height:100%;

  object-fit:contain!important;

  object-position:
    center center!important;
}


/* ==========================================================
   6. 张丽敏右侧正文
   ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-body{

  /*
   * 取消固定高度造成的文字裁切。
   */
  height:auto!important;

  min-height:
    clamp(
      470px,
      52dvh,
      550px
    );

  justify-content:flex-start;

  padding:
    clamp(
      34px,
      3vw,
      46px
    )
    clamp(
      38px,
      3.2vw,
      50px
    );

  gap:
    clamp(
      14px,
      1.35vh,
      18px
    );

  overflow:visible!important;
}


/*
 * 研究方向区域不要太拥挤。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-research{

  line-height:1.8;
}


/* ==========================================================
   7. 张丽敏简介：
      完整显示，不再 line clamp
   ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio-block{

  max-height:none!important;

  overflow:visible!important;
}


.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio{

  /*
   * 上一版这里用了 7~9 行 clamp。
   *
   * 现在全部取消：
   */
  display:block!important;

  max-height:none!important;

  overflow:visible!important;

  -webkit-line-clamp:unset!important;

  line-clamp:unset!important;

  -webkit-box-orient:unset!important;

  line-height:1.78;
}


/*
 * 有些旧样式可能给文本容器加过高度。
 * 一并解除。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-copy{

  max-height:none!important;

  overflow:visible!important;
}


/*
 * 如果完整简介已经全部显示，
 * 原“查看完整介绍”的逻辑仍然存在，
 * 但这里不依赖按钮承担被截断正文。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-more{

  margin-top:
    clamp(
      8px,
      1vh,
      13px
    );
}


/* ==========================================================
   8. 蔡一帆正文稍加宽
   ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-body{

  height:auto!important;

  min-height:
    clamp(
      390px,
      43dvh,
      455px
    );

  padding:
    clamp(
      27px,
      2.3vw,
      34px
    );

  justify-content:flex-start;

  gap:
    clamp(
      12px,
      1.25vh,
      16px
    );
}


/*
 * 蔡一帆当前资料很少，
 * 仍可保持紧凑；
 * 但以后后台简介变长时，
 * 不允许正文把卡片撑爆。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-bio{

  -webkit-line-clamp:6;

  line-clamp:6;
}


/* ==========================================================
   9. 姓名和身份
   ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-name-line{

  display:flex;

  flex-wrap:wrap;

  align-items:baseline;

  column-gap:14px;
  row-gap:6px;
}


/*
 * 主成员名字略大一点，
 * 强化主次关系。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-name-line h3{

  font-size:
    clamp(
      31px,
      2.35vw,
      39px
    );
}


/*
 * 副成员不需要缩得太小。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-name-line h3{

  font-size:
    clamp(
      27px,
      2vw,
      34px
    );
}


/* ==========================================================
   10. 1440px 左右桌面
   ========================================================== */

@media
(max-width:1450px)
and (min-width:1081px){

  .about-page
  .mx-member-grid.count-2{

    width:
      calc(100vw - 64px);

    grid-template-columns:
      minmax(0,1.62fr)
      minmax(390px,.96fr);

    gap:26px;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child{

    grid-template-columns:
      minmax(285px,.78fr)
      minmax(0,1.22fr);
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    grid-template-columns:
      minmax(170px,.80fr)
      minmax(0,1.20fr);
  }
}


/* ==========================================================
   11. 中等屏幕
   ========================================================== */

@media
(max-width:1080px)
and (min-width:901px){

  .about-page
  .mx-member-grid.count-2{

    width:
      min(
        calc(100vw - 48px),
        980px
      );

    grid-template-columns:
      minmax(0,1.48fr)
      minmax(330px,.92fr);

    gap:22px;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child{

    grid-template-columns:
      minmax(245px,.76fr)
      minmax(0,1.24fr);
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    grid-template-columns:
      minmax(145px,.78fr)
      minmax(0,1.22fr);
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body{

    padding:
      29px 30px;
  }
}


/* ==========================================================
   12. 平板以后恢复单列
   ========================================================== */

@media
(max-width:900px){

  .about-page
  .mx-member-grid.count-2{

    width:
      min(
        calc(100vw - 36px),
        760px
      );

    grid-template-columns:1fr;

    gap:22px;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    width:100%;

    min-height:0;

    grid-template-columns:
      minmax(210px,.78fr)
      minmax(0,1.22fr);
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    min-height:360px;
  }
}


/* ==========================================================
   13. 手机
   ========================================================== */

@media
(max-width:620px){

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    display:block;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-media{

    min-height:0;

    height:
      clamp(
        270px,
        88vw,
        390px
      );
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    min-height:0;

    padding:
      27px 25px 30px;
  }


  /*
   * 手机上两人的简介都完整显示，
   * 避免小屏截断。
   */
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-bio{

    display:block!important;

    max-height:none!important;

    overflow:visible!important;

    -webkit-line-clamp:unset!important;

    line-clamp:unset!important;
  }
}


/* ==========================================================
   14. Reduced motion
   ========================================================== */

/*
 * 不创建任何新动画。
 *
 * 因此：
 *   initMemberCardMotion()
 *   hover
 *   页内进入动画
 *
 * 全部继续沿用原网站实现。
 */

@media
(prefers-reduced-motion:reduce){

  .about-page
  .mx-member-grid.count-2
  .mx-member-profile{

    scroll-behavior:auto;
  }
}


/* ===== ABOUT-MEMBER-SPLIT-R3 END ===== */

/* ===== ABOUT-MEMBER-SPLIT-R4 START ===== */


/* ==========================================================
 * 0. 总体目标
 *
 * 桌面端：
 *
 * 左右页面留白约 8%
 *
 * | 8% |
 *      张丽敏主卡
 *          +
 *      蔡一帆副卡
 * | 8% |
 *
 * 两张卡：
 *   - 高度完全一致
 *   - 张丽敏明显更宽
 *   - 图片左、资料右
 * ========================================================== */


/* ==========================================================
 * 1. 整个双卡区域
 *
 * width = 84vw
 *
 * 因此正常桌面：
 * 左空白约 8vw
 * 右空白约 8vw
 * ========================================================== */

.about-page
.mx-member-grid.count-2{

  width:84vw!important;

  max-width:none!important;

  margin-inline:auto!important;


  display:grid!important;

  /*
   * 张丽敏 : 蔡一帆
   *
   * 大约 63 : 37
   *
   * 两张卡都会比现在更舒展，
   * 但张丽敏仍然是明确主卡。
   */
  grid-template-columns:
    minmax(0,1.72fr)
    minmax(0,1fr)!important;


  gap:
    clamp(
      28px,
      2vw,
      36px
    )!important;


  /*
   * 最关键：
   * 两个 Grid Item 强制 Stretch。
   */
  align-items:stretch!important;
}


/* ==========================================================
 * 2. 两张卡严格同高
 *
 * 不再给 first / second 不同 height。
 *
 * 由张丽敏较长正文决定这一行所需高度，
 * 蔡一帆自动 stretch 到同样高度。
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-profile{

  height:auto!important;

  min-height:
    clamp(
      500px,
      54dvh,
      560px
    )!important;

  max-height:none!important;


  align-self:stretch!important;


  /*
   * 图片列由照片自身显示宽度决定。
   *
   * 不再：
   *   300px
   *   35%
   *   .8fr
   *
   * 这样的人工固定图片区宽度。
   */
  grid-template-columns:
    max-content
    minmax(0,1fr)!important;


  overflow:hidden!important;

  border-radius:22px;
}


/*
 * 清除 R2 / R3 对第一张、第二张
 * 单独设置高度/列宽的影响。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child,
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2){

  height:auto!important;

  min-height:
    clamp(
      500px,
      54dvh,
      560px
    )!important;

  max-height:none!important;


  align-self:stretch!important;


  grid-template-columns:
    max-content
    minmax(0,1fr)!important;
}


/* ==========================================================
 * 3. 图片列
 *
 * 重点：
 *
 * 图片列宽度由真正的 mx-member-image
 * 实际渲染宽度撑开。
 *
 * 不额外给图片区一个大于图片自身的固定宽度。
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-media{

  position:relative!important;

  width:max-content!important;

  min-width:0!important;

  max-width:none!important;


  height:100%!important;

  min-height:100%!important;


  display:grid!important;

  place-items:center!important;


  overflow:hidden!important;


  border-right:
    1px solid
    rgba(35,76,88,.08);
}


/* ==========================================================
 * 4. 背景图
 *
 * 继续保留现有网站淡化背景效果，
 * 但它绝对定位，不参与图片区宽度计算。
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-backdrop{

  position:absolute!important;

  inset:0!important;

  z-index:0!important;


  width:100%!important;

  height:100%!important;


  object-fit:cover!important;

  transform:scale(1.06);


  filter:
    blur(16px)
    saturate(.78)
    brightness(1.08);


  opacity:.28;
}


/* ==========================================================
 * 5. 真正人物照片
 *
 * width:auto
 *
 * 因而：
 *   media 列宽度
 *      =
 *   实际显示照片宽度
 *
 * 不裁人物。
 * ========================================================== */

.about-page
.mx-member-grid.count-2
.mx-member-image{

  position:relative!important;

  z-index:2!important;


  display:block!important;


  width:auto!important;

  max-width:none!important;


  object-fit:contain!important;

  object-position:
    center center!important;


  transform:none!important;
}


/*
 * 张丽敏照片：
 *
 * 主卡基本使用完整卡片高度，
 * 因而会自然保持比较大的照片。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-image{

  height:100%!important;

  max-height:
    600px!important;
}


/*
 * 蔡一帆：
 *
 * 卡片现在与张丽敏同高，
 * 但照片本身不需要人为拉到和
 * 张丽敏一样大。
 *
 * 保留网站现在比较舒服的
 * 上下淡背景留白，
 * 同时图片列宽度仍等于照片实际宽度。
 */
.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-image{

  height:
    min(
      74%,
      420px
    )!important;

  max-height:420px!important;
}


/* ==========================================================
 * 6. 张丽敏正文
 * ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-body{

  height:100%!important;

  min-height:0!important;


  padding:
    clamp(
      32px,
      2.6vw,
      44px
    )
    clamp(
      38px,
      3vw,
      52px
    )!important;


  display:flex!important;

  flex-direction:column!important;

  justify-content:center!important;


  gap:
    clamp(
      13px,
      1.2vh,
      17px
    )!important;


  overflow:visible!important;
}


/* ==========================================================
 * 7. 蔡一帆正文
 * ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-body{

  height:100%!important;

  min-height:0!important;


  padding:
    clamp(
      28px,
      2.2vw,
      38px
    )!important;


  display:flex!important;

  flex-direction:column!important;

  justify-content:center!important;


  gap:
    clamp(
      12px,
      1.2vh,
      16px
    )!important;
}


/* ==========================================================
 * 8. 张丽敏简介必须完整
 * ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio-block,
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-copy,
.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio{

  max-height:none!important;

  overflow:visible!important;
}


.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-bio{

  display:block!important;


  -webkit-line-clamp:unset!important;

  line-clamp:unset!important;

  -webkit-box-orient:initial!important;


  white-space:normal!important;


  line-height:1.78!important;
}


/* ==========================================================
 * 9. 蔡一帆简介
 *
 * 资料本身短，正常完整显示。
 * ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-bio{

  display:block!important;

  max-height:none!important;

  overflow:visible!important;


  -webkit-line-clamp:unset!important;

  line-clamp:unset!important;


  white-space:normal!important;
}


/* ==========================================================
 * 10. 名字
 * ========================================================== */

.about-page
.mx-member-grid.count-2
> .mx-member-profile:first-child
.mx-member-name-line h3{

  font-size:
    clamp(
      32px,
      2.3vw,
      40px
    )!important;
}


.about-page
.mx-member-grid.count-2
> .mx-member-profile:nth-child(2)
.mx-member-name-line h3{

  font-size:
    clamp(
      28px,
      2vw,
      35px
    )!important;
}


/* ==========================================================
 * 11. 1440 以下桌面
 * ========================================================== */

@media
(max-width:1450px)
and (min-width:981px){

  .about-page
  .mx-member-grid.count-2{

    /*
     * 小一些的桌面仍然维持
     * 左右约 7.5%~8% 视觉空白。
     */
    width:85vw!important;


    grid-template-columns:
      minmax(0,1.68fr)
      minmax(0,1fr)!important;


    gap:25px!important;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    min-height:500px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body{

    padding:
      31px 34px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    padding:
      27px 28px!important;
  }
}


/* ==========================================================
 * 12. 平板
 * ========================================================== */

@media
(max-width:980px){

  .about-page
  .mx-member-grid.count-2{

    width:
      min(
        calc(100vw - 36px),
        780px
      )!important;


    grid-template-columns:
      1fr!important;


    gap:22px!important;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    min-height:420px!important;


    grid-template-columns:
      max-content
      minmax(0,1fr)!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-image{

    height:420px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-image{

    height:330px!important;
  }
}


/* ==========================================================
 * 13. 手机
 * ========================================================== */

@media
(max-width:620px){

  .about-page
  .mx-member-grid.count-2{

    width:
      calc(100vw - 28px)!important;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    display:block!important;

    min-height:0!important;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-media{

    width:100%!important;

    height:
      clamp(
        280px,
        92vw,
        400px
      )!important;

    min-height:0!important;


    border-right:0;

    border-bottom:
      1px solid
      rgba(35,76,88,.08);
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-image,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-image{

    width:100%!important;

    height:100%!important;

    max-width:100%!important;

    max-height:100%!important;


    object-fit:contain!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    height:auto!important;

    padding:
      27px 24px 30px!important;
  }
}


/* ==========================================================
 * 14. Motion
 *
 * 不创建任何新的 transform / opacity 动画。
 *
 * initMemberCardMotion()
 * 以及现有 hover 保持原样。
 * ========================================================== */

/* ===== ABOUT-MEMBER-SPLIT-R4 END ===== */

/* ===== ABOUT-MEMBER-SPLIT-R5 START ===== */


/* ==========================================================
 * 1. 总体宽度
 *
 * 左右各约 8% 空白。
 * 张丽敏仍明显宽于蔡一帆。
 * ========================================================== */

@media
(min-width:981px){

  .about-page
  .mx-member-grid.count-2{

    width:84vw!important;

    max-width:none!important;

    margin-inline:auto!important;


    grid-template-columns:
      minmax(0,1.78fr)
      minmax(0,1fr)!important;


    gap:
      clamp(
        28px,
        2vw,
        36px
      )!important;


    align-items:stretch!important;


    /*
     * 给下面的“向下翻动”留出呼吸空间。
     */
    margin-bottom:
      clamp(
        38px,
        4.5vh,
        58px
      )!important;
  }


  /* ========================================================
   * 2. 两张卡严格同高
   *
   * 关键变化：
   *
   * 不再让卡片随着图片无限变高。
   *
   * 约：
   * 900px 高屏幕 -> 450px 左右
   * 大屏幕       -> 最大 480px
   *
   * 因而下面始终有明显留白。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    height:
      clamp(
        430px,
        50dvh,
        480px
      )!important;


    min-height:
      0!important;

    max-height:
      480px!important;


    align-self:stretch!important;


    /*
     * 图片列依然由图片实际显示宽度决定。
     * 但图片高度现在受我们主动控制，
     * 所以图片区会自然变窄。
     */
    grid-template-columns:
      max-content
      minmax(0,1fr)!important;


    overflow:hidden!important;
  }


  /* ========================================================
   * 3. 图片容器
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  .mx-member-media{

    width:max-content!important;

    height:100%!important;


    min-width:0!important;

    min-height:0!important;


    display:grid!important;

    place-items:center!important;


    overflow:hidden!important;
  }


  /*
   * 背景仍然填满整个图片列。
   *
   * 它绝对定位，
   * 不参与列宽计算。
   */
  .about-page
  .mx-member-grid.count-2
  .mx-member-backdrop{

    position:absolute!important;

    inset:0!important;


    width:100%!important;

    height:100%!important;


    object-fit:cover!important;
  }


  /* ========================================================
   * 4. 张丽敏照片
   *
   * R4 是接近 100% 卡片高度，
   * 所以图片过大、正文变窄。
   *
   * R5 改成约 82%。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-image{

    width:auto!important;


    height:
      82%!important;


    max-height:
      405px!important;


    max-width:none!important;


    object-fit:contain!important;

    object-position:
      center center!important;


    transform:none!important;
  }


  /* ========================================================
   * 5. 蔡一帆照片
   *
   * 再稍微缩一点，
   * 给右侧资料更多横向宽度。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-image{

    width:auto!important;


    height:
      68%!important;


    max-height:
      330px!important;


    max-width:none!important;


    object-fit:contain!important;

    object-position:
      center center!important;


    transform:none!important;
  }


  /* ========================================================
   * 6. 张丽敏正文
   *
   * 由于图片变窄，
   * 右侧正文会直接获得更多宽度。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body{

    height:100%!important;

    min-height:0!important;


    padding:
      clamp(
        27px,
        2.2vw,
        34px
      )
      clamp(
        34px,
        2.7vw,
        44px
      )!important;


    justify-content:center!important;


    gap:
      clamp(
        11px,
        1.05vh,
        15px
      )!important;


    overflow:hidden!important;
  }


  /* ========================================================
   * 7. 张丽敏简介
   *
   * 保持完整；
   * 同时因为正文变宽，
   * 会比现在少换很多行。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio-block,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-copy{

    max-height:none!important;

    overflow:visible!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio{

    display:block!important;


    max-height:none!important;


    -webkit-line-clamp:unset!important;

    line-clamp:unset!important;

    -webkit-box-orient:initial!important;


    white-space:normal!important;


    overflow:visible!important;


    font-size:
      clamp(
        13.5px,
        .92vw,
        14.5px
      )!important;


    line-height:
      1.72!important;
  }


  /* ========================================================
   * 8. 蔡一帆正文
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    height:100%!important;

    min-height:0!important;


    /*
     * 横向 padding 也稍微减一点，
     * 进一步给文字增加有效宽度。
     */
    padding:
      clamp(
        26px,
        2vw,
        32px
      )
      clamp(
        27px,
        2.1vw,
        34px
      )!important;


    justify-content:center!important;


    gap:
      clamp(
        11px,
        1vh,
        14px
      )!important;


    overflow:hidden!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-bio{

    display:block!important;


    max-height:none!important;

    overflow:visible!important;


    -webkit-line-clamp:unset!important;

    line-clamp:unset!important;


    line-height:
      1.72!important;
  }


  /* ========================================================
   * 9. 标题尺寸稍收一点点
   *
   * 不缩得难看，
   * 只是避免名字占用过多纵向空间。
   * ======================================================== */

  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-name-line h3{

    font-size:
      clamp(
        30px,
        2.15vw,
        37px
      )!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-name-line h3{

    font-size:
      clamp(
        27px,
        1.85vw,
        33px
      )!important;
  }

}


/* ==========================================================
 * 10. 比较矮的桌面
 *
 * 768~820 高左右：
 * 卡片再收一点，
 * 绝不压到下面的翻页提示。
 * ========================================================== */

@media
(min-width:981px)
and (max-height:820px){

  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    height:
      420px!important;

    max-height:
      420px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-image{

    height:
      80%!important;

    max-height:
      350px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-image{

    height:
      66%!important;

    max-height:
      285px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-bio{

    font-size:
      13.2px!important;

    line-height:
      1.62!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child
  .mx-member-body{

    padding:
      23px 30px!important;

    gap:
      9px!important;
  }


  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2)
  .mx-member-body{

    padding:
      23px 26px!important;
  }


  .about-page
  .mx-member-grid.count-2{

    margin-bottom:
      48px!important;
  }
}


/* ==========================================================
 * 11. 平板
 *
 * 900 以下继续使用网站原来的单列方式，
 * 不强制桌面双卡高度规则。
 * ========================================================== */

@media
(max-width:980px){

  .about-page
  .mx-member-grid.count-2{

    width:
      min(
        calc(100vw - 36px),
        780px
      )!important;


    margin-bottom:
      32px!important;
  }


  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    height:auto!important;

    max-height:none!important;

    min-height:380px!important;
  }
}


/* ==========================================================
 * 12. 手机
 * ========================================================== */

@media
(max-width:620px){

  .about-page
  .mx-member-grid.count-2
  .mx-member-profile,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:first-child,
  .about-page
  .mx-member-grid.count-2
  > .mx-member-profile:nth-child(2){

    min-height:0!important;
  }
}


/*
 * 不新增 transform / opacity 动画。
 * 原 initMemberCardMotion() 和 hover 全部保留。
 */

/* ===== ABOUT-MEMBER-SPLIT-R5 END ===== */

/* ===== ABOUT-MEMBER-BIO-SIZE-R1 START ===== */


/*
 * 只改变“个人简介”正文。
 *
 * 不影响：
 * - 成员姓名
 * - 身份 / 职位
 * - 研究方向
 * - 卡片大小
 * - 图片大小
 * - 动画
 */
html
body.about-page
.mx-member-profile
.mx-member-bio{

  font-size:
    var(
      --about-member-bio-size,
      14.5px
    )!important;
}


/*
 * 点击“查看完整介绍”后的正文
 * 使用同一个设置。
 */
html
body.about-page
.member-detail-layer
[data-member-detail-bio]{

  font-size:
    var(
      --about-member-bio-size,
      14.5px
    )!important;
}


/* ---------- 后台控制卡 ---------- */

.member-typography-setting{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(180px,240px);

  align-items:center;

  gap:
    clamp(
      22px,
      3vw,
      42px
    );


  margin-bottom:22px;

  padding:
    22px 24px;


  border:
    1px solid
    rgba(42,83,96,.12);

  border-radius:16px;


  background:
    linear-gradient(
      135deg,
      rgba(246,249,247,.96),
      rgba(255,255,255,.98)
    );


  box-shadow:
    0 13px 34px
    rgba(30,58,67,.055);
}


.member-typography-setting-copy{

  min-width:0;
}


.member-typography-setting-copy
.page-kicker{

  display:block;

  margin-bottom:7px;
}


.member-typography-setting-copy
strong{

  display:block;

  margin-bottom:7px;


  color:#20373f;

  font-size:16px;

  font-weight:650;

  letter-spacing:.01em;
}


.member-typography-setting-copy
p{

  margin:0;


  color:#82908e;

  font-size:13px;

  line-height:1.75;
}


.member-typography-size-field{

  display:block;
}


.member-typography-size-input{

  position:relative;
}


.member-typography-size-input
input{

  width:100%;

  padding-right:48px;
}


.member-typography-size-input
> span{

  position:absolute;

  top:50%;

  right:15px;

  transform:
    translateY(-50%);


  pointer-events:none;


  color:#89938f;

  font-size:12px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}


.member-typography-size-field
small{

  display:block;

  margin-top:7px;


  color:#9aa3a0;

  font-size:11px;

  line-height:1.65;
}


@media
(max-width:760px){

  .member-typography-setting{

    grid-template-columns:
      1fr;

    gap:16px;
  }
}


/* ===== ABOUT-MEMBER-BIO-SIZE-R1 END ===== */


/* ===== C17 ANALYTICS + STANDARD TEAM PAGES START ===== */

.analytics-metric-card .analytics-delta{
  position:absolute;
  z-index:2;
  top:22px;
  right:22px;
  bottom:auto;
  display:grid;
  justify-items:end;
  gap:3px;
  min-height:0;
  padding:8px 11px 7px;
  border:1px solid rgba(45,83,76,.08);
  border-radius:12px;
  background:rgba(246,249,246,.92);
  color:#758781;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.analytics-metric-card .analytics-delta-label{
  font-size:12px;
  line-height:1.15;
  font-weight:650;
  letter-spacing:.02em;
  opacity:.82;
}

.analytics-metric-card .analytics-delta-value{
  color:inherit;
  font-size:15px;
  line-height:1.15;
  font-weight:760;
  letter-spacing:.01em;
}

.analytics-metric-card .analytics-delta.up{
  background:rgba(59,120,98,.075);
  border-color:rgba(59,120,98,.12);
  color:#356f5d;
}

.analytics-metric-card .analytics-delta.down{
  background:rgba(172,91,78,.065);
  border-color:rgba(172,91,78,.11);
  color:#9a5a50;
}

.analytics-metric-card .analytics-delta.flat{
  color:#7a8884;
}

@media(max-width:560px){
  .analytics-metric-card .analytics-delta{
    top:16px;
    right:16px;
    bottom:auto;
  }
}

/*
 * Page 1 intentionally keeps the existing asymmetric portrait layout.
 * Page 2+ uses a stable two-column card system with identical card widths,
 * identical media/body ratios and uncropped photos.
 */
@media(min-width:981px){
  .about-page .mx-member-grid.team-page-standard{
    width:min(84vw,1420px)!important;
    max-width:1420px!important;
    margin-inline:auto!important;
    margin-bottom:clamp(38px,4.5vh,58px)!important;
    gap:clamp(26px,2vw,36px)!important;
    align-items:stretch!important;
  }

  .about-page .mx-member-grid.team-page-standard.count-2{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .about-page .mx-member-grid.team-page-standard.count-1{
    grid-template-columns:minmax(0,min(860px,70vw))!important;
    justify-content:center!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-profile,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:first-child,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:nth-child(2){
    width:100%!important;
    height:clamp(430px,50dvh,490px)!important;
    min-height:0!important;
    max-height:490px!important;
    grid-template-columns:42% minmax(0,58%)!important;
    align-self:stretch!important;
    overflow:hidden!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-media{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,#f2f5f1,#eef2ee)!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-backdrop{
    display:none!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-image,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:first-child .mx-member-image,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:nth-child(2) .mx-member-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-body,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:first-child .mx-member-body,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:nth-child(2) .mx-member-body{
    box-sizing:border-box!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:clamp(27px,2vw,34px) clamp(28px,2.2vw,38px)!important;
    justify-content:center!important;
    gap:clamp(11px,1.05vh,15px)!important;
    overflow:hidden!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-name-line h3,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:first-child .mx-member-name-line h3,
  .about-page .mx-member-grid.team-page-standard.count-2 > .mx-member-profile:nth-child(2) .mx-member-name-line h3{
    font-size:clamp(28px,2vw,35px)!important;
  }

  .about-page .mx-member-grid.team-page-standard .mx-member-bio{
    line-height:1.72!important;
  }
}

@media(max-width:980px){
  .about-page .mx-member-grid.team-page-standard{
    grid-template-columns:1fr!important;
  }
}

/* ===== C17 ANALYTICS + STANDARD TEAM PAGES END ===== */


/* ==========================================================
   V21 — Public Footer Filing FINAL R3

   Requirements:
   - top navigation untouched
   - footer left brand anchored
   - footer right admin anchored
   - bottom navigation moderately shifted left
   - filing area centered in remaining blank space
   - two filing rows centered as one object
   - future official police icon automatically constrained
   ========================================================== */


/* ----------------------------------------------------------
   Filing region
   ---------------------------------------------------------- */

.site-footer .footer-filing{
  min-width:0;

  height:80%;

  align-self:center;
  justify-self:stretch;

  display:grid;

  place-items:center;

  color:#5d6967;

  font-size:13px;
  font-weight:400;

  line-height:1.15;

  letter-spacing:.005em;

  transform:none !important;
}


/*
 * The wrapper shrinks to the longest row,
 * then the WHOLE two-line object is centered
 * inside the filing column.
 */
.site-footer .footer-filing-content{
  width:max-content;

  max-width:100%;

  margin:0 auto;

  display:grid;

  grid-template-columns:max-content;

  grid-auto-rows:minmax(20px,auto);

  align-items:center;

  row-gap:1px;
}


/*
 * Both rows use the same:
 *
 * 20px icon column
 * 6px gap
 * text column
 *
 * Therefore adding the real police icon
 * will not move the police filing text.
 */
.site-footer .footer-filing-row{
  width:100%;

  display:grid;

  grid-template-columns:
    20px
    max-content;

  column-gap:6px;

  align-items:center;

  justify-content:start;

  min-height:20px;

  padding:0 !important;

  margin:0;

  white-space:nowrap;
}


/* ----------------------------------------------------------
   Fixed image frame
   ---------------------------------------------------------- */

.site-footer .footer-filing-icon-box{
  width:20px;
  height:20px;

  min-width:20px;
  max-width:20px;

  min-height:20px;
  max-height:20px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;
}


/*
 * Any future official icon is constrained
 * inside the frame.

 * Larger image -> proportional shrink.
 * Smaller image -> proportional fit.
 * No distortion.
 * No crop.
 * No footer reflow.
 */
.site-footer .footer-police-icon{
  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  object-position:center;

  border:0;
}


/*
 * ICP has no icon, but keeps the SAME icon column.
 * Thus the two text rows start on one vertical axis.
 */
.site-footer .footer-filing-icon-spacer{
  visibility:hidden;
}


.site-footer .footer-filing-text{
  display:block;

  min-width:0;

  line-height:20px;

  white-space:nowrap;

  text-align:left;

  color:inherit;

  text-decoration:none;
}


/* ==========================================================
   Large desktop

   Five columns:

   BRAND
   |
   controlled spacer
   |
   NAVIGATION
   |
   TRUE REMAINING BLANK SPACE / FILING
   |
   ADMIN

   The exterior brand/admin anchors remain at the same
   container edges.

   The filing column is the actual space remaining between
   navigation and admin, therefore the filing block is
   geometrically centered in that blank region.
   ========================================================== */

@media (min-width:1450px){

  .site-footer .footer-inner{

    grid-template-columns:

      auto

      clamp(
        56px,
        5vw,
        88px
      )

      max-content

      minmax(
        240px,
        1fr
      )

      auto

      !important;


    column-gap:
      12px
      !important;
  }


  .site-footer .footer-brand{
    grid-column:1;
  }


  .site-footer .footer-links{
    grid-column:3;

    justify-self:start
      !important;

    margin:0
      !important;

    min-width:0;
  }


  .site-footer .footer-filing{
    grid-column:4;

    font-size:
      clamp(
        12.5px,
        .79vw,
        13.5px
      );
  }


  .site-footer .admin-link{
    grid-column:5;
  }

}


/* ==========================================================
   Normal desktop
   ========================================================== */

@media (min-width:1200px) and (max-width:1449px){

  .site-footer .footer-inner{

    grid-template-columns:

      auto

      clamp(
        20px,
        3vw,
        42px
      )

      max-content

      minmax(
        190px,
        1fr
      )

      auto

      !important;


    column-gap:
      9px
      !important;
  }


  .site-footer .footer-brand{
    grid-column:1;
  }


  .site-footer .footer-links{
    grid-column:3;

    justify-self:start
      !important;

    margin:0
      !important;

    gap:
      clamp(
        5px,
        .55vw,
        8px
      )
      !important;
  }


  .site-footer .footer-links a{

    font-size:
      clamp(
        13.5px,
        1.12vw,
        15.5px
      )
      !important;

  }


  .site-footer .footer-filing{
    grid-column:4;

    font-size:
      clamp(
        10.5px,
        .9vw,
        12.5px
      );
  }


  .site-footer .admin-link{
    grid-column:5;
  }


  .site-footer .footer-filing-row{

    grid-template-columns:
      18px
      max-content;

    column-gap:5px;

    min-height:18px;

  }


  .site-footer .footer-filing-icon-box{

    width:18px;
    height:18px;

    min-width:18px;
    max-width:18px;

    min-height:18px;
    max-height:18px;

  }


  .site-footer .footer-filing-text{
    line-height:18px;
  }

}


/* ==========================================================
   Small desktop / landscape tablet
   ========================================================== */

@media (min-width:901px) and (max-width:1199px){

  .site-footer .footer-inner{

    grid-template-columns:

      auto

      minmax(
        0,
        1fr
      )

      clamp(
        145px,
        16vw,
        185px
      )

      auto

      !important;


    column-gap:
      5px
      !important;

  }


  .site-footer .footer-links{

    grid-column:2;

    margin:0
      !important;

    gap:
      3px
      !important;

  }


  .site-footer .footer-links a{

    font-size:
      clamp(
        11px,
        1.15vw,
        13px
      )
      !important;

    letter-spacing:
      -.045em
      !important;

  }


  .site-footer .footer-filing{

    grid-column:3;

    font-size:
      clamp(
        8.5px,
        .9vw,
        10.5px
      );

  }


  .site-footer .admin-link{
    grid-column:4;
  }


  .site-footer .footer-filing-row{

    grid-template-columns:
      14px
      max-content;

    column-gap:3px;

    min-height:15px;

  }


  .site-footer .footer-filing-icon-box{

    width:14px;
    height:14px;

    min-width:14px;
    max-width:14px;

    min-height:14px;
    max-height:14px;

  }


  .site-footer .footer-filing-text{
    line-height:15px;
  }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:900px){

  .site-footer .footer-filing{
    transform:none
      !important;
  }

}


@media (max-width:700px){

  .site-footer .footer-inner{

    grid-template-columns:

      auto

      minmax(
        0,
        1fr
      )

      auto

      !important;


    gap:
      8px
      !important;

  }


  .site-footer .footer-filing{

    grid-column:2;

    font-size:
      clamp(
        8.5px,
        2.15vw,
        10px
      );

  }


  .site-footer .footer-filing-row{

    grid-template-columns:
      13px
      max-content;

    column-gap:3px;

    min-height:14px;

  }


  .site-footer .footer-filing-icon-box{

    width:13px;
    height:13px;

    min-width:13px;
    max-width:13px;

    min-height:13px;
    max-height:13px;

  }


  .site-footer .footer-filing-text{
    line-height:14px;
  }

}


/* ===== END V21 Public Footer Filing FINAL R3 ===== */


/* ==========================================================
   V22 — Real filing links
   ========================================================== */

.site-footer a.footer-filing-row{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.site-footer a.footer-filing-row:visited{
  color:inherit;
}

.site-footer a.footer-filing-row:hover{
  color:#334744;
  text-decoration:none;
}

.site-footer a.footer-filing-row:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:3px;
}

/* ===== END V22 Real filing links ===== */