/* 原点未来官网样式。字体由构建脚本裁剪后生成 fonts.css，族名 OF Serif / OF Sans / OF Hand（改名以符合 SIL OFL 保留字体名条款）。 */
:root {
  /* 品牌五色；单一浅色主题。主按钮墨色，陶土只做标注、细线与光晕，亚麻做标签 */
  --paper: #F6F3ED;
  --ink: #2B2926;
  --ink-soft: #5E574F;
  --clay: #B76E58;
  --stone: #DCD5CB;
  --linen: #C8B59A;
  --sheet: #FBF9F5;
  --serif: "OF Serif", "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  --sans: "OF Sans", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --hand: "OF Hand", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --notch: polygon(0 0, calc(100% - 44px) 0, calc(100% - 44px) 44px, 100% 44px, 100% 100%, 0 100%);
  /* 版式：宽版心，大标题左对齐；环形 Logo 的方形缺口做图片裁角母题 */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0; }
.eyebrow { font-size: 13px; letter-spacing: .12em; color: var(--clay); font-weight: 500; text-transform: uppercase; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 34em; }
.hand { font-family: var(--hand); color: var(--clay); font-size: 19px; line-height: 1.5; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 16px; }

.draft { position: fixed; left: 12px; bottom: 12px; z-index: 70; max-width: min(560px, calc(100% - 24px)); background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.5; border: 1px solid rgba(246, 243, 237, .25); }
.draft .wrap { padding: 6px 12px; max-width: none; }

/* 顶栏：首页叠在视频上时透明白字（.over），滚动后或打开菜单时变为暖白毛玻璃（.solid） */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(246, 243, 237, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--stone); transition: background .25s, color .25s, border-color .25s; }
.nav.over { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: var(--paper); }
.nav.over.solid { background: rgba(246, 243, 237, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--stone); color: var(--ink); }
.nav > .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav .logo { display: block; flex: none; }
.nav .logo img { height: 30px; width: auto; }
.nav .logo-on-dark { display: none; }
.nav.over:not(.solid) .logo-on-dark { display: block; }
.nav.over:not(.solid) .logo-on-light { display: none; }
.primary > ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; font-size: 15px; }
.primary > ul > li { position: relative; display: flex; align-items: center; }
.primary > ul > li.is-mega { position: static; }
.primary .top { text-decoration: none; padding: 10px 6px 10px 10px; display: block; border-bottom: 1.5px solid transparent; }
.primary li:not(.has-menu) .top { padding-right: 10px; }
.primary .top[aria-current="page"] { border-bottom-color: var(--clay); }
.chev { width: 22px; height: 30px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.chev::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; opacity: .7; }
.has-menu.open .chev::before { transform: translateY(1px) rotate(-135deg); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lang { font-size: 14px; opacity: .8; text-decoration: none; white-space: nowrap; }
.lang b { font-weight: 500; opacity: 1; }
.menu-btn { display: none; background: none; border: 1px solid currentColor; padding: 4px 12px; cursor: pointer; color: inherit; font-size: 14px; }

/* 下拉：小面板参考 Hack Club 的轻量列表；课程用整宽大菜单，参考 TKS 的分栏与照片卡 */
.drop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.has-menu.open > .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
.drop.small { min-width: 260px; background: #fff; border: 1px solid var(--stone); box-shadow: 0 14px 40px rgba(43, 41, 38, .12); padding: 8px; }
.drop.small ul { list-style: none; margin: 0; padding: 0; }
.drop.small a { display: grid; gap: 1px; padding: 10px 12px; text-decoration: none; }
.drop.small a:hover, .drop.small a:focus-visible { background: var(--paper); }
.drop.small b { font-weight: 500; font-size: 15px; }
.drop.small span { font-size: 13px; color: var(--ink-soft); }
.drop.mega { left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); box-shadow: 0 24px 48px rgba(43, 41, 38, .10); }
.mega-in { display: grid; grid-template-columns: 180px minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; padding-top: 36px; padding-bottom: 40px; }
.mega-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font-size: 14px; }
.mega-side a, .mega-side button { color: var(--ink-soft); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; }
.mega-side a:hover, .mega-side button:hover { color: var(--ink); }
.mega-big { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.mega-big a { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.2; text-decoration: none; }
.mega-big a:hover { color: var(--clay); }
.mega-cards { display: grid; gap: 12px; }
.mega-card { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--stone); padding: 12px; text-decoration: none; font-size: 14px; color: var(--ink-soft); }
.mega-card b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 2px; }
.mega-card:hover { border-color: var(--ink); }
.mega-card .mini { aspect-ratio: 4 / 3; min-height: 0; padding: 6px; font-size: 11px; }
.mega-card .mini .slot, .mega-card .mini b { font-size: 11px; }

/* “扫码咨询”悬停变形，参考探月“招生”按钮的变化，用墨色与陶土色 */
.btn.cta { position: relative; overflow: hidden; border-radius: 999px; padding: 8px 18px; isolation: isolate; }
.btn.cta::before { content: ""; position: absolute; inset: auto; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--clay); transform: translate(-50%, -50%) scale(0); transition: transform .35s ease; z-index: -1; }
.btn.cta:hover::before, .btn.cta:focus-visible::before { transform: translate(-50%, -50%) scale(18); }
.btn.cta:hover { background: var(--ink); }
.nav.over:not(.solid) .btn.cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav.over:not(.solid) .btn.cta:hover { color: var(--paper); }

/* 手机全屏菜单：毛玻璃浮层参考 IDEO，大字栏目参考 TKS */
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: rgba(43, 41, 38, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--paper); overflow-y: auto; }
.mobile-in { min-height: 100%; padding: 16px 20px 32px; display: grid; grid-template-rows: auto 1fr auto; gap: 28px; }
.mobile-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-top img { height: 28px; width: auto; }
.m-close { background: none; border: 0; color: var(--paper); font-size: 30px; line-height: 1; cursor: pointer; }
.m-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.m-list > li { border-bottom: 1px solid rgba(246, 243, 237, .18); }
.m-list summary, .m-list .m-top { display: block; padding: 14px 0; font-family: var(--serif); font-size: 26px; font-weight: 700; cursor: pointer; text-decoration: none; list-style: none; }
.m-list summary::-webkit-details-marker { display: none; }
.m-list summary::after { content: "+"; float: right; font-family: var(--sans); font-weight: 400; opacity: .7; }
.m-list details[open] summary::after { content: "–"; }
.m-list details ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.m-list details a { text-decoration: none; opacity: .85; }
.m-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); transition: background .2s, color .2s; white-space: nowrap; }
.btn:hover { background: #45413C; }
.btn.line { background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 7px 14px; font-size: 14px; }
.btn.on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.textlink { color: var(--ink); text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 4px; font-weight: 500; }

/* 照片位与真实照片 */
.media { position: relative; overflow: hidden; background: var(--stone); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ph { position: relative; background: repeating-linear-gradient(135deg, #EAE4DA 0 14px, #E4DDD2 14px 28px); border: 1px dashed #A99B88; display: grid; place-items: center; text-align: center; padding: 28px 20px; color: var(--ink-soft); font-size: 14px; }
.ph b { display: block; font-family: var(--serif); color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.ph .kind { position: absolute; left: 0; top: 0; background: var(--ink); color: var(--paper); font-size: 12px; padding: 2px 8px; letter-spacing: .04em; }
.ph .slot { display: block; margin-top: 6px; font-size: 12px; opacity: .8; }
.notch { clip-path: var(--notch); }

section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.sec-head > * { min-width: 0; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.sec-head .lead { justify-self: end; }
.rule { border-top: 1px solid var(--stone); }
.h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 32px; }

/* 首页首屏 */
.hero { padding: 72px 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: -200px; top: -240px; width: 680px; height: 680px; background: radial-gradient(closest-side, rgba(183, 110, 88, .16), transparent); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; position: relative; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(44px, 6.4vw, 88px); font-weight: 900; line-height: 1.12; }
.hero .sub { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); margin: 24px 0 36px; color: var(--ink-soft); }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .hand { margin-top: 28px; max-width: 18em; }
.hero-media { aspect-ratio: 5 / 4; }
.hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border-top: 1px solid var(--ink); }
.hero-strip div { padding: 22px 24px 0 0; }
.hero-strip b { font-family: var(--serif); font-size: 22px; display: block; margin-bottom: 4px; }
.hero-strip span { color: var(--ink-soft); font-size: 15px; }
.hero-strip .no { font-family: var(--serif); color: var(--clay); font-size: 14px; display: block; margin-bottom: 8px; }

/* 课程 */
.courses { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; }
.courses > * { min-width: 0; }
.course { background: var(--sheet); border: 1px solid var(--stone); padding: 36px; display: grid; gap: 20px; align-content: start; }
.course h3 { font-size: 30px; }
.course .tagline { color: var(--ink-soft); }
.days { list-style: none; margin: 0; padding: 0; }
.days li { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--stone); }
.days .d { font-family: var(--serif); color: var(--clay); font-size: 15px; }
.days b { font-family: var(--serif); font-size: 18px; display: block; }
.days span span, .days .desc { font-size: 14px; color: var(--ink-soft); }
.days.wide { border-bottom: 1px solid var(--stone); }
.days.wide li { grid-template-columns: 120px 220px 1fr; padding: 22px 0; }
.days.wide .desc { font-size: 15px; color: var(--ink); }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.topic { border: 1px solid var(--stone); padding: 16px; background: var(--paper); }
.topic b { font-family: var(--serif); font-size: 18px; display: block; }
.topic span { font-size: 14px; color: var(--ink-soft); }
.topic.big { padding: 24px; }
.topic.big b { font-size: 22px; }
.topic.big p { margin: 8px 0; font-size: 15px; }
.tag { display: inline-block; font-size: 12px; padding: 2px 10px; border: 1px solid var(--linen); color: #7A6A52; background: rgba(200, 181, 154, .14); }
.note { font-size: 14px; color: var(--ink-soft); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.rhythm { display: flex; flex-wrap: wrap; font-size: 13px; border: 1px solid var(--stone); margin-bottom: 32px; }
.rhythm span { padding: 8px 12px; border-right: 1px solid var(--stone); flex: 1 1 auto; text-align: center; }
.rhythm span:last-child { border-right: 0; }
.rhythm i { font-style: normal; color: var(--clay); display: block; font-family: var(--serif); }

/* 作品 */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.works > * { min-width: 0; }
.work { display: grid; gap: 12px; text-decoration: none; align-content: start; }
.work .cover { aspect-ratio: 4 / 3; clip-path: var(--notch); }
.work h3 { font-size: 22px; }
.work .by { font-size: 14px; color: var(--ink-soft); }
.work .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.work:hover h3 { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 5px; }
.remix { margin-top: 44px; padding: 22px 26px; border: 1px solid var(--ink); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.remix p { font-family: var(--serif); font-size: 19px; }

/* Agent 深色带 */
.dark { background: var(--ink); color: var(--paper); }
.dark .lead { color: #CFC7BB; }
.agent-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.agent-grid > * { min-width: 0; }
.agent-grid h2 { font-size: clamp(30px, 3.6vw, 46px); }
.feat { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 14px; }
.feat li { padding-left: 22px; position: relative; color: #E7E1D7; }
.feat li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 10px; border: 1.5px solid var(--clay); }
.dark .ph { background: repeating-linear-gradient(135deg, #36332F 0 14px, #3B3833 14px 28px); border-color: #6B635A; color: #CFC7BB; }
.dark .ph b { color: var(--paper); }
.dark .ph .kind { background: var(--clay); }
.agent-media { aspect-ratio: 16 / 10; }

/* 合作 */
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cols4 > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.cols4 i { font-style: normal; font-family: var(--serif); color: var(--clay); }
.cols4 b { font-family: var(--serif); font-size: 19px; display: block; margin: 4px 0; }
.cols4 span { font-size: 14px; color: var(--ink-soft); }
.dark .cols4 > div { border-top-color: var(--paper); }
.dark .cols4 span { color: #CFC7BB; }
.cols3 { grid-template-columns: repeat(3, 1fr); }

/* 咨询 */
.consult { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 56px; background: var(--sheet); border: 1px solid var(--stone); position: relative; overflow: hidden; }
.consult::after { content: ""; position: absolute; right: -160px; bottom: -200px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(183, 110, 88, .14), transparent); pointer-events: none; }
.consult > * { position: relative; z-index: 1; min-width: 0; }
.consult h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; }
.qr { width: 200px; height: 200px; padding: 12px; font-size: 13px; background: #fff; }
.qr img { width: 100%; height: 100%; object-fit: contain; }

/* 页脚 */
footer { padding: 56px 0 40px; border-top: 1px solid var(--stone); font-size: 14px; color: var(--ink-soft); }
footer .row { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
footer img { height: 40px; width: auto; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a { text-decoration: none; }
footer .fine { margin-top: 32px; font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
footer .pending { border: 1px dashed #A99B88; padding: 0 6px; }

/* 子页面 */
.page-head { padding: 72px 0 48px; border-bottom: 1px solid var(--stone); }
.page-head h1 { font-size: clamp(36px, 4.8vw, 60px); margin: 10px 0 18px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 32px; }
.gallery > * { min-height: 220px; }
.gallery > :first-child { grid-row: span 2; min-height: 456px; }
.gallery.three { grid-template-columns: 2fr 1fr; }
.detail { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.detail > * { min-width: 0; }
.stage { background: var(--sheet); border: 1px solid var(--stone); padding: 16px; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.stage iframe { width: 100%; aspect-ratio: 1 / 1; max-height: 640px; border: 1px solid var(--stone); background: #fff; display: block; }
.facts dl { margin: 0; display: grid; gap: 16px; }
.facts dt { font-size: 13px; color: var(--clay); font-weight: 500; }
.facts dd { margin: 2px 0 0; }
.facts .quote { font-family: var(--hand); font-size: 19px; line-height: 1.6; }
.platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.platform { border: 1px solid var(--stone); background: var(--sheet); padding: 28px; display: grid; gap: 12px; justify-items: start; }
.platform.mine { border: 2px solid var(--ink); }
.platform h3 { font-size: 22px; }
.platform p { color: var(--ink-soft); font-size: 14px; }
.faq details { border-top: 1px solid var(--stone); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--stone); }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 18px; font-weight: 700; }
.faq p { margin-top: 8px; color: var(--ink-soft); max-width: 46em; }

dialog { border: 1px solid var(--ink); padding: 0; max-width: 420px; width: calc(100% - 32px); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(43, 41, 38, .45); }
dialog .in { padding: 36px 32px 32px; display: grid; gap: 16px; justify-items: center; text-align: center; }
dialog .qr { width: 220px; height: 220px; }
dialog .x { position: absolute; right: 10px; top: 6px; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--ink); }

@media (max-width: 960px) {
  .hero-grid, .agent-grid, .courses, .detail, .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head .lead { justify-self: start; }
  .works { grid-template-columns: 1fr 1fr; }
  .cols4 { grid-template-columns: 1fr 1fr; }
  .days.wide li { grid-template-columns: 90px 1fr; }
  .days.wide .desc { grid-column: 2; }
  .primary { display: none; }
  .menu-btn { display: inline-block; }
  .nav .right .lang { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section { padding: 64px 0; }
  .works, .cols4, .cols3, .platforms, .hero-strip, .topics, .gallery, .gallery.three { grid-template-columns: minmax(0, 1fr); }
  .gallery > :first-child { grid-row: auto; min-height: 260px; }
  .consult { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .course { padding: 24px; }
  .nav .btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* 视频首屏：参考 Minerva 的整屏影像与左下角大标题；遮罩用品牌墨色由下往上压暗 */
.vhero { position: relative; min-height: min(100svh, 920px); display: grid; align-items: end; color: var(--paper); overflow: hidden; background: var(--ink); }
.vhero-media, .vhero-shade { position: absolute; inset: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-ph { width: 100%; height: 100%; display: grid; align-content: start; justify-items: end; text-align: right; color: #CFC7BB; font-size: 14px; background: repeating-linear-gradient(135deg, #34312D 0 18px, #3A3632 18px 36px); padding: 112px 32px 260px; }
.hero-ph > span:last-child { max-width: 360px; }
.hero-ph b { display: block; font-family: var(--serif); color: var(--paper); font-size: 16px; margin-bottom: 4px; }
.hero-ph .kind { position: absolute; right: 32px; top: 84px; background: var(--clay); color: var(--paper); font-size: 12px; padding: 2px 8px; }
.hero-ph .slot { display: block; margin-top: 6px; font-size: 12px; opacity: .8; }
.vhero-shade { background: linear-gradient(to top, rgba(43, 41, 38, .86) 0%, rgba(43, 41, 38, .45) 45%, rgba(43, 41, 38, .12) 72%, rgba(43, 41, 38, .38) 100%); pointer-events: none; }
.vhero-text { position: relative; padding-top: 160px; padding-bottom: 72px; }
.vhero h1 { font-size: clamp(48px, 8vw, 116px); font-weight: 700; line-height: 1.08; letter-spacing: .01em; }
.vhero .sub { font-family: var(--serif); font-size: clamp(18px, 1.9vw, 24px); margin: 22px 0 34px; color: #E7E1D7; }
.vhero .eyebrow { color: var(--linen); }
.vhero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.on-dark.line { background: transparent; color: var(--paper); border-color: rgba(246, 243, 237, .7); }
.btn.on-dark.line:hover { background: var(--paper); color: var(--ink); }
.video-toggle { position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(246, 243, 237, .6); background: rgba(43, 41, 38, .35); cursor: pointer; display: grid; place-items: center; }
.video-toggle span { width: 10px; height: 12px; border-left: 3px solid var(--paper); border-right: 3px solid var(--paper); }
.video-toggle[aria-pressed="true"] span { width: 0; height: 0; border-left: 11px solid var(--paper); border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* 理念区：原点动画 + 三种能力 */
.beliefs { padding: 72px 0 24px; }
.beliefs-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: center; }
.beliefs .hero-strip { margin-top: 0; }
.beliefs-mark { display: grid; gap: 18px; }

/* 原点动画 A：.play 时依次出现小点、描出 Logo 轮廓、填色、出现字标；未进入视口前保持静止的完成态 */
.origin { display: flex; align-items: center; gap: 18px; }
.origin svg { flex: none; overflow: visible; }
.origin .o-dot { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.origin .o-ring { fill: var(--clay); stroke: var(--clay); stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
.origin.small svg { width: 72px; height: 72px; }
.origin.small .o-word { height: 32px; width: auto; }
.origin.medium svg { width: 200px; height: 200px; }
.origin.large { justify-content: center; }
.origin.large svg { width: min(240px, 60vw); height: auto; aspect-ratio: 1; }
.origin.large .o-word { height: 58px; width: auto; }
.origin.play .o-dot { animation: o-dot 5.2s ease both; }
.origin.play .o-ring { animation: o-draw 5.2s ease both; }
.origin.play .o-word { animation: o-word 5.2s ease both; }
@keyframes o-dot { 0% { opacity: 1; transform: scale(0); } 12% { opacity: 1; transform: scale(1); } 46% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(0); } }
@keyframes o-draw { 0%, 16% { stroke-dashoffset: 1; fill-opacity: 0; } 64% { stroke-dashoffset: 0; fill-opacity: 0; } 82%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes o-word { 0%, 70% { opacity: 0; transform: translateX(-6px); } 90%, 100% { opacity: 1; transform: none; } }

/* 关于页 */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.serif-lead { font-family: var(--serif); color: var(--ink); font-size: 22px; }
.about-origin { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: center; }
.origin-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.origin-steps li { display: grid; grid-template-columns: 48px 140px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--stone); }
.origin-steps i { font-style: normal; font-family: var(--serif); color: var(--clay); }
.origin-steps b { font-family: var(--serif); font-size: 18px; }
.origin-steps span { color: var(--ink-soft); }
.draft-note { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mentor { display: grid; gap: 8px; align-content: start; }
.mentor .portrait { aspect-ratio: 4 / 5; min-height: 0; }
.mentor h3 { font-size: 22px; margin-top: 8px; }
.mentor .role { color: var(--clay); font-size: 14px; font-weight: 500; }

@media (max-width: 960px) {
  .beliefs-grid, .about-grid, .about-origin { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .team { grid-template-columns: 1fr 1fr; }
  .origin-steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .origin-steps span { grid-column: 2; }
}
@media (max-width: 640px) {
  .team { grid-template-columns: minmax(0, 1fr); }
  .vhero-text { padding-bottom: 56px; }
  .nav .btn.cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .origin.play .o-dot, .origin.play .o-ring, .origin.play .o-word { animation: none; }
  .drop, .btn.cta::before { transition: none; }
}

/* ===== 第三版：圆角、阴影、图片穿插与花纹背景 ===== */
:root {
  --r-lg: 22px; --r: 16px; --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(43, 41, 38, .05), 0 4px 14px rgba(43, 41, 38, .05);
  --shadow: 0 1px 2px rgba(43, 41, 38, .05), 0 14px 36px rgba(43, 41, 38, .09);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
.btn { border-radius: 999px; }
.media, .ph { border-radius: var(--r); overflow: hidden; }
.notch { clip-path: none; border-radius: var(--r-lg); }
.course { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border-color: transparent; }
.topic { border-radius: 12px; }
.work .cover { clip-path: none; border-radius: var(--r); box-shadow: var(--shadow-sm); transition: transform .35s var(--spring), box-shadow .3s; }
.work:hover .cover { transform: translateY(-4px); box-shadow: var(--shadow); }
.remix { border-radius: var(--r); border-color: var(--stone); background: var(--sheet); box-shadow: var(--shadow-sm); }
.consult { border-radius: 28px; box-shadow: var(--shadow-sm); }
.platform, .stage { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.stage iframe { border-radius: 12px; }
.qr { border-radius: 14px; }
dialog { border-radius: 24px; border-color: var(--stone); box-shadow: var(--shadow); }
.tag { border-radius: 999px; }
.faq details { border-radius: 0; }

/* 花纹背景：浅色区用纸张网格，深色区用墨色轨道线（Codex ImageGen 生成的装饰图） */
.page-head, .skills { background-image: linear-gradient(rgba(246, 243, 237, .55), rgba(246, 243, 237, .55)), url("../images/art/pattern-paper.jpg"); background-size: cover; background-position: center; }
.dark { background-image: linear-gradient(rgba(43, 41, 38, .55), rgba(43, 41, 38, .55)), url("../images/art/pattern-ink.jpg"); background-size: cover; background-position: center; }
.vhero { background: var(--ink) url("../images/art/pattern-ink.jpg") center / cover; }
.hero-ph { background: transparent; }

/* 下拉里的图片：打开时像 IDEO 的字母方块一样错落跳动后归位 */
.art { display: block; width: 100%; height: 100%; object-fit: cover; }
.drop.small { border-radius: var(--r); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; min-width: 380px; box-shadow: var(--shadow); border-color: transparent; }
.drop.small a { border-radius: var(--r-sm); }
.drop-art { border-radius: 12px; overflow: hidden; align-self: stretch; min-height: 150px; }
.drop .j1, .drop .j2, .drop .j3 { transform: translateY(28px) scale(.92); opacity: 0; transition: transform .5s var(--spring), opacity .3s; }
.has-menu.open .drop .j1, .has-menu.open .drop .j2, .has-menu.open .drop .j3 { transform: none; opacity: 1; }
.has-menu.open .drop .j2 { transition-delay: .06s; }
.has-menu.open .drop .j3 { transition-delay: .12s; }
.drop.mega { border-radius: 0 0 28px 28px; }
.mega-in { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr); }
.mega-big { gap: 22px; }
.mega-big li { display: grid; gap: 4px; }
.mega-big span { font-size: 14px; color: var(--ink-soft); max-width: 22em; }
.mega-tiles { position: relative; height: 230px; }
.mega-tiles .art { position: absolute; width: 38%; height: auto; aspect-ratio: 1; border-radius: var(--r); box-shadow: var(--shadow); }
.mega-tiles .j1 { left: 0; top: 0; }
.mega-tiles .j2 { left: 31%; top: 56px; z-index: 2; }
.mega-tiles .j3 { left: 62%; top: 12px; }
.has-menu.open .mega-tiles .j1 { transform: translateY(0) rotate(-2deg); }
.has-menu.open .mega-tiles .j2 { transform: translateY(0); }
.has-menu.open .mega-tiles .j3 { transform: translateY(0) rotate(2deg); }
.mega-tiles .j1 { transform: translateY(56px) rotate(-2deg) scale(.92); }
.mega-tiles .j3 { transform: translateY(-28px) rotate(2deg) scale(.92); }

/* 能力区：参考 TKS 的散落小卡，标题居中，卡片随滚动错落移动 */
.skills { padding: 0; overflow: hidden; }
.skills-in { position: relative; min-height: 860px; display: grid; place-items: center; }
.skills-title { text-align: center; display: grid; justify-items: center; gap: 14px; max-width: 30em; position: relative; z-index: 2; padding: 120px 0; }
.skills-title h2 { font-size: clamp(34px, 4.6vw, 60px); }
.skills-title .origin { justify-content: center; }
.tile { position: absolute; width: 188px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 16px 18px; display: grid; gap: 4px; will-change: transform; }
.tile b { font-family: var(--serif); font-size: 19px; margin-top: 18px; }
.tile span { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.tile-mark { width: 14px; height: 14px; }
.art-tile { padding: 0; overflow: hidden; width: 168px; aspect-ratio: 1; }
.t1 { left: 2%; top: 9%; } .t2 { left: 26%; top: 3%; } .t3 { right: 3%; top: 12%; }
.t4 { left: 6%; bottom: 10%; } .t5 { left: 40%; bottom: 3%; } .t6 { right: 6%; bottom: 13%; }
.t7 { right: 24%; top: 2%; width: 140px; } .t8 { left: 22%; bottom: 22%; width: 120px; }

/* 导师卡片：参考原稿的圆角卡片，左侧头像与标签，右侧简介 */
.team-group + .team-group { margin-top: 56px; }
.team-head { font-family: var(--sans); font-size: 15px; letter-spacing: .08em; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--stone); padding-bottom: 12px; margin-bottom: 24px; }
.team-head span { font-family: var(--serif); font-size: 26px; color: var(--clay); letter-spacing: .02em; font-weight: 700; }
.team { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mentor { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 36px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px 32px; }
.mentor .avatar { width: 140px; height: 140px; border-radius: 50%; grid-row: 1; justify-self: center; padding: 8px; font-size: 11px; }
.mentor .avatar .kind, .mentor .avatar .slot { display: none; }
.mentor .who { grid-row: 2; text-align: center; }
.mentor .bio { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--stone); padding-left: 32px; display: grid; gap: 10px; align-content: center; font-size: 15px; color: var(--ink-soft); }
.mentor h4 { font-family: var(--serif); font-size: 24px; margin: 8px 0 0; color: var(--clay); }
.mentor .role { color: var(--ink-soft); font-size: 14px; font-weight: 400; }
.mtags { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink); }
.mtags li::before { content: "· "; color: var(--clay); }

@media (max-width: 960px) {
  .mega-in { grid-template-columns: 150px minmax(0, 1fr); }
  .mega-tiles { display: none; }
  .skills-in { min-height: 0; display: block; padding: 72px 0; }
  .skills-title { padding: 0 0 32px; margin: 0 auto; }
  .tile { position: static; width: auto; transform: none !important; }
  .skills-in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .skills-title { grid-column: 1 / -1; }
  .art-tile { width: auto; }
  .mentor { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .mentor .bio { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--stone); padding: 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drop .j1, .drop .j2, .drop .j3, .work .cover { transition: none; }
  .tile { transform: none !important; }
}
.skills-title { max-width: 40em; }
.skills-title h2 { font-size: clamp(34px, 4.2vw, 56px); }
.mentor .avatar > span { font-size: 0; }
.mentor .avatar b { font-size: 12px; margin: 0; }
.mentor .media.avatar { padding: 0; box-shadow: 0 0 0 6px var(--sheet), 0 0 0 7px var(--stone); }
.mentor .media.avatar img { object-position: center 22%; }

/* 能力区紧凑版：整块高度控制在一屏内，所有小卡离上下边至少 40px，滚动位移限制在 ±16px */
.skills-in { min-height: 0; height: clamp(560px, calc(100svh - 140px), 640px); }
.skills-title { padding: 0; gap: 10px; max-width: 36em; }
.skills-title h2 { font-size: clamp(30px, 3.6vw, 48px); }
.skills-title .lead { font-size: 16px; }
.skills-title .hand { font-size: 17px; }
.origin.small svg { width: 56px; height: 56px; }
.tile { width: 168px; padding: 13px 14px 14px; gap: 2px; }
.tile b { font-size: 17px; margin-top: 10px; }
.tile span { font-size: 12.5px; }
.tile-mark { width: 12px; height: 12px; }
.t1 { left: 1%; top: 13%; } .t2 { left: 21%; top: 7%; } .t3 { right: 1%; top: 16%; }
.t4 { left: 3%; top: auto; bottom: 12%; } .t5 { right: 21%; left: auto; bottom: 8%; } .t6 { right: 3%; bottom: 20%; }
.t7 { right: 22%; top: 8%; width: 116px; } .t8 { left: 21%; bottom: 10%; width: 104px; }
.tile.art-tile { padding: 0; }

/* 能力区 · 吸附与发牌（参考 TKS）：外层留出滚动距离，内层 sticky 固定一屏 */
@media (min-width: 961px) {
  .skills { height: calc(100svh - 72px + 100vh); overflow: visible; }
  .skills-pin { position: sticky; top: 72px; height: calc(100svh - 72px); display: grid; align-content: center; overflow: hidden; }
  .skills-in { height: min(100%, 720px); width: 100%; }
}
.skills.deal-ready .tile {
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(.74);
  transition: transform .8s cubic-bezier(.2, .9, .25, 1.12) var(--delay, 0ms), box-shadow .4s ease var(--delay, 0ms);
  box-shadow: 0 2px 6px rgba(43, 41, 38, .10);
}
.skills.deal-ready.dealt .tile { transform: none; box-shadow: var(--shadow); }
.skills.deal-ready:not(.dealt) .tile[data-deal="0"] { z-index: 9; } .skills.deal-ready:not(.dealt) .tile[data-deal="1"] { z-index: 8; }
.skills.deal-ready:not(.dealt) .tile[data-deal="2"] { z-index: 7; } .skills.deal-ready:not(.dealt) .tile[data-deal="3"] { z-index: 6; }
.skills.deal-ready:not(.dealt) .tile[data-deal="4"] { z-index: 5; } .skills.deal-ready:not(.dealt) .tile[data-deal="5"] { z-index: 4; }
.skills.deal-ready:not(.dealt) .tile[data-deal="6"] { z-index: 3; } .skills.deal-ready:not(.dealt) .tile[data-deal="7"] { z-index: 2; }
.skills.deal-ready.dealt .tile { transition-delay: var(--delay, 0ms); }
.skills.deal-ready:not(.dealt) .tile { transition-duration: .45s; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .skills.deal-ready .tile { transform: none; transition: none; } }
@media (min-width: 961px) {
  .skills-pin { display: flex; align-items: center; }
  .skills-in { height: min(calc(100svh - 72px), 720px); }
}
/* 矮屏（如 13 寸笔记本缩放后）：标题与卡片收紧一档，去掉两张图片卡，避免压到标题 */
@media (min-width: 961px) and (max-height: 700px) {
  .skills-title h2 { font-size: 34px; }
  .skills-title .hand { display: none; }
  .skills-title .origin.small svg { width: 44px; height: 44px; }
  .tile { width: 150px; }
  .tile span { font-size: 12px; }
  .t7, .t8 { display: none; }
  .t2 { left: 18%; top: 5%; } .t5 { right: 18%; bottom: 5%; }
}

/* Agent 页：深色首屏叠 Codex 绘制的背景，真实截图套桌面窗口外框；“真实运行”重放复刻 Agent 深色界面 */
.agent-hero { background: var(--ink) url("../images/art/agent-backdrop.jpg") center / cover no-repeat; color: var(--paper); padding: 96px 0 240px; overflow: hidden; }
.agent-hero > .wrap > div { max-width: 680px; }
.agent-hero h1 { font-size: clamp(34px, 3.7vw, 52px); margin: 12px 0 18px; }
.story-h { margin: 8px 0 48px; }
.agent-hero .lead { color: #D9D1C5; }
.agent-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.appwin { margin: 0; background: #2A2826; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(43, 41, 38, .08), 0 24px 60px rgba(43, 41, 38, .22); }
.appwin-bar { height: 26px; display: flex; gap: 7px; align-items: center; padding: 0 12px; background: #252321; }
.appwin-bar i { width: 10px; height: 10px; border-radius: 50%; background: #4A4641; }
.appwin img { width: 100%; height: auto; }
.agent-wide { position: relative; margin-top: -176px; padding: 0; }
.wide-shot { aspect-ratio: 16 / 9; background: #2A2826; box-shadow: 0 1px 2px rgba(43, 41, 38, .08), 0 30px 70px rgba(43, 41, 38, .22); }

.rp { --rp-bg: #2A2826; --rp-line: #3C3935; --rp-muted: #A39B90; --rp-text: #E9E3DA; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 620px; margin-top: 8px; background: var(--rp-bg); color: var(--rp-text); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(43, 41, 38, .08), 0 30px 70px rgba(43, 41, 38, .22); font-size: 14px; line-height: 1.75; }
.rp-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--rp-line); min-width: 0; }
.rp-head { display: grid; gap: 10px; padding: 16px 22px 0; border-bottom: 1px solid var(--rp-line); }
.rp-head b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tabs { display: flex; gap: 22px; font-size: 13px; color: var(--rp-muted); }
.rp-tabs span { padding-bottom: 8px; }
.rp-tabs .on { color: var(--rp-text); box-shadow: inset 0 -1.5px 0 var(--rp-text); }
.rp-scroll { overflow-y: auto; padding: 20px 24px 24px; scrollbar-width: thin; scrollbar-color: #4A4641 transparent; }
.rp-user { margin-left: auto; max-width: 90%; width: fit-content; background: #3A3734; border-radius: 16px; padding: 12px 16px; }
.rp-lines { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.rp-tool { display: flex; align-items: center; gap: 8px; color: var(--rp-muted); font-size: 13px; }
.rp-ico { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; flex: none; }
.rp code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: #3A3734; padding: 1px 6px; border-radius: 5px; }
.rp-done { margin-top: 18px; border-top: 1px solid var(--rp-line); padding-top: 14px; display: grid; gap: 10px; }
.rp-muted { color: var(--rp-muted); font-size: 13px; }
.rp-files { border: 1px solid var(--rp-line); border-radius: 12px; display: grid; font-size: 13px; }
.rp-files b { font-weight: 500; padding: 9px 14px; border-bottom: 1px solid var(--rp-line); }
.rp-files span { display: flex; justify-content: space-between; padding: 5px 14px; color: var(--rp-muted); }
.rp-files i { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #D8CDBE; }
.rp-think { display: none; align-items: center; gap: 8px; color: var(--rp-muted); font-size: 13px; margin-top: 14px; }
.rp.playing .rp-think { display: flex; }
.rp-think::before { content: ""; width: 11px; height: 11px; border-radius: 4px; border: 2px solid var(--clay); animation: rp-spin 1.4s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-composer { margin: 0 16px 16px; border: 1px solid var(--rp-line); background: #33302D; border-radius: 16px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; color: #8C857B; font-size: 13px; }
.rp-composer span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-model { color: #CFC7BB; white-space: nowrap; }
.rp-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.rp-phead { color: var(--rp-muted); font-size: 13px; padding: 16px 20px; border-bottom: 1px solid var(--rp-line); }
.rp-pbody { position: relative; overflow: hidden; background: #F3EFE8; }
.rp-pbody img { width: 100%; height: auto; }
.rp-wait { position: absolute; inset: 0; display: grid; place-items: center; background: #2E2B28; color: #8C857B; font-size: 13px; transition: opacity .5s ease; }
.rp .rp-result:not(.in) + .rp-wait { opacity: 1; }
.rp-result.in + .rp-wait, .rp:not(.js) .rp-wait { opacity: 0; pointer-events: none; }
.rp.js [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.rp.js [data-step].in { opacity: 1; transform: none; }
.rp-replay { position: absolute; right: 18px; bottom: 18px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.rp.finished .rp-replay, .rp-replay:focus-visible { opacity: 1; pointer-events: auto; }
.replay-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); max-width: 60em; }

.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 80px; }
.story-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.story-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.story-row:nth-child(even) .story-text { order: 2; }
.story-text i { font-style: normal; font-family: var(--serif); color: var(--clay); font-size: 15px; }
.story-text h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 6px 0 12px; }
.story-text p { color: var(--ink-soft); font-size: 17px; max-width: 26em; }

.help-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.help-main { display: grid; gap: 18px; }
.help-main b, .help-list b { font-family: var(--serif); font-size: 20px; display: block; margin-bottom: 4px; }
.help-main span, .help-list span { color: #CFC7BB; font-size: 15px; }
.help-list > div { border-top: 1px solid rgba(246, 243, 237, .25); padding: 18px 0; }
.help-list > div:first-child { border-top-color: var(--paper); }
.help-main .appwin { box-shadow: 0 0 0 1px rgba(246, 243, 237, .1), 0 30px 70px rgba(0, 0, 0, .4); }

.parents-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.parents { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.parents dt { font-family: var(--serif); font-weight: 700; font-size: 18px; border-top: 2px solid var(--ink); padding-top: 12px; }
.parents dd { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; }

@media (max-width: 960px) {
  .help-grid, .parents-grid { grid-template-columns: minmax(0, 1fr); }
  .agent-hero { padding: 64px 0 120px; }
  .agent-wide { margin-top: -72px; }
}
@media (max-width: 860px) {
  .rp { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rp-scroll { max-height: 460px; }
  .rp-chat { border-right: 0; border-bottom: 1px solid var(--rp-line); }
  .story-row, .story-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .story-row:nth-child(even) .story-text { order: 0; }
  .story { gap: 52px; }
}
@media (max-width: 520px) { .parents { grid-template-columns: minmax(0, 1fr); } }

/* 课程列表：卡片数量不固定，自动换行；筹备中的课程用虚线边与“筹备中”标签区分 */
.courses { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.course-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag.soon { border-style: dashed; color: var(--clay); border-color: var(--clay); background: transparent; }
.course.is-soon { background: transparent; border: 1px dashed var(--linen); box-shadow: none; }
.mega-big small { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--clay); vertical-align: middle; margin-left: 6px; }
.course-index { border-bottom: 1px solid var(--stone); background: var(--paper); }
.course-index .wrap { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.course-index a { display: grid; gap: 2px; text-decoration: none; padding: 10px 18px; border: 1px solid var(--stone); border-radius: 999px; background: #fff; }
.course-index a:hover { border-color: var(--ink); }
.course-index b { font-family: var(--serif); font-size: 16px; }
.course-index span { font-size: 12px; color: var(--ink-soft); }
.sec-head .tag.soon { margin-bottom: 10px; }

/* AI 办公室：四个主题，每个主题两节课 */
.themes { display: grid; gap: 40px; margin-top: 8px; }
.theme { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; border-top: 1px solid var(--stone); padding-top: 28px; }
.theme-head h3 { font-size: 26px; }
.theme-head p { color: var(--ink-soft); font-size: 15px; margin: 6px 0 0; }
.lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lesson { background: #fff; border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.lesson .num { font-family: var(--serif); color: var(--clay); font-size: 14px; }
.lesson h4 { font-family: var(--serif); font-size: 21px; margin: 0; }
.lesson dl { margin: 6px 0 0; display: grid; gap: 8px; }
.lesson dl div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; font-size: 14px; }
.lesson dt { color: var(--ink-soft); }
.lesson dd { margin: 0; }
@media (max-width: 960px) {
  .theme { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .lessons { grid-template-columns: minmax(0, 1fr); }
  .lesson dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 首页作品：三份相同内容首尾相接，整条向右匀速移动；悬停或键盘聚焦时暂停，减少动态效果时改为横向滚动 */
.works-marquee { overflow: hidden; padding: 6px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee-right calc(var(--n, 5) * 9s) linear infinite; }
.marquee-set { display: flex; gap: 28px; padding-right: 28px; }
.marquee-set .work { width: 340px; flex: none; }
.works-marquee:hover .marquee-track, .works-marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-right { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
@media (max-width: 760px) { .marquee-set .work { width: 270px; } .marquee-set { gap: 18px; padding-right: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .works-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; padding: 0 16px; }
  .marquee-set[aria-hidden] { display: none; }
}

/* 能力区：6 张文字卡 + 6 张照片卡，围绕标题摆放 */
.photo-tile { padding: 0; overflow: hidden; width: 128px; aspect-ratio: 1; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t1 { left: 0; top: 10%; } .t2 { left: 19%; top: 3%; } .t3 { right: 0; top: 13%; }
.t4 { left: 1%; top: auto; bottom: 8%; } .t5 { left: 41%; right: auto; bottom: 1%; } .t6 { right: 19%; bottom: 5%; }
.p1 { left: 40%; top: 0; width: 112px; } .p2 { right: 21%; top: 4%; width: 124px; }
.p3 { left: 2%; top: 41%; width: 116px; } .p4 { right: 2%; top: 43%; width: 120px; }
.p5 { left: 21%; bottom: 3%; width: 112px; } .p6 { right: 1%; bottom: 7%; width: 118px; }
.skills.deal-ready:not(.dealt) .tile[data-deal="8"] { z-index: 1; } .skills.deal-ready:not(.dealt) .tile[data-deal="9"] { z-index: 1; }
.skills.deal-ready:not(.dealt) .tile[data-deal="10"] { z-index: 1; } .skills.deal-ready:not(.dealt) .tile[data-deal="11"] { z-index: 1; }
@media (min-width: 961px) and (max-height: 700px) {
  .p1, .p3, .p4 { display: none; }
  .t2 { left: 18%; top: 4%; } .t5 { left: 41%; right: auto; bottom: 1%; }
}
@media (max-width: 960px) {
  .photo-tile { width: auto; }
  .skills-in { grid-template-columns: repeat(3, 1fr); height: auto; padding: 56px 24px; }
}
@media (max-width: 560px) { .skills-in { grid-template-columns: 1fr 1fr; padding: 48px 16px; } }

/* 合作理念：左侧标题与品牌理念句，右侧编号列表；首页与合作页共用列表样式 */
.partner-idea { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.partner-idea h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 8px 0 16px; }
.pquote { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; color: var(--clay); margin: 28px 0 24px; }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; }
.ideas li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-top: 1px solid var(--stone); }
.ideas li:last-child { border-bottom: 1px solid var(--stone); }
.ideas .n { grid-row: span 2; font-family: var(--serif); color: var(--clay); font-size: 15px; padding-top: 4px; }
.ideas b { font-family: var(--serif); font-size: 21px; }
.ideas li > span:last-child { color: var(--ink-soft); font-size: 15px; }
#model .ideas { grid-template-columns: 1fr 1fr; column-gap: 40px; }
#model .ideas li:nth-last-child(2) { border-bottom: 1px solid var(--stone); }
@media (max-width: 960px) {
  .partner-idea { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #model .ideas { grid-template-columns: minmax(0, 1fr); }
  #model .ideas li:nth-last-child(2) { border-bottom: 0; }
}

/* 首页课程卡：能悬停的大屏默认只显示概要标签，悬停或聚焦时展开完整安排；触屏和窄屏始终显示完整安排 */
.courses { align-items: start; }
.course { gap: 14px; }
.course .tagline { margin: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13px; padding: 4px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--stone); color: var(--ink-soft); }
.course-sum, .course-more { display: grid; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.course-sum > div, .course-more > div { overflow: hidden; min-height: 0; }
.course-sum { grid-template-rows: 0fr; opacity: 0; }
.course-more { grid-template-rows: 1fr; opacity: 1; }
@media (hover: hover) and (min-width: 961px) {
  .course-sum { grid-template-rows: 1fr; opacity: 1; }
  .course-more { grid-template-rows: 0fr; opacity: 0; }
  .course { transition: box-shadow .3s ease, transform .3s ease; }
  .course:hover, .course:focus-within { box-shadow: var(--shadow); transform: translateY(-2px); }
  .course:hover .course-sum, .course:focus-within .course-sum { grid-template-rows: 0fr; opacity: 0; }
  .course:hover .course-more, .course:focus-within .course-more { grid-template-rows: 1fr; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .course-sum, .course-more, .course { transition: none; } }

/* 首页 Agent 截图是深色界面，放在深色区块上需要描边和投影才能看出窗口轮廓 */
.dark .agent-media { box-shadow: 0 0 0 1px rgba(246, 243, 237, .22), 0 0 0 7px rgba(246, 243, 237, .05), 0 36px 90px rgba(0, 0, 0, .55); }

/* 作品体验区：iframe 被浏览器拦截时，用封面和“在新页面打开”盖住空白框 */
.stage-frame { position: relative; }
.stage-fallback { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--stone); }
.stage-fallback[hidden] { display: none; }
.stage-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: blur(1px); }
.stage-fallback > div { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; padding: 24px; background: rgba(246, 243, 237, .92); border-radius: var(--r); box-shadow: var(--shadow-sm); max-width: 80%; }
.stage-fallback p { margin: 0; color: var(--ink-soft); font-size: 15px; }