:root {
  --paper: #fbfbf8;
  --paper-deep: #f1f1eb;
  --ink: #101010;
  --muted: #72726d;
  --line: #d9d9d1;
  --blue: #315efb;
  --wistia-mint: #41d0a3;
  --section-accent: #6af3c4;
  --interaction-hover-text: var(--section-accent);
  --wistia-menu-hover: #f5f6ff;
  --wistia-menu-blue: #2a49e5;
  --wistia-menu-text: #222e67;
  --wistia-menu-muted: #a1a3aa;
  --wistia-menu-line: #ccd5ff;
  --lime: #cbff53;
  --dark: #101113;
  --shell: min(1240px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.section-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; background: var(--ink); color: white; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header { min-height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.4vw; border-bottom: 1px solid var(--line); background: rgba(251,251,248,.95); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 3px; width: fit-content; font-size: 26px; font-weight: 850; letter-spacing: -2px; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.site-nav a { position: relative; padding: 33px 0 29px; color: #484844; }
.site-nav a::after { content: ""; position: absolute; height: 2px; bottom: 0; left: 0; width: 0; background: var(--ink); transition: width .2s; }
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }
.site-nav .active { color: var(--ink); }
.header-action { justify-self: end; font-size: 14px; font-weight: 650; }
.header-action span { color: var(--blue); font-size: 19px; margin-left: 4px; }
.menu-button { display: none; }

.hero { padding: 74px 0 80px; }
.hero-topline, .section-heading, .library-topline, .library-tools { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 1.5px; text-transform: uppercase; }
.hero-note { margin: 0; color: var(--muted); font-size: 13px; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { max-width: 1020px; margin: 54px 0 64px; font-size: clamp(48px, 6.2vw, 94px); line-height: .99; letter-spacing: -.075em; font-weight: 760; }
h2 { margin: 10px 0 0; font-size: clamp(31px, 4vw, 55px); line-height: 1.04; letter-spacing: -.06em; font-weight: 720; }

.featured-story { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .82fr); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
.featured-art { min-height: 422px; position: relative; overflow: hidden; }
.art-terminal { background: linear-gradient(140deg,#111421 2%,#263ffc 45%,#94a4ff 100%); color: #fff; }
.art-label { position: absolute; top: 24px; left: 25px; padding: 7px 10px; color: var(--ink); background: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.terminal-window { position: absolute; width: 56%; height: 48%; bottom: 43px; left: 12%; padding: 47px 31px 25px; background: rgba(5,7,15,.82); border: 1px solid rgba(255,255,255,.38); box-shadow: 28px 27px 0 rgba(0,0,0,.17); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal-window span { position: absolute; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #f6d75d; }
.terminal-window span:nth-child(1) { left: 18px; background:#ff776d; }.terminal-window span:nth-child(2) { left: 32px; }.terminal-window span:nth-child(3) { left:46px; background:#85e478; }
.terminal-window p { margin: 0; font-size: clamp(14px, 1.5vw, 20px); }.terminal-window b { color: var(--lime); animation: blink 1s steps(1) infinite; }
.grid-orb { position:absolute; width: 260px; height:260px; border: 1px solid rgba(255,255,255,.58); border-radius:50%; right: -25px; top: -48px; box-shadow: inset 0 0 0 36px rgba(161,178,255,.15), inset 0 0 0 72px rgba(161,178,255,.12); }
@keyframes blink { 50% { opacity: 0; } }
.featured-copy { display: flex; flex-direction: column; justify-content: center; padding: 42px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; letter-spacing: .5px; }.story-meta span + span::before { content: "/"; margin-right: 12px; color: #bbb; }
.story-category, .resource-type { margin: 36px 0 12px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .8px; }
.featured-copy h2 { font-size: clamp(30px, 3vw, 47px); }.story-intro { margin: 22px 0 29px; color: #5c5c57; font-size: 15px; line-height: 1.7; }
.text-link { display: inline-flex; gap: 8px; align-items: center; width: fit-content; font-size: 14px; font-weight: 750; }.text-link span { color: var(--blue); font-size: 18px; }.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }

.signals { display:grid; grid-template-columns: repeat(4,1fr); padding: 32px 0 98px; border-bottom: 1px solid var(--line); }.signals div { display:flex; flex-direction:column; gap:7px; padding-left: 24px; border-left: 1px solid var(--line); }.signals div:first-child { padding-left:0; border:0; }.signals strong { font-size: 30px; letter-spacing: -.05em; }.signals span { color:var(--muted); font-size: 12px; }
.latest, .paths, .membership { padding: 97px 0; }.section-heading { padding-bottom: 42px; }.section-aside { max-width: 240px; margin: 10px 0 0; color:var(--muted); font-size: 14px; line-height: 1.6; }
.latest-grid { display:grid; grid-template-columns: 1.28fr .86fr .86fr; border-top: 1px solid var(--ink); }.editorial-card { min-height: 450px; display:flex; flex-direction:column; border-right: 1px solid var(--line); }.editorial-card:last-child { border-right:0; }.card-art { position:relative; height: 235px; overflow:hidden; }.card-copy { padding: 23px 23px 28px; }.card-copy .story-category { margin:0 0 13px; }.card-copy h3 { margin:0; font-size: 23px; line-height:1.22; letter-spacing:-.04em; }.card-copy > p:last-child { margin: 18px 0 0; color:var(--muted); font-size:12px; }
.art-blueprint { background:#d6ff67; }.art-blueprint span { position:absolute; top:20px; left:22px; font-size: 68px; font-weight:800; letter-spacing:-.08em; }.art-blueprint i { position:absolute; border: 1px solid var(--ink); transform: rotate(-17deg); }.art-blueprint i:nth-of-type(1) { width:62%; height:45%; right:8%; top:25%; }.art-blueprint i:nth-of-type(2) { width:43%; height:34%; right:22%; bottom:5%; }.art-blueprint i:nth-of-type(3) { width:34px; height:34px; border-radius: 50%; right:9%; bottom:12%; background:var(--ink); }
.art-signal { background:#17181d; color:white; }.art-signal span { position:absolute; z-index:1; left:26px; bottom:21px; font-size:65px; font-weight:850; letter-spacing:-.09em; }.art-signal i { position:absolute; left:0; bottom:0; height:100%; width:100%; border-top:1px solid #686b7f; transform: skewY(-23deg) translateY(68%); }.art-signal i:nth-of-type(2) { transform: skewY(-23deg) translateY(35%); }.art-signal i:nth-of-type(3) { transform: skewY(-23deg) translateY(2%); }
.art-orbit { background:#ff745f; }.art-orbit span { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); font-size:80px; font-weight:600; }.art-orbit i { position:absolute; left:50%; top:50%; width:180px; height:70px; transform:translate(-50%,-50%) rotate(24deg); border:1px solid var(--ink); border-radius:50%; }.art-orbit i:nth-of-type(2) { transform:translate(-50%,-50%) rotate(-45deg); }

.paths { border-top: 1px solid var(--line); }.path-list { border-top: 1px solid var(--ink); }.path-row { display:grid; grid-template-columns: 100px 1fr 200px 30px; align-items:center; gap:20px; min-height:104px; border-bottom: 1px solid var(--line); transition: padding .2s, background .2s; }.path-row:hover { padding-inline:20px; background:var(--paper-deep); }.path-number { color:var(--muted); font-size:13px; }.path-name { font-size: 26px; letter-spacing:-.05em; font-weight:700; }.path-detail { color:var(--muted); font-size:13px; }.path-arrow { color:var(--blue); font-size:23px; }

.library { padding: 94px 0 100px; background:var(--dark); color:#fff; }.library-topline { align-items:end; }.library h2 { color:white; }.search-field { display:flex; align-items:center; gap:10px; width:min(360px,100%); padding: 13px 0; border-bottom:1px solid #828284; }.search-field svg { flex:0 0 20px; width:20px; height:20px; fill:none; stroke:#cfcfce; stroke-width:1.5; }.search-field input { width:100%; border:0; outline:0; background:transparent; color:white; font-size:14px; }.search-field input::placeholder { color:#989896; }.library-tools { align-items:center; margin:47px 0 27px; }.filter-group { display:flex; flex-wrap:wrap; gap:8px; }.filter-button { border:1px solid #55565a; padding:9px 13px; color:#f4f4ef; background:transparent; font-size:12px; }.filter-button:hover, .filter-button.is-selected { background:var(--lime); border-color:var(--lime); color:var(--ink); }.library-tools > p { margin:0; color:#aaa; font-size:12px; }
.library-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #797a7c; }.resource-card { min-height:390px; padding:0 19px 29px; border-right:1px solid #55565a; border-bottom:1px solid #55565a; }.resource-card:nth-child(3n) { border-right:0; }.resource-card[hidden] { display:none; }.resource-art { height:190px; margin:0 -19px 23px; position:relative; overflow:hidden; }.resource-type { margin:0 0 12px; color:var(--lime); }.resource-card h3 { margin:0; max-width:310px; font-size:22px; line-height:1.22; letter-spacing:-.04em; }.resource-meta { margin:20px 0 0; color:#aaa; font-size:12px; }.play { position:absolute; z-index:3; bottom:17px; left:18px; display:grid; place-items:center; width:42px; height:42px; padding-left:3px; background:var(--lime); color:var(--ink); font-size:13px; }.art-video-one { background:linear-gradient(135deg,#4d38ff,#bf6cff); }.art-video-one::before { content:""; position:absolute; width:160px; height:160px; border:1px solid white; border-radius:50%; top:15px; right:17%; box-shadow:0 0 0 24px rgba(255,255,255,.14),0 0 0 48px rgba(255,255,255,.1); }.art-video-one b { position:absolute; right:17px; bottom:-13px; font-size:90px; letter-spacing:-.1em; color:rgba(255,255,255,.23); }.art-article-two { display:grid; place-items:center; background:#e2ded4; color:#171717; }.art-article-two span { font-size:36px; font-weight:780; letter-spacing:-.07em; line-height:.9; }.art-guide-three { background:#154c9d; }.art-guide-three span { position:absolute; left:19px; bottom:21px; font-size:46px; font-weight:800; letter-spacing:-.09em; }.art-guide-three i { position:absolute; width:220px; height:220px; border:1px solid #7ca4e8; border-radius:50%; right:-34px; top:-63px; box-shadow:inset 0 0 0 32px #265ca9; }.art-video-four { background:#f06c49; }.art-video-four::after { content:""; position:absolute; width:200%; height:1px; left:-30%; top:50%; transform:rotate(-20deg); background:#41120b; box-shadow:0 -28px 0 rgba(65,18,11,.4), 0 28px 0 rgba(65,18,11,.4); }.art-video-four b { position:absolute; z-index:2; right:17px; top:19px; color:#42170e; font-size:32px; letter-spacing:-.07em; }.art-article-five { display:grid; place-items:center; background:#e8ff9a; color:#171717; }.art-article-five span { font-size:31px; line-height:.92; letter-spacing:-.07em; font-weight:780; }.art-guide-six { background:#e6e6df; color:#161616; }.art-guide-six span { position:absolute; z-index:2; left:18px; top:19px; font-size:29px; line-height:.84; letter-spacing:-.07em; font-weight:800; }.art-guide-six i { position:absolute; width:148px; height:148px; border-radius:50%; right:10%; bottom:-52px; border:16px solid #315efb; box-shadow: 0 0 0 16px #111; }.empty-state { margin:32px 0 0; color:#bbb; }

.membership { display:grid; grid-template-columns: 1.1fr .9fr; gap: 9%; }.membership-copy > p:not(.eyebrow) { max-width:530px; margin:27px 0 33px; color:#5b5b56; line-height:1.75; font-size:15px; }.button-dark, .button-light { display:inline-flex; align-items:center; gap:9px; padding:15px 18px; font-size:14px; font-weight:750; }.button-dark { background:var(--ink); color:white; }.button-dark span, .button-light span { color:var(--lime); font-size:18px; }.benefits-list { border-top:1px solid var(--ink); }.benefits-list > div { display:grid; grid-template-columns: 42px 1fr; column-gap:15px; padding:25px 0; border-bottom:1px solid var(--line); }.benefits-list span { color:var(--muted); font-size:12px; }.benefits-list strong { font-size:19px; letter-spacing:-.04em; }.benefits-list p { grid-column:2; margin:8px 0 0; color:var(--muted); font-size:13px; }
.consult { padding: 105px 0 110px; background:var(--blue); color:white; }.consult-inner h2 { max-width:780px; color:white; }.consult-inner > p:not(.eyebrow) { max-width:475px; margin:29px 0 35px; color:#d8e1ff; font-size:16px; line-height:1.7; }.consult .eyebrow { color:#c5d2ff; }.button-light { background:white; color:var(--ink); }.button-light span { color:var(--blue); }
.site-footer { display:grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap:24px; padding:38px 0 24px; }.site-footer p { margin:8px 0; color:var(--muted); font-size:13px; }.site-footer > div { display:flex; justify-content:flex-end; gap:20px; font-size:13px; }.site-footer > div a:hover { text-decoration:underline; }.site-footer small { grid-column:1 / -1; padding-top:32px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }

@media (max-width: 820px) {
  :root { --shell: min(100% - 40px, 640px); }
  .site-header { grid-template-columns:1fr auto; min-height:68px; padding:0 20px; }.site-nav { display:none; grid-column:1 / -1; grid-row:2; padding-bottom:17px; justify-content:space-between; gap:12px; overflow:auto; }.site-nav.is-open { display:flex; }.site-nav a { padding:8px 0; white-space:nowrap; }.site-nav a::after { display:none; }.header-action { display:none; }.menu-button { display:block; border:0; background:transparent; font-size:13px; font-weight:700; }.brand { font-size:24px; }
  .hero { padding:45px 0 55px; }.hero-topline { align-items:center; }.hero-note { text-align:right; font-size:11px; } h1 { margin:39px 0 47px; font-size:clamp(44px, 12vw, 64px); }.featured-story { grid-template-columns:1fr; }.featured-art { min-height:290px; }.featured-copy { padding:28px 0 8px; }.terminal-window { width:67%; bottom:30px; }.story-category { margin-top:25px; }.featured-copy h2 { font-size:34px; }.story-intro { font-size:14px; }
  .signals { grid-template-columns:repeat(2,1fr); padding:28px 0 60px; gap:25px 0; }.signals div:nth-child(3) { padding-left:0; border:0; }.signals strong { font-size:27px; }
  .latest, .paths, .membership { padding:62px 0; }.section-heading, .library-topline { flex-direction:column; gap:17px; padding-bottom:30px; }.section-heading .text-link { display:none; }.section-aside { margin:0; }.latest-grid { grid-template-columns:1fr; }.editorial-card { min-height:0; border-right:0; border-bottom:1px solid var(--line); }.card-art { height:210px; }.card-copy h3 { font-size:22px; }
  .path-row { grid-template-columns:43px 1fr 24px; min-height:86px; gap:11px; }.path-name { font-size:20px; }.path-detail { display:none; }
  .library { padding:62px 0; }.library-topline { align-items:stretch; }.search-field { width:100%; }.library-tools { align-items:start; flex-direction:column; margin:30px 0 23px; }.library-grid { grid-template-columns:1fr; }.resource-card { min-height:0; border-right:0; }.resource-art { height:210px; }.resource-card h3 { font-size:21px; }
  .membership { grid-template-columns:1fr; gap:47px; }.membership-copy h2 { font-size:39px; }.consult { padding:72px 0; }.site-footer { grid-template-columns:1fr; gap:15px; }.site-footer > div { justify-content:flex-start; }.site-footer small { padding-top:25px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* 二级页面与教程中心下拉菜单 */
.site-header { grid-template-columns: 1fr auto; }
.site-nav { justify-self:end; gap:0; }
.site-nav > a, .nav-dropdown-trigger { position:relative; display:block; padding:33px 15px 29px; color:#242528; border:0; background:transparent; font-size:16px; font-weight:500; line-height:22.4px; transition:color 160ms linear; }
.site-nav > a::after, .nav-dropdown-trigger::after { content:""; position:absolute; height:2px; bottom:0; left:15px; right:15px; width:auto; background:var(--ink); transform:scaleX(0); transition:transform .2s; }
.site-nav > a:hover::after, .site-nav > a.active::after, .nav-dropdown-trigger:hover::after, .nav-dropdown-trigger.active::after, .nav-dropdown.is-open .nav-dropdown-trigger::after { transform:scaleX(1); }
.nav-dropdown { position:relative; }.nav-dropdown-trigger { cursor:pointer; }.nav-dropdown-trigger:hover,.nav-dropdown-trigger:focus-visible { color:#2a49e5; }.nav-dropdown-trigger span { display:inline-block; margin-left:4px; color:currentColor; transition:transform 160ms linear; }.nav-dropdown.is-open .nav-dropdown-trigger span { transform:rotate(180deg); }
.tutorials-mega { position:fixed; z-index:40; top:84px; left:50%; display:grid; grid-template-columns:1.08fr .78fr .78fr 1.28fr; width:min(1130px,calc(100vw - 64px)); min-height:334px; transform:translate(-50%,-10px); padding:39px; border:1px solid var(--line); background:#fff; box-shadow:0 20px 48px rgba(20,20,20,.14); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,transform .18s,visibility .18s; }.nav-dropdown.is-open .tutorials-mega { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }.mega-intro { padding-right:31px; }.mega-title { margin:0 0 16px; color:var(--blue); font-size:30px; letter-spacing:-.06em; }.mega-intro > p:not(.mega-title) { margin:0; color:#666661; font-size:14px; line-height:1.65; }.mega-button { display:inline-flex; gap:8px; align-items:center; margin-top:27px; padding:11px 14px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; }.mega-button span { color:var(--lime); font-size:17px; }.mega-links { display:flex; flex-direction:column; gap:15px; padding-left:28px; border-left:1px solid var(--line); }.mega-links p { margin:0 0 5px; color:#969691; font-size:11px; font-weight:750; letter-spacing:1px; }.mega-links a { width:fit-content; color:#393935; font-size:14px; }.mega-links a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }.mega-feature { display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; margin-left:26px; padding:12px; border:1px solid var(--line); }.mega-feature > div { position:relative; min-height:174px; overflow:hidden; padding:13px; background:linear-gradient(145deg,#2027a7,#6d94ff); color:#fff; }.mega-feature > div::after { content:""; position:absolute; right:-48px; bottom:-61px; width:175px; height:175px; border:1px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:inset 0 0 0 25px rgba(255,255,255,.12); }.mega-feature span { position:relative; z-index:1; display:block; color:var(--lime); font-size:10px; font-weight:700; }.mega-feature b { position:absolute; z-index:1; bottom:12px; left:13px; font-size:25px; line-height:.84; letter-spacing:-.08em; }.mega-feature p { margin:0; }.mega-feature strong { display:block; font-size:17px; line-height:1.2; letter-spacing:-.04em; }.mega-feature small { display:block; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.45; }.header-action { display:none; }
.site-nav .mega-button { color:#fff; }

.page-hero { padding:76px 0 62px; border-bottom:1px solid var(--ink); }.page-hero-row { display:grid; grid-template-columns:1.5fr .5fr; gap:7%; align-items:end; }.page-hero h1 { margin:39px 0 0; font-size:clamp(48px,5.8vw,80px); }.page-hero-row > p { max-width:300px; margin:0 0 7px; color:var(--muted); font-size:15px; line-height:1.7; }
.content-index { padding:33px 0 96px; }.index-tools { margin:0; padding-bottom:18px; border-bottom:1px solid var(--line); }.index-search { border-color:var(--ink); }.index-search input { color:var(--ink); }.index-search svg { stroke:var(--ink); }.index-search input::placeholder { color:#777; }.index-count { margin:22px 0 26px; color:var(--muted); font-size:12px; }.index-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.index-card { min-height:390px; padding:0 19px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.index-art { position:relative; overflow:hidden; }.index-card:nth-child(3n) { border-right:0; }.index-card:hover h3, .index-card:hover h2 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }.index-card.is-featured { grid-column:span 2; display:grid; grid-template-columns:1.2fr .8fr; gap:0; padding:0; }.index-card.is-featured .index-art { min-height:300px; }.index-card.is-featured > div:last-child { display:flex; flex-direction:column; justify-content:center; padding:27px; }.index-card.is-featured h2 { margin:0; font-size:31px; line-height:1.14; letter-spacing:-.055em; }.index-card[hidden] { display:none; }.index-empty { color:var(--muted); }

/* 参考 Wistia Learn 的内容编辑卡：同权重封面、标题与摘要；本站不展示作者 */
.index-grid { gap:54px 36px; border:0; }.index-card { display:flex; flex-direction:column; min-height:0; padding:0; border:0; }.index-card:nth-child(3n) { border:0; }.index-card .index-art { aspect-ratio:1.62 / 1; min-height:0; margin:0 0 23px; border-radius:3px; }.index-card .art-terminal { background:linear-gradient(140deg,#111421 2%,#263ffc 45%,#94a4ff 100%); }.index-card .terminal-window { width:58%; height:54%; bottom:14%; left:12%; }.index-card .art-label { top:18px; left:18px; }.index-card h3 { margin:0; max-width:420px; font-size:clamp(22px,2vw,31px); line-height:1.2; letter-spacing:-.055em; }.index-card .card-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-width:420px; margin:18px 0 23px; color:#74746e; font-size:16px; line-height:1.52; }.index-card .card-author { display:flex; align-items:center; gap:8px; margin:auto 0 0; color:#44443f; font-size:14px; font-weight:650; }.index-card .card-author small { margin-left:2px; color:#92928b; font-size:11px; font-weight:500; }.author-mark { display:grid; flex:0 0 28px; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; font-size:12px; font-weight:800; }.mark-blue { background:#315efb; }.mark-purple { background:#7d54d7; }.mark-ink { background:#22232a; }.mark-orange { background:#f06c49; }.mark-lime { background:#88a90d; color:#202900; }.index-card:hover .index-art { transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,20,20,.1); }.index-card .index-art { transition:transform .2s,box-shadow .2s; }.index-card:hover h3 { text-decoration:none; color:var(--blue); }.index-card.is-featured { display:flex; grid-column:auto; padding:0; }.index-card.is-featured .index-art { min-height:0; }.index-card.is-featured > div:last-child { display:initial; padding:0; }.index-card.is-featured h2 { font-size:inherit; }

.topic-list { padding:36px 0 96px; }.topic-card { display:grid; grid-template-columns:1fr 1fr; min-height:374px; border-top:1px solid var(--ink); color:var(--ink); }.topic-card:last-child { border-bottom:1px solid var(--ink); }.topic-card > div:first-child { padding:42px 7% 39px 0; }.topic-card h2 { margin:15px 0 18px; font-size:clamp(35px,4vw,59px); }.topic-card > div:first-child > p:not(.eyebrow) { max-width:380px; color:var(--muted); font-size:15px; line-height:1.7; }.topic-card .text-link { margin-top:20px; }.topic-card .text-link b { color:var(--blue); font-size:18px; }.topic-visual { position:relative; overflow:hidden; margin:24px 0 24px 7%; }.topic-visual span { position:absolute; z-index:2; left:29px; bottom:28px; color:#fff; font-size:clamp(30px,3vw,49px); line-height:.82; letter-spacing:-.08em; font-weight:800; }.topic-workbench .topic-visual { background:linear-gradient(140deg,#272fcb,#96a3ff); }.topic-workbench .topic-visual i { position:absolute; width:240px; height:240px; border:1px solid rgba(255,255,255,.6); border-radius:50%; right:-55px; top:-56px; box-shadow:inset 0 0 0 30px rgba(255,255,255,.13); }.topic-workbench .topic-visual i:nth-of-type(2) { width:170px; height:100px; border-radius:0; bottom:-20px; left:24%; top:auto; }.topic-ai .topic-visual { background:#15171c; }.topic-ai .topic-visual span { color:var(--lime); }.topic-ai .topic-visual i { position:absolute; width:275px; height:275px; border:1px solid #5c5f72; border-radius:50%; right:-30px; top:25px; box-shadow:inset 0 0 0 35px #20232b,inset 0 0 0 70px #15171c; }.topic-ai .topic-visual i:nth-of-type(2) { width:160px; height:160px; top:85px; right:27%; border-color:var(--lime); }.topic-site .topic-visual { background:#d2ff6d; }.topic-site .topic-visual span { color:var(--ink); }.topic-site .topic-visual i { position:absolute; width:255px; height:175px; right:-20px; top:34px; border:1px solid var(--ink); transform:rotate(-16deg); box-shadow:-29px 37px 0 rgba(20,20,20,.13); }.topic-safety .topic-visual { background:#ff755d; }.topic-safety .topic-visual i { position:absolute; width:240px; height:240px; border:16px solid #161616; border-radius:50%; right:14%; top:60px; box-shadow:0 0 0 16px #315efb; }

.path-hero { padding:35px 0 76px; }.crumb { margin:0; color:var(--muted); font-size:12px; }.crumb a:hover { color:var(--blue); }.crumb span { margin:0 8px; color:#aaa; }.path-hero-grid { display:grid; grid-template-columns:1fr .88fr; gap:8%; align-items:end; margin-top:45px; }.path-hero h1 { margin:14px 0 23px; }.path-hero-grid > div:first-child > p:not(.eyebrow) { max-width:440px; margin:0 0 30px; color:var(--muted); font-size:16px; line-height:1.7; }.path-cover { position:relative; min-height:410px; overflow:hidden; background:linear-gradient(145deg,#1421ad,#7592ff); color:white; }.path-cover span { position:absolute; z-index:2; left:37px; bottom:32px; font-size:clamp(47px,5vw,74px); font-weight:800; line-height:.79; letter-spacing:-.09em; }.path-cover i { position:absolute; width:315px; height:315px; right:-88px; top:-78px; border:1px solid rgba(255,255,255,.8); border-radius:50%; box-shadow:inset 0 0 0 43px rgba(255,255,255,.14),inset 0 0 0 86px rgba(255,255,255,.1); }.path-cover i:nth-of-type(2) { width:230px; height:144px; right:27%; top:auto; bottom:-49px; border-radius:0; transform:rotate(-23deg); }.path-cover b { position:absolute; right:25px; bottom:15px; color:var(--lime); font-size:17px; }.path-outline { display:grid; grid-template-columns:.63fr 1.37fr; gap:10%; padding:90px 0 102px; border-top:1px solid var(--ink); }.outline-intro > p:not(.eyebrow) { max-width:270px; color:var(--muted); font-size:14px; line-height:1.7; }.lesson-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }.lesson-list li { display:grid; grid-template-columns:45px 1fr auto; gap:15px; align-items:start; padding:21px 0; border-bottom:1px solid var(--line); }.lesson-list li > span,.lesson-list li > b { color:var(--muted); font-size:12px; font-weight:500; }.lesson-list p { margin:0 0 6px; color:var(--blue); font-size:11px; font-weight:700; }.lesson-list h3 { margin:0; font-size:20px; letter-spacing:-.035em; }.lesson-list small { display:block; margin-top:8px; color:var(--muted); font-size:11px; }.path-cta { padding:82px 0; background:var(--dark); color:white; }.path-cta h2 { color:white; }.path-cta p:not(.eyebrow) { max-width:480px; color:#bbb; line-height:1.7; }.path-cta .eyebrow { color:var(--lime); }

.article-shell { padding:36px 0 98px; }.article-header { max-width:870px; padding:0 0 55px; }.article-header .eyebrow { margin-top:43px; }.article-header h1 { margin:16px 0 23px; font-size:clamp(43px,5.5vw,79px); }.article-lead { max-width:650px; margin:0; color:var(--muted); font-size:19px; line-height:1.65; }.article-meta { display:flex; flex-wrap:wrap; gap:15px; margin-top:31px; color:var(--muted); font-size:12px; }.article-meta span + span::before { content:"/"; margin-right:15px; color:#aaa; }.video-stage { margin-bottom:82px; }.video-stage > p { margin:12px 0 0; color:var(--muted); font-size:11px; }.video-screen { position:relative; min-height:560px; overflow:hidden; padding:28px; background:radial-gradient(circle at 70% 34%,#899eff 0 4%,transparent 4.2%),radial-gradient(circle at 70% 34%,rgba(150,169,255,.65) 0 16%,transparent 16.3%),linear-gradient(145deg,#11142b 2%,#1e34e6 56%,#7d98ff); color:white; }.video-screen::before { content:""; position:absolute; width:630px; height:250px; bottom:-80px; left:5%; border:1px solid rgba(255,255,255,.4); transform:rotate(-20deg); }.video-screen span { color:var(--lime); font-size:11px; font-weight:700; letter-spacing:1px; }.video-screen strong { position:absolute; z-index:2; left:8%; bottom:12%; font-size:clamp(50px,7vw,98px); line-height:.78; letter-spacing:-.09em; }.video-screen i { position:absolute; right:9%; bottom:14%; width:32%; height:42%; background:rgba(9,12,33,.83); border:1px solid rgba(255,255,255,.45); box-shadow:-22px 21px 0 rgba(8,10,31,.19); }.video-screen button { position:absolute; z-index:3; left:50%; top:50%; width:72px; height:72px; border:0; transform:translate(-50%,-50%); background:var(--lime); color:var(--ink); font-size:21px; }.article-layout { display:grid; grid-template-columns:200px minmax(0,650px); gap:11%; max-width:1040px; }.article-aside { position:sticky; top:120px; align-self:start; display:flex; flex-direction:column; gap:12px; }.article-aside p { margin:0 0 5px; color:var(--muted); font-size:11px; font-weight:700; }.article-aside a { color:#555550; font-size:12px; line-height:1.5; }.article-aside a:hover { color:var(--blue); }.article-copy { font-size:17px; line-height:1.84; }.article-copy > p:first-child { margin-top:0; font-size:21px; line-height:1.7; }.article-copy h2 { margin:55px 0 15px; font-size:34px; }.article-copy blockquote { margin:33px 0; padding:21px 25px; border-left:3px solid var(--blue); background:var(--paper-deep); font-size:20px; line-height:1.55; }.article-copy ul { padding-left:21px; }.article-copy li { margin:10px 0; }.article-copy .button-dark { margin-top:28px; }.related { padding:42px 0 96px; }.related > div { display:grid; grid-template-columns:repeat(2,1fr); margin-top:20px; border-top:1px solid var(--ink); }.related a { display:flex; align-items:center; justify-content:space-between; padding:23px 0; border-bottom:1px solid var(--line); font-size:21px; letter-spacing:-.04em; }.related a:first-child { margin-right:30px; }.related a span { color:var(--blue); }

.service-hero { padding:78px 0 65px; background:var(--dark); color:white; }.service-hero .eyebrow { color:var(--lime); }.service-hero-grid { display:grid; grid-template-columns:1.45fr .55fr; gap:7%; align-items:end; }.service-hero h1 { margin:38px 0 0; color:white; font-size:clamp(50px,5vw,72px); }.service-hero p:not(.eyebrow) { margin:0 0 8px; color:#bfc0c1; line-height:1.7; }.service-options { padding:88px 0 80px; }.service-options > h2 { max-width:580px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px; border-top:1px solid var(--ink); }.service-grid > div { min-height:300px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.service-grid > div:last-child { border-right:0; }.service-grid span { color:var(--muted); font-size:12px; }.service-grid h3 { margin:50px 0 12px; font-size:25px; letter-spacing:-.05em; }.service-grid p { color:var(--muted); font-size:14px; line-height:1.65; }.consult-panel { display:grid; grid-template-columns:1.1fr .9fr; gap:9%; margin-bottom:100px; padding:55px; background:#d6ff67; }.consult-panel h2 { margin-top:10px; }.consult-panel > p { color:#444; line-height:1.7; }.consult-panel > div { display:flex; flex-direction:column; justify-content:end; align-items:start; }.consult-panel small { margin-top:14px; color:#555; font-size:11px; }

@media (max-width:820px) {
  .site-header { grid-template-columns:1fr auto; }.site-nav { justify-self:stretch; width:100%; }.site-nav.is-open { display:block; }.site-nav > a, .nav-dropdown-trigger { padding:12px 0; width:100%; text-align:left; }.site-nav > a::after, .nav-dropdown-trigger::after { display:none; }.tutorials-mega { position:static; display:none; width:auto; min-height:0; transform:none; margin:0 0 9px; padding:20px 0 0; border:0; border-top:1px solid var(--line); box-shadow:none; opacity:1; visibility:visible; }.nav-dropdown.is-open .tutorials-mega { display:grid; grid-template-columns:1fr; transform:none; }.mega-intro { padding:0 0 20px; }.mega-title { font-size:22px; }.mega-links { gap:11px; margin:0 0 17px; padding:17px 0 0; border-left:0; border-top:1px solid var(--line); }.mega-feature { display:none; }
  .page-hero { padding:48px 0 47px; }.page-hero-row { grid-template-columns:1fr; gap:20px; }.page-hero h1 { margin-top:28px; }.page-hero-row > p { margin:0; }.content-index { padding-top:22px; }.index-tools { flex-direction:column; align-items:stretch; }.index-search { width:100%; }.index-grid { grid-template-columns:1fr; }.index-card, .index-card:nth-child(3n) { border-right:0; }.index-card.is-featured { grid-column:auto; grid-template-columns:1fr; }.index-card.is-featured .index-art { min-height:250px; }.index-card.is-featured h2 { font-size:29px; }
  .topic-list { padding-top:16px; }.topic-card { grid-template-columns:1fr; }.topic-card > div:first-child { padding:35px 0 25px; }.topic-card .topic-visual { min-height:250px; margin:0 0 26px; }.topic-card h2 { font-size:41px; }
  .path-hero { padding:27px 0 55px; }.path-hero-grid { grid-template-columns:1fr; margin-top:33px; }.path-cover { min-height:300px; }.path-outline { grid-template-columns:1fr; gap:31px; padding:60px 0; }.lesson-list h3 { font-size:17px; }.lesson-list li { grid-template-columns:32px 1fr auto; gap:8px; }.path-cta { padding:60px 0; }
  .article-shell { padding-top:25px; }.article-header { padding-bottom:38px; }.article-header .eyebrow { margin-top:28px; }.article-header h1 { font-size:45px; }.article-lead { font-size:17px; }.video-stage { margin-bottom:51px; }.video-screen { min-height:350px; }.video-screen i { width:46%; height:37%; }.article-layout { grid-template-columns:1fr; gap:31px; }.article-aside { position:static; padding-bottom:20px; border-bottom:1px solid var(--line); }.article-copy { font-size:16px; }.article-copy > p:first-child { font-size:18px; }.article-copy h2 { font-size:30px; }.related { padding-bottom:60px; }.related > div { grid-template-columns:1fr; }.related a:first-child { margin:0; }.related a { font-size:18px; }
  .service-hero { padding:54px 0; }.service-hero-grid { grid-template-columns:1fr; gap:20px; }.service-hero h1 { margin-top:27px; }.service-options { padding:61px 0; }.service-grid { grid-template-columns:1fr; }.service-grid > div { min-height:0; border-right:0; }.service-grid h3 { margin-top:27px; }.consult-panel { grid-template-columns:1fr; gap:24px; margin-bottom:60px; padding:30px; }
}

/* 方案一：四个正式入口；分类文字、箭头与对应分割线共用同一前景色。 */
.tutorials-mega { grid-template-columns:repeat(4,minmax(0,1fr)); min-height:370px; }
.showcase-heading > .eyebrow + .showcase-tabs { margin-top:28px; }

.eyebrow,
.story-category,
.resource-type,
.mega-column-title,
.lesson-list p,
.popular-panel > a small,
.showcase-tabs button { color:var(--section-accent) !important; }

.text-link span,
.text-link b,
.topic-card .text-link b,
.feed-arrow,
.route-panel > a b,
.path-arrow,
.related a span,
.button-dark span,
.button-light span,
.mega-button span { color:var(--section-accent) !important; }

.showcase-primary { border-bottom-color:var(--section-accent); }
.showcase-feed,
.popular-panel { border-top:1px solid var(--section-accent) !important; }
.showcase-feed > a,
.popular-panel > a { border-bottom-color:var(--section-accent); }

.art-github { position:relative; background:#111318; color:#fff; }
.art-github::before { content:""; position:absolute; top:14%; right:9%; width:34%; aspect-ratio:1; border:1px solid rgba(106,243,196,.8); border-radius:50%; box-shadow:0 0 0 18px rgba(106,243,196,.08),0 0 0 36px rgba(106,243,196,.05); }
.art-github > span:first-child { position:absolute; z-index:1; left:8%; bottom:10%; color:var(--section-accent); font-size:clamp(26px,3vw,46px); font-weight:800; line-height:.86; letter-spacing:-.07em; }
.feed-art.art-github > span:first-child { left:16px; bottom:11px; font-size:27px; }
.art-github-light { background:#e7e4dc; color:var(--ink); }
.art-github-light > span:first-child { color:var(--ink); }
.art-github-mint { background:var(--section-accent); }
.art-github-mint > span:first-child { color:var(--ink); }
.art-github-blue { background:#263ff0; }

@media (max-width:820px) {
  .tutorials-mega { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; }
}

/* 2026-07-13：优化版成为唯一首页；数据驱动的近十天内容、阅读排行与新版页尾。 */
.recent-feed-heading { display:flex; justify-content:space-between; gap:18px; align-items:baseline; margin:0 0 14px; padding:0 4px 9px; }
.recent-feed-heading strong { font-size:18px; letter-spacing:-.025em; }
.recent-feed-heading span { color:var(--muted); font-size:12px; }
.preview-optimized .showcase-feed > a { min-height:138px; }
.recent-thumb { width:100%; height:auto !important; aspect-ratio:1.739 / 1; overflow:hidden; }
.recent-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.recent-thumb .art-label { top:10px; left:10px; padding:5px 7px; font-size:8px; }
.recent-thumb .terminal-window { bottom:12px; left:12%; width:58%; height:52%; padding:26px 13px 10px; box-shadow:9px 8px 0 rgba(0,0,0,.14); }
.recent-thumb .terminal-window span { top:9px; width:4px; height:4px; }
.recent-thumb .terminal-window span:nth-child(1) { left:9px; }
.recent-thumb .terminal-window span:nth-child(2) { left:17px; }
.recent-thumb .terminal-window span:nth-child(3) { left:25px; }
.recent-thumb .terminal-window p { font-size:8px; }
.recent-thumb .grid-orb { width:82px; height:82px; right:-12px; top:-18px; box-shadow:inset 0 0 0 11px rgba(161,178,255,.15),inset 0 0 0 23px rgba(161,178,255,.12); }
.recent-thumb.art-signal span { left:14px; bottom:10px; font-size:34px; }
.recent-thumb.art-orbit span { font-size:46px; }
.recent-thumb.art-orbit i { width:104px; height:40px; }
.recent-thumb.art-guide-three span { left:12px; bottom:11px; font-size:28px; }
.recent-thumb.art-guide-three i { width:104px; height:104px; right:-20px; top:-32px; box-shadow:inset 0 0 0 15px #265ca9; }
.recent-thumb.art-video-four b { top:11px; right:10px; font-size:24px; }
.recent-thumb.art-article-five span,.recent-thumb.art-article-two span { font-size:23px; }
.recent-thumb.art-guide-six span { left:11px; top:11px; font-size:20px; }
.recent-thumb.art-guide-six i { width:78px; height:78px; right:7%; bottom:-33px; border-width:8px; box-shadow:0 0 0 8px #111; }
.recent-thumb.art-github > span:first-child { left:7%; bottom:9%; font-size:22px; }
.popular-list { display:grid; gap:8px; }
.popular-list > a { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; min-height:76px; padding:12px; border-radius:14px; background:#fff; }
.popular-list > a > span { color:var(--muted); font-size:11px; }
.popular-list strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:15px; line-height:1.3; }
.popular-list small { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; }
.popular-list > a:hover strong,.popular-list > a:focus-visible strong { color:var(--interaction-hover-text); }
.preview-optimized .popular-panel { position:sticky; top:84px; }
.preview-optimized .home-membership { color:#fff; background:#111315; }
.home-membership .eyebrow { color:var(--section-accent); }
.home-membership .membership-copy > p:not(.eyebrow) { color:#bdbfb9; }
.home-membership .benefits-list > div { background:#1d1f21; }
.home-membership .benefits-list span { color:var(--section-accent); }
.home-membership .benefits-list strong { color:#fff; }
.home-membership .benefits-list p { color:#9fa19c; }
.home-membership .button-dark { background:#fff !important; color:var(--ink); }
.home-membership .button-dark:hover,.home-membership .button-dark:focus-visible { background:#fff !important; color:var(--interaction-hover-text) !important; }
.home-membership .button-dark span { color:#188d68; }

.site-footer--redesigned { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(480px,1.15fr); gap:64px; margin-bottom:28px; padding:48px 52px 28px; border:0; border-radius:22px; background:#ecece6; }
.site-footer--redesigned > div { display:block; }
.site-footer--redesigned .footer-brand-block p { max-width:430px; margin:20px 0 0; color:#565650; font-size:14px; line-height:1.75; }
.footer-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.footer-directory > div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-directory strong { margin-bottom:3px; color:#8b8b84; font-size:11px; letter-spacing:.12em; }
.footer-directory a { color:#272724; font-size:13px; }
.footer-directory a:hover,.footer-directory a:focus-visible { color:var(--interaction-hover-text); }
.site-footer--redesigned .footer-bottom { grid-column:1 / -1; display:flex; align-items:center; gap:22px; margin-top:4px; padding-top:26px; color:#777770; font-size:11px; }
.site-footer--redesigned .footer-bottom small { grid-column:auto; margin:0 auto 0 0; padding:0; border:0; color:inherit; font-size:11px; }

/* 会员服务页：问题优先、流程清楚、适用对象与边界公开。 */
.membership-page { background:#f7f7f3; }
.member-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); gap:8%; padding-top:92px; padding-bottom:90px; }
.member-hero-copy h1 { max-width:790px; margin:30px 0 28px; font-size:clamp(54px,5.6vw,82px); line-height:1.02; letter-spacing:-.07em; }
.member-hero-copy > p:not(.eyebrow) { max-width:650px; margin:0; color:#595953; font-size:17px; line-height:1.8; }
.member-actions { display:flex; align-items:center; gap:24px; margin-top:34px; }
.member-text-link { color:#51514c; font-size:13px; font-weight:650; }
.member-text-link:hover,.member-text-link:focus-visible { color:var(--interaction-hover-text); }
.member-promise-card { align-self:end; padding:34px; border-radius:20px; background:#e9e9e3; }
.member-promise-card > p { margin:0; color:#5d5d57; font-size:12px; font-weight:650; }
.member-promise-card h2 { margin:22px 0 34px; font-size:43px; line-height:1.02; }
.member-promise-card ol { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.member-promise-card li { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; min-height:58px; padding:11px 13px; border-radius:12px; background:#fff; font-size:13px; font-weight:650; }
.member-promise-card li span { color:#8a8a83; font-size:10px; }
.member-principles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding-bottom:108px; }
.member-principles div { min-height:116px; padding:22px; border-radius:14px; background:#fff; }
.member-principles strong,.member-principles span { display:block; }
.member-principles strong { font-size:16px; }
.member-principles span { margin-top:11px; color:var(--muted); font-size:12px; line-height:1.55; }
.member-benefits { padding-top:102px; padding-bottom:116px; }
.member-section-heading { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:9%; align-items:end; }
.member-section-heading h2 { max-width:770px; margin-top:18px; }
.member-section-heading > p { margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.75; }
.member-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:55px; }
.member-benefit-grid article { min-height:270px; padding:30px; border-radius:18px; background:#fff; }
.member-benefit-grid span { color:#888881; font-size:11px; }
.member-benefit-grid h3 { margin:64px 0 13px; font-size:28px; letter-spacing:-.045em; }
.member-benefit-grid p { max-width:500px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.member-benefit-grid article:hover h3 { color:var(--interaction-hover-text); }
.member-process { padding:104px 0; color:#fff; background:#111315; }
.member-process-inner { display:grid; grid-template-columns:minmax(0,.85fr) minmax(520px,1.15fr); gap:9%; align-items:start; }
.member-process .eyebrow { color:var(--section-accent); }
.member-process-intro h2 { margin-top:18px; color:#fff; font-size:clamp(40px,4vw,58px); }
.member-process-intro > p:last-child { max-width:470px; margin:25px 0 0; color:#a9aba6; font-size:14px; line-height:1.75; }
.member-process-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.member-process-list li { display:grid; grid-template-columns:42px 1fr; gap:15px; padding:22px; border-radius:14px; background:#1d1f21; }
.member-process-list li > span { color:var(--section-accent); font-size:11px; }
.member-process-list strong { display:block; font-size:19px; }
.member-process-list p { margin:7px 0 0; color:#a9aba6; font-size:13px; line-height:1.6; }
.member-fit { padding-top:118px; padding-bottom:112px; }
.member-section-heading.compact h2 { max-width:620px; }
.member-fit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:48px; }
.member-fit-grid article { padding:34px; border-radius:18px; background:#e9e9e3; }
.member-fit-grid article.is-fit { background:#d9eee6; }
.member-fit-grid article > p { margin:0 0 25px; font-size:20px; font-weight:720; }
.member-fit-grid ul { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.member-fit-grid li { position:relative; padding-left:23px; color:#484843; font-size:14px; line-height:1.55; }
.member-fit-grid li::before { content:'—'; position:absolute; left:0; color:#888881; }
.member-boundaries { display:grid; grid-template-columns:minmax(0,.75fr) minmax(600px,1.25fr); gap:9%; padding-top:24px; padding-bottom:112px; }
.member-boundaries h2 { margin-top:18px; font-size:clamp(38px,4vw,55px); }
.boundary-grid { display:grid; gap:10px; }
.boundary-grid article { display:grid; grid-template-columns:140px 1fr; gap:22px; align-items:start; padding:25px 27px; border-radius:14px; background:#fff; }
.boundary-grid strong { font-size:16px; }
.boundary-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.member-faq { display:grid; grid-template-columns:minmax(0,.72fr) minmax(620px,1.28fr); gap:9%; padding-top:95px; padding-bottom:110px; }
.member-faq h2 { margin-top:18px; font-size:clamp(38px,4vw,55px); }
.faq-list { display:grid; gap:10px; }
.faq-list details { padding:22px 24px; border-radius:14px; background:#fff; }
.faq-list summary { cursor:pointer; font-size:16px; font-weight:680; }
.faq-list details p { margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.member-closing { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:9%; align-items:end; margin-bottom:32px; padding:58px; border-radius:22px; color:#fff; background:#111315; }
.member-closing .eyebrow { color:var(--section-accent); }
.member-closing h2 { margin-top:18px; color:#fff; font-size:clamp(40px,4vw,58px); }
.member-closing > div > p:last-child { max-width:650px; margin:24px 0 0; color:#aaaca7; font-size:14px; line-height:1.75; }
.member-closing > div:last-child { display:flex; flex-direction:column; align-items:flex-start; }
.member-closing .button-light:hover,.member-closing .button-light:focus-visible { background:#fff !important; }
.member-closing small { max-width:350px; margin-top:16px; color:#8f918c; font-size:11px; line-height:1.55; }

@media (max-width:900px) {
  .site-footer--redesigned { grid-template-columns:1fr; gap:38px; padding:38px; }
  .member-hero,.member-section-heading,.member-process-inner,.member-boundaries,.member-faq,.member-closing { grid-template-columns:1fr; }
  .member-hero { gap:42px; padding-top:68px; }
  .member-promise-card { max-width:620px; }
  .member-principles { grid-template-columns:repeat(2,1fr); }
  .member-process-inner,.member-boundaries,.member-faq,.member-closing { gap:42px; }
  .member-boundaries,.member-faq { padding-top:75px; }
}

@media (max-width:820px) {
  .recent-feed-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  .preview-optimized .showcase-feed > a { min-height:0; }
  .preview-optimized .popular-panel { position:static; }
  .site-footer--redesigned { gap:34px; margin-bottom:20px; padding:30px 24px 24px; border-radius:18px; }
  .footer-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; }
  .site-footer--redesigned .footer-bottom { flex-wrap:wrap; gap:8px 16px; }
  .site-footer--redesigned .footer-bottom small { flex-basis:100%; }
  .member-hero { padding-top:52px; padding-bottom:60px; }
  .member-hero-copy h1 { margin-top:22px; font-size:44px; }
  .member-hero-copy > p:not(.eyebrow) { font-size:15px; }
  .member-actions { align-items:flex-start; flex-direction:column; gap:17px; }
  .member-promise-card { padding:26px 22px; }
  .member-promise-card h2 { font-size:36px; }
  .member-principles { gap:9px; padding-bottom:72px; }
  .member-principles div { min-height:105px; padding:17px; }
  .member-benefits { padding-top:68px; padding-bottom:78px; }
  .member-section-heading { gap:22px; }
  .member-section-heading h2 { font-size:38px; }
  .member-benefit-grid,.member-fit-grid { grid-template-columns:1fr; }
  .member-benefit-grid { margin-top:34px; }
  .member-benefit-grid article { min-height:220px; padding:24px; }
  .member-benefit-grid h3 { margin-top:45px; }
  .member-process { padding:72px 0; }
  .member-process-inner { gap:34px; }
  .member-process-intro h2 { font-size:38px; }
  .member-fit { padding-top:78px; padding-bottom:74px; }
  .member-fit-grid { margin-top:32px; }
  .member-boundaries,.member-faq { gap:30px; padding-top:60px; padding-bottom:75px; }
  .boundary-grid article { grid-template-columns:1fr; gap:8px; padding:22px; }
  .member-closing { gap:32px; margin-bottom:20px; padding:34px 25px; }
  .member-closing h2 { font-size:38px; }
}

/* 首页严格执行版：不使用分割线，分类信息回到黑色，只保留会员权益按钮箭头。 */
.mega-column-title,
.story-category,
.resource-type,
.showcase-tabs button,
.popular-panel > a small,
.lesson-list p,
.eyebrow { color:var(--ink) !important; }
.service-hero .eyebrow,
.path-cta .eyebrow { color:#fff !important; }

.home-page .site-header,
.home-page .tutorials-mega,
.home-page .featured-story,
.home-page .showcase,
.home-page .showcase-primary,
.home-page .showcase-feed,
.home-page .showcase-feed > a,
.home-page .popular-panel,
.home-page .popular-panel > a,
.home-page .membership,
.home-page .benefits-list,
.home-page .benefits-list > div,
.home-page .site-footer { border-color:transparent !important; box-shadow:none !important; }

.home-page .featured-copy .text-link span,
.home-page .showcase-feed .feed-arrow,
.home-page .popular-panel > a > b,
.home-page .nav-dropdown-trigger > span { display:none !important; }
.home-page .showcase-feed > a { grid-template-columns:180px minmax(0,1fr); }
.home-page .popular-panel > a { grid-template-columns:34px minmax(0,1fr); }

/* 首页分割线最终归零，避免只把颜色设为透明后仍保留占位。 */
.home-page .site-header,
.home-page .tutorials-mega,
.home-page .featured-story,
.home-page .showcase,
.home-page .showcase-primary,
.home-page .showcase-feed,
.home-page .showcase-feed > a,
.home-page .popular-panel,
.home-page .popular-panel > a,
.home-page .membership,
.home-page .benefits-list,
.home-page .benefits-list > div,
.home-page .site-footer,
.home-page .site-footer small { border-width:0 !important; }

/* 智能优化版：用留白、柔和底色与圆角建立层次，不重新引入分割线。 */
.preview-optimized {
  --paper:#f7f7f3;
  --paper-deep:#ecece6;
  --muted:#62625d;
  --interaction-hover-text:#237c63;
}
.preview-optimized .site-header { background:rgba(247,247,243,.96); }
.preview-optimized .hero { padding-top:56px; padding-bottom:68px; }
.preview-optimized .hero h1 { min-height:0; max-width:920px; margin:0 0 30px; font-size:52px; line-height:1.08; letter-spacing:-.05em; }
.preview-optimized .featured-story { overflow:hidden; border-radius:20px; background:#fff; }
.preview-optimized .featured-art { min-height:382px; }
.preview-optimized .featured-copy { padding:36px 40px; }
.preview-optimized .featured-copy .story-category { margin-top:24px; }
.preview-optimized .featured-copy h2 { font-size:clamp(30px,2.7vw,40px); line-height:1.1; }
.preview-optimized .story-intro { margin:17px 0 23px; }
.preview-optimized .art-terminal { background:linear-gradient(140deg,#16192a 2%,#344bc2 48%,#8997d9 100%); }

.preview-optimized .showcase { padding:82px 0 96px; }
.preview-optimized .showcase-tabs { margin:24px auto 52px; gap:8px; }
.preview-optimized .showcase-tabs button { padding:9px 12px 8px; border-width:1px; font-size:14px; }
.preview-optimized .showcase-tabs button.is-active { border-color:#c7c7bf !important; background:#fff !important; }
.preview-optimized .showcase-primary { gap:36px; padding-bottom:52px; }
.preview-optimized .showcase-art { margin-bottom:18px; border-radius:16px; }
.preview-optimized .showcase-card h3 { font-size:clamp(27px,2.15vw,33px); line-height:1.17; letter-spacing:-.045em; }
.preview-optimized .showcase-card > p:last-child { margin-top:12px; font-size:14px; }
.preview-optimized .art-route { background:linear-gradient(135deg,#191c32 0 20%,#3b52c5 55%,#8b98d5); }
.preview-optimized .art-shield { background:#dceca3; }

.preview-optimized .showcase-secondary { align-items:start; gap:32px; padding-top:44px; }
.preview-optimized .showcase-feed > a { grid-template-columns:160px minmax(0,1fr); gap:22px; margin-bottom:12px; padding:18px; border-radius:16px; background:#fff; }
.preview-optimized .feed-art { height:104px; border-radius:12px; }
.preview-optimized .showcase-feed h3 { font-size:22px; line-height:1.24; }
.preview-optimized .art-server { background:#df8b6d; }
.preview-optimized .art-tools { background:#e7e4dc; }
.preview-optimized .popular-panel { padding:24px; border-radius:20px; background:#ecece6; }
.preview-optimized .route-panel > div { padding:4px 4px 20px; }
.preview-optimized .route-panel h3 { margin-top:10px; font-size:30px; line-height:1.06; }
.preview-optimized .popular-panel > a { min-height:72px; margin-top:8px; padding:11px 12px; border-radius:14px; background:#fff; }

.preview-optimized .membership { gap:7%; margin-bottom:88px; padding:56px; border-radius:22px; background:#ecece6; }
.preview-optimized .membership-copy h2 { font-size:clamp(36px,3.5vw,51px); line-height:1.04; }
.preview-optimized .membership-copy > p:not(.eyebrow) { margin:21px 0 27px; }
.preview-optimized .benefits-list { display:grid; gap:10px; }
.preview-optimized .benefits-list > div { padding:19px 20px; border-radius:14px; background:#fff; }
.preview-optimized .button-dark { border-radius:12px; }
.preview-optimized .site-footer { padding-top:38px; }

@media (max-width:820px) {
  .preview-optimized .hero { padding-top:38px; padding-bottom:52px; }
  .preview-optimized .hero h1 { margin-bottom:26px; font-size:36px; line-height:1.08; }
  .preview-optimized .featured-story { border-radius:16px; }
  .preview-optimized .featured-copy { padding:26px 22px 30px; }
  .preview-optimized .showcase { padding:62px 0 72px; }
  .preview-optimized .showcase-tabs { margin:24px 0 40px; }
  .preview-optimized .showcase-primary { gap:40px; padding-bottom:40px; }
  .preview-optimized .showcase-secondary { gap:28px; padding-top:34px; }
  .preview-optimized .showcase-feed > a { grid-template-columns:108px minmax(0,1fr); gap:16px; padding:14px; }
  .preview-optimized .feed-art { height:86px; }
  .preview-optimized .showcase-feed h3 { font-size:18px; }
  .preview-optimized .popular-panel { padding:19px; }
  .preview-optimized .membership { gap:34px; margin-bottom:56px; padding:30px 24px; border-radius:18px; }
  .preview-optimized .membership-copy h2 { font-size:36px; }
}

/* 最终视觉收束：Futur 式首页白底编辑节奏 + Wistia Learn 式统一内容卡 */
.library { background:var(--paper); color:var(--ink); border-top:1px solid var(--line); }.library h2 { color:var(--ink); }.library .search-field { border-color:var(--ink); }.library .search-field input { color:var(--ink); }.library .search-field input::placeholder { color:#777; }.library .search-field svg { stroke:var(--ink); }.library-tools > p { color:var(--muted); }.library .filter-button { border-color:#a8a8a1; color:#3c3c38; }.library .filter-button:hover, .library .filter-button.is-selected { background:var(--blue); border-color:var(--blue); color:#fff; }.library-grid { gap:45px 34px; border:0; }.library .resource-card { min-height:0; padding:0; border:0; }.library .resource-card:nth-child(3n) { border-right:0; }.library .resource-art { height:auto; aspect-ratio:1.73 / 1; margin:0 0 20px; border-radius:3px; }.library .resource-type { margin:0 0 10px; color:var(--blue); font-size:11px; }.library .resource-card h3 { max-width:390px; color:var(--ink); font-size:25px; line-height:1.22; }.library .resource-meta { max-width:390px; margin-top:14px; color:var(--muted); font-size:14px; line-height:1.55; }.library .resource-card:hover h3 { color:var(--blue); }.consult { background:var(--dark); }.consult .eyebrow { color:var(--lime); }.consult-inner > p:not(.eyebrow) { color:#c3c3bd; }.button-light span { color:var(--blue); }

.content-index .index-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:62px 50px; }.content-index .index-card { min-width:0; }.content-index .index-card .index-art { aspect-ratio:1.739 / 1; margin-bottom:28.8px; border-radius:5px; }.content-index .index-card h3 { color:#000; font-size:24px; font-weight:500; line-height:1.4; letter-spacing:normal; transition:color 150ms cubic-bezier(0,0,0,1); }.content-index .index-card .card-summary { margin:16px 0 0; color:#62626c; font-size:16px; font-weight:400; line-height:1.4; }.content-index .index-card .card-author { font-size:15px; }.content-index .index-card .card-author small { font-size:11px; }.content-index .author-mark { flex-basis:30px; width:30px; height:30px; }.content-index .index-card.is-featured { display:flex; grid-column:auto; }.content-index .index-card.is-featured .index-art { min-height:0; }.content-index .index-card.is-featured h2 { font-size:inherit; }

@media (max-width:820px) {
  .library-grid, .content-index .index-grid { grid-template-columns:1fr; gap:42px; }.library .resource-card h3 { font-size:24px; }.library .resource-art, .content-index .index-card .index-art { aspect-ratio:1.739 / 1; }.content-index .index-card h3 { font-size:24px; }.content-index .index-card .card-summary { font-size:16px; }
}

/* 卡片保持透明，不抬升、不加阴影；悬停只改变标题文字。 */
.content-index .index-card:hover .index-art { transform:none; box-shadow:none; }.content-index .index-card:hover h3,.content-index .index-card:focus-visible h3 { color:var(--interaction-hover-text); }.content-index .index-card .index-art { transition:none; }.content-index .index-card .card-summary { margin-bottom:0; }.library .resource-card:hover h3 { color:var(--interaction-hover-text); }.article-header .eyebrow { color:var(--wistia-mint); }.article-header h1 { color:var(--ink); }
.card-hover-tint { display:none; }
.showcase-card h3 { transition:color 150ms cubic-bezier(0,0,0,1); }
.showcase-card:hover h3,.showcase-card:focus-visible h3 { color:var(--interaction-hover-text); }
.content-index .filter-button { border-color:#85857d; color:#4d4d48; }.content-index .filter-button:hover, .content-index .filter-button.is-selected { border-color:var(--lime); color:var(--ink); }

/* 详情首屏沿用 Wistia Learn：白底正文、轻字重标题，媒体内容进入正文后再出现 */
.article-shell { display:flex; flex-direction:column; }.article-header { order:1; }.article-header h1 { font-weight:300; line-height:1.15; letter-spacing:-.055em; }.article-layout { order:2; }.video-stage { order:3; max-width:770px; margin:84px 0 0 auto; }.video-stage > p { margin-top:12px; }

@media (max-width:820px) { .article-header h1 { font-weight:450; line-height:1.14; }.video-stage { margin-top:55px; } }

/* 整站排版收束：编辑式节奏、统一层级与更克制的交互 */
html { background:var(--paper); }.site-header { background:var(--paper); backdrop-filter:none; box-shadow:0 1px 0 rgba(16,16,16,.025); }.hero { padding-top:82px; }.hero h1 { max-width:1120px; }.featured-story { border-top-width:2px; }.featured-copy { padding-inline:48px; }.signals { padding-top:38px; }.signals strong { font-size:25px; font-weight:560; letter-spacing:-.045em; }.signals span { max-width:190px; line-height:1.5; }.section-heading h2 { max-width:790px; }.latest-grid { gap:0; }.editorial-card { transition:background-color .18s; }.editorial-card:hover { background:#f3f3ed; }.editorial-card:hover h3 { color:var(--wistia-mint); }.card-copy .card-description { margin:16px 0 22px; color:var(--muted); font-size:14px; line-height:1.62; }.card-copy > p:last-child { margin-top:auto; }.card-copy { display:flex; flex:1; flex-direction:column; }.paths { padding-bottom:108px; }.path-row { padding-inline:4px; }.membership { border-top:1px solid var(--ink); }.membership-copy h2 { max-width:650px; }.benefits-list strong { font-weight:620; }.consult { padding-block:118px; }.consult-inner h2 { max-width:900px; }.button-dark,.button-light,.mega-button { transition:transform .18s,background-color .18s,color .18s; }.button-dark:hover,.button-light:hover,.mega-button:hover { transform:translateY(-2px); }.page-hero { padding-top:88px; padding-bottom:70px; }.page-hero-row h1 { max-width:940px; }.content-index { padding-top:38px; }.content-index .index-count { margin-top:28px; }.topic-card:nth-child(even) > div:first-child { order:2; padding-left:7%; padding-right:0; }.topic-card:nth-child(even) .topic-visual { order:1; margin-left:0; margin-right:7%; }.topic-card > div:first-child { align-self:center; }.topic-card .text-link { font-weight:650; }.path-outline { align-items:start; }.lesson-list li { transition:padding .18s,background-color .18s; }.lesson-list li:hover { padding-inline:14px; background:var(--paper-deep); }.article-header { max-width:940px; }.article-lead { max-width:720px; }.article-copy { color:#2c2c29; }.article-copy h2 { font-weight:560; }.service-options > h2 { max-width:720px; }.service-grid > div { transition:background-color .18s; }.service-grid > div:hover { background:var(--paper-deep); }.consult-panel { align-items:end; }.site-footer { margin-top:0; padding-top:54px; padding-bottom:32px; border-top:1px solid var(--line); }.site-footer > div a { color:#44443f; }.site-footer small { margin-top:10px; }

@media (max-width:820px) {
  .hero { padding-top:50px; }.featured-copy { padding-inline:0; }.signals strong { font-size:23px; }.latest-grid { gap:0; }.card-copy .card-description { margin-bottom:18px; }.paths { padding-bottom:70px; }.membership { padding-top:70px; }.consult { padding-block:76px; }.page-hero { padding-top:54px; }.page-hero h1 { font-size:42px; }.service-hero h1 { font-size:37px; }.mobile-only { display:block; }.topic-card:nth-child(even) > div:first-child { order:1; padding-left:0; }.topic-card:nth-child(even) .topic-visual { order:2; margin-right:0; }.site-footer { padding-top:38px; }
}

.mobile-only { display:none; }
@media (max-width:820px) { .mobile-only { display:block; } }

/* Wistia 式顶栏：品牌与栏目靠左，商业动作靠右 */
.site-header { grid-template-columns:auto minmax(0,1fr) auto; column-gap:34px; padding-inline:3.2vw; }
.site-nav { justify-self:start; }
.header-utilities { display:flex; align-items:center; justify-self:end; gap:10px; font-size:14px; }
.header-utilities > a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; font-weight:650; }
.header-utilities > a:first-child { padding-inline:9px 14px; }
.header-utilities .header-primary { min-width:102px; background:var(--blue); color:#fff; border-radius:2px; }
.header-utilities .header-primary:hover { background:#244fe3; }
.mobile-nav-link { display:none !important; }

/* Wistia 式全宽资源菜单：每列都用栏目名 + 一句话解释 */
.tutorials-mega { top:84px; left:0; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; width:100vw; min-height:438px; transform:translateY(-16px); padding:38px 4.2vw 24px; border:0; border-bottom:1px solid var(--wistia-menu-line); background:#fff; box-shadow:inset 0 0 0 0 var(--wistia-menu-line); transition:transform 160ms linear,box-shadow 160ms linear,visibility 160ms linear; }
.nav-dropdown.is-open .tutorials-mega { transform:translateY(0); box-shadow:inset 0 1px 0 0 var(--wistia-menu-line); }
.mega-column { display:flex; flex-direction:column; gap:0; min-width:0; padding:0 0 30px; border:0; }
.mega-column:first-child,.mega-column:last-child { padding-inline:0; border:0; }
.mega-column-title { margin:0 0 12px; color:var(--wistia-menu-blue); font-size:12px; font-weight:750; letter-spacing:normal; }
.mega-column > a { display:flex; flex-direction:column; align-items:flex-start; width:100%; max-width:none; padding:16px 24px; border-radius:12px; transition:color 160ms linear,background-color 160ms linear; }
.mega-column strong { display:block; color:var(--wistia-menu-text); font-size:18px; font-weight:500; line-height:1.25; letter-spacing:normal; transition:color 160ms linear; }
.mega-column small { display:block; margin-top:4px; color:var(--wistia-menu-muted); font-size:12px; font-weight:500; line-height:1.45; transition:color 160ms linear; }
.mega-column > a:hover,.mega-column > a:focus-visible { background-color:var(--wistia-menu-hover); outline:none; }
.mega-column > a:hover strong,.mega-column > a:focus-visible strong { color:var(--wistia-menu-blue); }
.mega-column > a:hover small,.mega-column > a:focus-visible small { color:#3d3e42; }
.mega-filters { grid-column:1 / -1; display:flex; align-items:center; gap:9px; padding-top:19px; border-top:1px solid var(--line); }
.mega-filters span { margin-right:10px; color:#8b8b85; font-size:11px; font-weight:720; letter-spacing:.08em; }
.mega-filters a { padding:8px 12px; border:1px solid #d3d3cc; border-radius:999px; color:#4c4c47; font-size:12px; font-weight:620; }
.mega-filters a:first-of-type,.mega-filters a:hover { border-color:var(--blue); background:var(--blue); color:#fff; }

/* 删除标题上方小字后，首屏直接进入主张 */
.hero h1 { margin-top:12px; }

/* The Futur 式中部资源橱窗：最新内容和专题路线进入同一模块 */
.showcase { padding:112px 0 122px; border-top:1px solid var(--line); }
.showcase-heading { text-align:center; }
.showcase-heading h2 { max-width:900px; margin:18px auto 0; font-size:clamp(42px,5.2vw,72px); }
.showcase-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 13px; margin:38px auto 72px; }
.showcase-tabs a { padding:10px 13px 8px; border:2px solid transparent; color:#73736e; font-size:15px; font-weight:650; }
.showcase-tabs a:hover { color:var(--ink); }
.showcase-tabs a.is-active { border-color:var(--blue); border-radius:5px; color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
.showcase-primary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; padding-bottom:64px; border-bottom:1px solid var(--line); }
.showcase-card { display:block; min-width:0; }
.showcase-art { position:relative; aspect-ratio:1.72/1; overflow:hidden; margin-bottom:22px; }
.showcase-card .story-category { margin:0 0 12px; color:var(--blue); }
.showcase-card h3 { margin:0; font-size:clamp(28px,2.5vw,38px); line-height:1.13; letter-spacing:-.055em; }
.showcase-card > p:last-child { max-width:620px; margin:16px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.showcase-card:hover h3 { color:var(--blue); }
.art-route { background:linear-gradient(135deg,#12152b 0 20%,#2749ec 53%,#91a4ff); color:#fff; }
.art-route span { position:absolute; z-index:2; left:7%; bottom:9%; font-size:clamp(55px,7vw,100px); font-weight:820; line-height:.78; letter-spacing:-.09em; }
.art-route i { position:absolute; width:58%; height:58%; right:-8%; top:-18%; border:1px solid rgba(255,255,255,.65); border-radius:50%; box-shadow:inset 0 0 0 35px rgba(255,255,255,.09); }
.art-route i:last-child { width:41%; height:41%; right:16%; top:38%; border-radius:0; transform:rotate(-18deg); box-shadow:none; }
.art-shield { background:#cfff59; color:#101010; }
.art-shield span { position:absolute; z-index:2; left:7%; top:11%; font-size:clamp(57px,7vw,102px); font-weight:820; line-height:.78; letter-spacing:-.09em; }
.art-shield i { position:absolute; right:7%; bottom:-22%; width:43%; aspect-ratio:1; border:2px solid var(--ink); border-radius:50%; box-shadow:0 0 0 28px rgba(16,16,16,.08),0 0 0 56px rgba(16,16,16,.05); }
.showcase-secondary { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:54px; padding-top:58px; }
.showcase-feed { border-top:1px solid var(--ink); }
.showcase-feed > a { display:grid; grid-template-columns:180px minmax(0,1fr) 24px; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.feed-art { position:relative; height:112px; overflow:hidden; }
.feed-art span { position:absolute; left:16px; bottom:11px; font-size:40px; font-weight:800; letter-spacing:-.08em; }
.art-server { background:#e86f4d; }
.art-server::after { content:""; position:absolute; width:140%; height:1px; left:-15%; top:52%; transform:rotate(-17deg); background:#41120b; box-shadow:0 -22px 0 rgba(65,18,11,.35),0 22px 0 rgba(65,18,11,.35); }
.art-tools { background:#e3e0d7; }
.art-tools::after { content:""; position:absolute; right:15px; top:15px; width:54px; height:54px; border:11px solid var(--blue); border-radius:50%; }
.showcase-feed .story-category { margin:0 0 8px; }
.showcase-feed h3 { margin:0; font-size:24px; line-height:1.2; letter-spacing:-.045em; }
.showcase-feed a div > p:last-child { margin:9px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.feed-arrow { align-self:center; color:var(--blue); font-size:22px; }
.showcase-feed a:hover h3 { color:var(--blue); }
.route-panel { border-top:4px solid var(--blue); }
.route-panel > div { padding:26px 0 29px; }
.route-panel h3 { margin:12px 0 13px; font-size:34px; line-height:1.02; letter-spacing:-.06em; }
.route-panel > div > p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.route-panel > a { display:grid; grid-template-columns:34px 1fr 20px; gap:9px; align-items:center; min-height:67px; border-top:1px solid var(--line); }
.route-panel > a span { color:var(--muted); font-size:11px; }
.route-panel > a strong { font-size:16px; }
.route-panel > a b { color:var(--blue); font-size:18px; }
.route-panel > a:hover strong { color:var(--blue); }

@media (max-width:1050px) {
  .site-header { column-gap:16px; padding-inline:22px; }
  .site-nav > a,.nav-dropdown-trigger { padding-inline:11px; }
  .site-nav > a::after,.nav-dropdown-trigger::after { left:11px; right:11px; }
  .header-utilities > a { padding-inline:10px; }
  .mega-column { padding-inline:22px; }
}

@media (max-width:820px) {
  .site-header { grid-template-columns:1fr auto; padding-inline:20px; }
  .site-nav { justify-self:stretch; }
  .header-utilities { display:none; }
  .site-nav .mobile-nav-link { display:block !important; }
  .tutorials-mega { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; max-height:none; min-height:0; transform:none; padding:10px 0 4px; overflow:visible; box-shadow:none; }
  .nav-dropdown.is-open .tutorials-mega { grid-template-columns:repeat(2,minmax(0,1fr)); transform:none; }
  .mega-column,.mega-column:first-child,.mega-column:last-child { gap:0; padding:17px 6px 19px; border-left:0; border-top:1px solid var(--line); }
  .mega-column:first-child { border-top:0; }
  .mega-column:nth-child(2) { border-top:0; }
  .mega-column:nth-child(even) { border-left:1px solid var(--line); }
  .mega-column > a { max-width:none; padding:10px 12px; border-radius:8px; }
  .mega-column strong { font-size:15px; }
  .mega-column small { display:none; }
  .mega-filters { grid-column:1 / -1; flex-wrap:wrap; gap:7px; padding:18px 0 4px; }
  .mega-filters span { flex-basis:100%; margin:0 0 3px; }
  .hero h1 { margin-top:0; font-size:34px; line-height:1.04; }
  .showcase { padding:76px 0 84px; }
  .showcase-heading h2 { font-size:36px; }
  .showcase-tabs { justify-content:flex-start; flex-wrap:nowrap; margin:29px 0 46px; padding-bottom:6px; overflow:auto; }
  .showcase-tabs a { flex:0 0 auto; }
  .showcase-primary { grid-template-columns:1fr; gap:48px; padding-bottom:49px; }
  .showcase-art { margin-bottom:18px; }
  .showcase-card h3 { font-size:28px; }
  .showcase-card > p:last-child { font-size:14px; }
  .showcase-secondary { grid-template-columns:1fr; gap:54px; padding-top:46px; }
  .showcase-feed > a { grid-template-columns:112px minmax(0,1fr); gap:17px; }
  .showcase-feed h3 { font-size:19px; }
  .showcase-feed a div > p:last-child,.feed-arrow { display:none; }
  .feed-art { height:90px; }
  .route-panel h3 { font-size:32px; }
}

/* 已确认的首页主张采用两行稳定排版 */
.hero-line { display:block; }

/* Wistia 顶栏实测为纯白背景 */
.site-header { background:#fff; }

/* 保证首页卡片使用与 Learn 卡片相同的最终悬停色 */
.showcase-card:hover h3,.showcase-card:focus-visible h3 { color:var(--wistia-mint); }

/* Wistia Learn 列表以纯白画布承载透明卡片 */
.resource-page { background:#fff; }

/* 通用交互尺寸与过渡；最终悬停行为在文件末尾统一收口 */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tutorials-mega { grid-template-columns:repeat(4,minmax(0,1fr)); min-height:420px; }

.site-nav > a,.nav-dropdown-trigger,.header-utilities > a,.menu-button,.text-link,.site-footer > div a,.article-aside a,.crumb a,.mega-filters a,.filter-button,.button-dark,.button-light,.mega-button { border-radius:12px; transition:color 160ms linear,background-color 160ms linear,border-color 160ms linear; }
.site-nav > a:hover,.site-nav > a:focus-visible,.nav-dropdown-trigger:hover,.nav-dropdown-trigger:focus-visible,.header-utilities > a:hover,.header-utilities > a:focus-visible,.menu-button:hover,.menu-button:focus-visible,.text-link:hover,.text-link:focus-visible,.site-footer > div a:hover,.site-footer > div a:focus-visible,.article-aside a:hover,.article-aside a:focus-visible,.crumb a:hover,.crumb a:focus-visible { background:var(--wistia-menu-hover); color:var(--wistia-menu-blue); text-decoration:none; }
.header-utilities .header-primary:hover,.header-utilities .header-primary:focus-visible,.button-dark:hover,.button-dark:focus-visible,.button-light:hover,.button-light:focus-visible,.mega-button:hover,.mega-button:focus-visible { transform:none; background:var(--wistia-menu-hover) !important; color:var(--wistia-menu-blue) !important; }
.button-dark:hover span,.button-dark:focus-visible span,.button-light:hover span,.button-light:focus-visible span,.mega-button:hover span,.mega-button:focus-visible span { color:var(--wistia-menu-blue); }

.mega-filters a:first-of-type,.mega-filters a:hover,.mega-filters a:focus-visible,.library .filter-button:hover,.library .filter-button:focus-visible,.library .filter-button.is-selected,.content-index .filter-button:hover,.content-index .filter-button:focus-visible,.content-index .filter-button.is-selected { border-color:var(--wistia-menu-line); background:var(--wistia-menu-hover); color:var(--wistia-menu-blue); }

/* The Futur 式原地筛选：按钮不跳页，结果在当前模块内重排 */
.showcase-tabs button { padding:10px 13px 8px; border:2px solid transparent; border-radius:8px; background:transparent; color:#73736e; font-size:15px; font-weight:650; transition:color 160ms linear,background-color 160ms linear,border-color 160ms linear; }
.showcase-tabs button:hover,.showcase-tabs button:focus-visible,.showcase-tabs button.is-active { border-color:var(--wistia-menu-line); background:var(--wistia-menu-hover); color:var(--wistia-menu-blue); outline:none; box-shadow:none; }
.showcase [hidden] { display:none !important; }
.showcase-primary.is-single { grid-template-columns:minmax(0,1fr); max-width:calc((100% - 48px)/2); }
.showcase-secondary.is-popular-only { grid-template-columns:minmax(300px,520px); justify-content:end; }

/* 卡片沿用 Wistia Learn：标题薄荷绿、图片 soft-light，不抬升、不加阴影 */
.showcase-feed > a,.route-panel > a,.related a,.path-row,.lesson-list li { border-radius:12px; transition:color 160ms linear,background-color 160ms linear; }
.showcase-feed > a { padding-inline:14px; }
.showcase-feed > a:hover,.showcase-feed > a:focus-visible,.route-panel > a:hover,.route-panel > a:focus-visible,.related a:hover,.related a:focus-visible,.path-row:hover,.path-row:focus-visible,.lesson-list li:hover { background:var(--wistia-menu-hover); }
.showcase-feed > a:hover h3,.showcase-feed > a:focus-visible h3,.route-panel > a:hover strong,.route-panel > a:focus-visible strong,.related a:hover,.related a:focus-visible,.path-row:hover .path-name { color:var(--wistia-menu-blue); }
.feed-art::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background:transparent; mix-blend-mode:soft-light; transition:background-color 150ms cubic-bezier(0,0,0,1); }
.path-row { padding-inline:12px; }
.path-row:hover { padding-inline:12px; }
.lesson-list li:hover { padding-inline:14px; }

.popular-panel { border-top-color:var(--wistia-menu-blue); }
.popular-panel > a { grid-template-columns:34px 1fr 20px; min-height:78px; padding:10px 12px; }
.popular-panel > a div { min-width:0; }
.popular-panel > a strong { display:block; line-height:1.35; }
.popular-panel > a small { display:block; margin-top:5px; color:var(--wistia-menu-muted); font-size:11px; font-weight:500; }
.popular-panel > a:hover small,.popular-panel > a:focus-visible small { color:#3d3e42; }

a:focus-visible,button:focus-visible { outline:2px solid var(--wistia-menu-blue); outline-offset:2px; }

@media (max-width:820px) {
  .tutorials-mega { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-tabs button { flex:0 0 auto; }
  .showcase-primary.is-single { max-width:none; }
  .showcase-secondary.is-popular-only { grid-template-columns:1fr; }
  .showcase-feed > a { padding-inline:10px; }
}

/* Wistia 后台实测：主导航 60px；主文案 56px / 67.2px */
.site-header { min-height:60px; border-bottom:0; box-shadow:inset 0 -1px 0 var(--line); }
.site-nav > a,.nav-dropdown-trigger { display:flex; align-items:center; height:60px; padding:0 8px; }
.site-nav > a::after,.nav-dropdown-trigger::after { left:8px; right:8px; }
.tutorials-mega { top:60px; }
.hero { padding-top:64px; }
.hero h1 { min-height:67.2px; max-width:1120px; margin:0 0 24px; font-size:56px; font-weight:760; line-height:67.2px; letter-spacing:-.055em; }

/*
 * The Futur 当前构建使用 .group:hover .group-hover\:text-primary：
 * 外层链接背景保持透明，只改变后代标题颜色。全站按同一逻辑收口。
 */
.site-nav > a:hover,
.site-nav > a:focus-visible,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.header-utilities > a:not(.header-primary):hover,
.header-utilities > a:not(.header-primary):focus-visible,
.menu-button:hover,
.menu-button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.site-footer > div a:hover,
.site-footer > div a:focus-visible,
.article-aside a:hover,
.article-aside a:focus-visible,
.crumb a:hover,
.crumb a:focus-visible,
.mega-column > a:hover,
.mega-column > a:focus-visible,
.mega-links a:hover,
.mega-links a:focus-visible,
.mega-filters a:hover,
.mega-filters a:focus-visible,
.filter-button:hover,
.filter-button:focus-visible,
.showcase-tabs button:hover,
.showcase-tabs button:focus-visible,
.showcase-feed > a:hover,
.showcase-feed > a:focus-visible,
.route-panel > a:hover,
.route-panel > a:focus-visible,
.popular-panel > a:hover,
.popular-panel > a:focus-visible,
.related a:hover,
.related a:focus-visible,
.path-row:hover,
.path-row:focus-visible,
.lesson-list li:hover,
.lesson-list li:focus-within,
.editorial-card:hover,
.service-grid > div:hover { background-color:transparent !important; }

.site-nav > a:hover,
.site-nav > a:focus-visible,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.header-utilities > a:not(.header-primary):hover,
.header-utilities > a:not(.header-primary):focus-visible,
.menu-button:hover,
.menu-button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.site-footer > div a:hover,
.site-footer > div a:focus-visible,
.article-aside a:hover,
.article-aside a:focus-visible,
.crumb a:hover,
.crumb a:focus-visible,
.mega-links a:hover,
.mega-links a:focus-visible,
.mega-filters a:hover,
.mega-filters a:focus-visible,
.filter-button:hover,
.filter-button:focus-visible,
.showcase-tabs button:hover,
.showcase-tabs button:focus-visible,
.related a:hover,
.related a:focus-visible { color:var(--interaction-hover-text) !important; }

.mega-column > a:hover strong,
.mega-column > a:focus-visible strong,
.showcase-card:hover h3,
.showcase-card:focus-visible h3,
.content-index .index-card:hover h3,
.content-index .index-card:focus-visible h3,
.library .resource-card:hover h3,
.library .resource-card:focus-visible h3,
.showcase-feed > a:hover h3,
.showcase-feed > a:focus-visible h3,
.route-panel > a:hover strong,
.route-panel > a:focus-visible strong,
.popular-panel > a:hover strong,
.popular-panel > a:focus-visible strong,
.path-row:hover .path-name,
.path-row:focus-visible .path-name,
.lesson-list li:hover h3,
.lesson-list li:focus-within h3,
.editorial-card:hover h3,
.service-grid > div:hover h3 { color:var(--interaction-hover-text) !important; }

/* 实心按钮保留原有底色，悬停时也只改变文字和箭头颜色。 */
.header-utilities .header-primary:hover,
.header-utilities .header-primary:focus-visible { background:var(--blue) !important; color:var(--interaction-hover-text) !important; }
.button-dark:hover,
.button-dark:focus-visible,
.mega-button:hover,
.mega-button:focus-visible { background:var(--ink) !important; color:var(--interaction-hover-text) !important; }
.button-light:hover,
.button-light:focus-visible { background:#fff !important; color:var(--interaction-hover-text) !important; }
.button-dark:hover span,
.button-dark:focus-visible span,
.button-light:hover span,
.button-light:focus-visible span,
.mega-button:hover span,
.mega-button:focus-visible span { color:var(--interaction-hover-text) !important; }

@media (max-width:820px) {
  .site-header { min-height:60px; }
  .site-nav > a,.nav-dropdown-trigger { height:auto; min-height:44px; padding:10px 8px; }
  .tutorials-mega { top:auto; }
  .hero { padding-top:40px; }
  .hero h1 { min-height:50.4px; margin-bottom:32px; font-size:42px; line-height:50.4px; letter-spacing:-.045em; }
}

/* 最终覆盖：方案一四栏，以及首页最新发布模块的统一前景色。 */
.tutorials-mega { grid-template-columns:repeat(4,minmax(0,1fr)); min-height:370px; }
.showcase-tabs button.is-active { border-color:var(--section-accent) !important; background:transparent !important; }
.showcase-primary { border-bottom-color:var(--section-accent); }
.showcase-feed,
.popular-panel { border-top:1px solid var(--section-accent) !important; }
.showcase-feed > a { border-bottom-color:var(--section-accent); }
.popular-panel > a { border-top-color:var(--section-accent); }

@media (max-width:820px) {
  .tutorials-mega { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; }
}

/* 最终视觉复核收口：避免旧优化规则覆盖新版底部和会员页节奏。 */
.preview-optimized .home-membership { color:#fff; background:#111315 !important; }
.preview-optimized .home-membership .membership-copy > p:not(.eyebrow) { color:#bdbfb9; }
.preview-optimized .home-membership .benefits-list > div { background:#1d1f21; }
.member-principles { padding-bottom:70px; }
.member-benefits { padding-top:68px; padding-bottom:90px; }
.member-process-inner { grid-template-columns:minmax(0,1fr) minmax(520px,1fr); gap:6%; }
.member-process-intro h2 { font-size:clamp(38px,3.5vw,52px); }
.member-fit { padding-top:92px; padding-bottom:84px; }
.member-boundaries { grid-template-columns:minmax(0,.85fr) minmax(580px,1.15fr); gap:7%; padding-bottom:54px; }
.member-faq { grid-template-columns:minmax(0,.9fr) minmax(580px,1.1fr); gap:7%; padding-top:58px; padding-bottom:84px; }

@media (max-width:900px) {
  .member-process-inner,.member-boundaries,.member-faq { grid-template-columns:1fr; }
}

@media (max-width:820px) {
  .member-principles { padding-bottom:52px; }
  .member-benefits { padding-top:52px; padding-bottom:68px; }
  .member-fit { padding-top:68px; padding-bottom:62px; }
  .member-boundaries { padding-bottom:48px; }
  .member-faq { padding-top:48px; padding-bottom:64px; }
}