/* NewMate product introduction, 2026-10-23. Reuses the approved brand tokens. */
.intro-eyebrow { color: var(--color-primary); font: 700 .75rem/1.5 var(--font-mono); letter-spacing: .1em; margin-bottom: 1rem; }
.intro-hero { padding: 4.5rem 0 3.5rem; overflow: hidden; background: linear-gradient(115deg,#f9fcfb,#fffef9); }
.intro-hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 2rem; align-items: center; }
.intro-hero h1 { font-size: clamp(2.1rem,3.6vw,3.4rem); line-height: 1.38; letter-spacing: -.04em; color: var(--color-navy); }
.intro-hero h1 span { color: var(--color-primary); }
.intro-lead { font-size: 1.06rem; color: var(--color-text-muted); line-height: 1.95; max-width: 39rem; margin: 1.5rem 0 1.8rem; }
.intro-hero .hero-cta-group { justify-content: flex-start; }
.intro-tags { list-style: none; display: flex; gap: .7rem 1.4rem; flex-wrap: wrap; margin-top: 1.7rem; font-size: .82rem; color: #4f6960; }
.intro-tags li::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #b68832; margin: 0 .5rem .15rem 0; }
.intro-hero-art { position: relative; min-width: 0; }
.intro-hero-art img { width: 100%; height: 410px; object-fit: cover; object-position: 72% 50%; mix-blend-mode: multiply; }
.intro-hero-art span { display: block; text-align: right; color: #6b8177; font-size: .8rem; letter-spacing: .08em; }
.intro-section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.intro-section-top h2,.intro-data-grid h2,.intro-contact h2 { font-size: clamp(1.7rem,2.6vw,2.25rem); line-height: 1.5; color: var(--color-navy); }
.intro-section-top>p { max-width: 22rem; color: var(--color-text-muted); font-size: .92rem; line-height: 1.8; }
.intro-presentation { padding-top: 4rem; background: #f0f6f3; }
.deck { background: #fff; border: 1px solid #d4e2da; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px #143a2920; scroll-margin-top: 90px; }
.deck:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.deck-topbar,.deck-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.3rem; }
.deck-topbar { border-bottom: 1px solid var(--color-border-subtle); background: #fff; }
.deck-topbar>div { display: flex; align-items: center; gap: .65rem; }
.deck-topbar strong { font-size: .95rem; color: var(--color-navy); }
.deck-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.deck-edition { color: var(--color-text-muted); font-size: .75rem; border-left: 1px solid #cbdad2; padding-left: .65rem; }
.deck-actions button,.deck-paging button,.deck-dialog button { min-height: 40px; padding: .4rem .9rem; border: 1px solid #d6e2dc; border-radius: 6px; color: var(--color-primary); background: #fff; font-weight: 600; font-size: .82rem; }
.deck button:hover,.deck-dialog button:hover { background: #edf7f2; }
.deck button:focus-visible,.deck-dialog button:focus-visible { outline: 3px solid #b68832; outline-offset: -3px; }
.deck-chapters { display: flex; overflow-x: auto; gap: 1.4rem; padding: 0 1.3rem; border-bottom: 1px solid #e0e9e3; scrollbar-width: thin; }
.deck-chapters button { padding: .9rem 0; color: var(--color-text-muted); font-size: .82rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.deck-chapters button[aria-current] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }
.deck-figure { position: relative; background: #fcfcf9; }
.deck-figure.is-loading img,.deck-dialog-scroll.is-loading img,.deck-dialog-scroll.is-load-error img { opacity: 0; }
.deck-figure.is-loading::after,.deck-dialog-scroll.is-loading::after,.deck-dialog-scroll.is-load-error::after { content: '正在加载本页…'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .9rem; color: #537063; white-space: nowrap; pointer-events: none; }
.deck-dialog-scroll.is-loading::after,.deck-dialog-scroll.is-load-error::after { color: #dce8df; }
.deck-dialog-scroll.is-load-error::after { content: '本页大图加载失败，请关闭后重试'; }
.deck-screen { display: block; width: 100%; aspect-ratio: 16/9; padding: 0; touch-action: pan-y pinch-zoom; cursor: zoom-in; }
.deck-screen img { display: block; width: 100%; height: 100%; object-fit: contain; }
#deckLoadError { position: absolute; inset: 0; background: #fcfcf9f2; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 2rem; }
#deckRetry { color: var(--color-primary); text-decoration: underline; }
.deck-progress { height: 3px; background: #e0eae3; }
.deck-progress span { height: 100%; display: block; width: 3.2258%; background: linear-gradient(90deg,#087f7b,#b68832); transition: width .25s; }
.deck-page-info { display: flex; gap: 1rem; align-items: center; min-width: 0; }
#deckCount { color: var(--color-primary); font: 700 .88rem var(--font-mono); white-space: nowrap; }
#deckSection { font-size: .78rem; color: var(--color-text-muted); }
.deck-paging { display: flex; gap: .5rem; align-items: center; }
.deck-paging button { font-size: 1.1rem; min-width: 44px; }
.deck-paging select { width: 210px; max-width: 35vw; min-height: 40px; font-size: .8rem; background: #f5f8f6; color: var(--color-text-main); border: 1px solid #d6e2dc; border-radius: 6px; padding: .4rem .6rem; }
.deck-outline { border-top: 1px solid #e3ebe6; }
.deck-narration { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.3rem; border-top: 1px solid #e3ebe6; color: #467065; font-size: .78rem; }
#narrationTime { margin-left: auto; font: .75rem var(--font-mono); white-space: nowrap; }
.deck-script { padding: .3rem 1.3rem 1.3rem; font-size: .92rem; line-height: 1.95; color: var(--color-text-muted); }
.deck-outline summary,.deck-text summary { padding: .8rem 1.3rem; color: var(--color-primary); cursor: pointer; font-size: .85rem; }
.deck-outline summary span { color: var(--color-text-muted); margin-left: .7rem; font-size: .75rem; }
.deck-thumbnails { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .75rem; padding: .5rem 1.3rem 1.3rem; max-height: 400px; overflow-y: auto; }
.deck-thumbnails button { border: 2px solid transparent; border-radius: 5px; padding: 3px; min-width: 0; text-align: left; }
.deck-thumbnails button[aria-current] { border-color: var(--color-primary); background: #edf7f2; }
.deck-thumbnails img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; }
.deck-thumbnails span { display: block; font-size: .68rem; padding: .35rem .2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.deck-reading { margin-top: 1.7rem; }
.deck-reading h3 { font-size: 1.15rem; color: var(--color-navy); }
.deck-reading p { margin-top: .4rem; font-size: .9rem; color: var(--color-text-muted); }
.deck-text { margin-top: 1.1rem; border: 1px solid #d7e3dc; border-radius: 8px; background: #ffffffa0; }
#deckText { padding: .3rem 1.3rem 1.3rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4rem; }
#deckText h4 { color: var(--color-navy); font-size: .92rem; margin-bottom: .4rem; }
#deckText p { color: var(--color-text-muted); font-size: .86rem; line-height: 1.8; }
#deckText strong { display: block; font-size: .8rem; color: var(--color-primary); margin-top: .65rem; }
.intro-footnote { font-size: .76rem; color: #64796d; margin-top: 1rem; line-height: 1.8; }
.intro-collaboration { background: linear-gradient(135deg,#fffefb,#f3f9f5); scroll-margin-top: 78px; }
.collaboration-film { margin: 0; border: 1px solid #d4e2da; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 48px #143a2912; }
.collaboration-film-bar { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; color: #537063; font-size: .8rem; }
.collaboration-film-bar>span:first-child { display: flex; align-items: center; gap: .65rem; color: var(--color-navy); font-weight: 600; }
.collaboration-film-actions { display: flex; align-items: center; gap: 1rem; }
.collaboration-film-actions .btn { font-size: .78rem; min-height: 36px; }
.collaboration-film video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #142b25; }
.collaboration-film video:focus-visible { outline: 3px solid #b68832; outline-offset: -3px; }
.collaboration-film figcaption { padding: .9rem 1.3rem; color: #64796d; font-size: .78rem; line-height: 1.8; border-top: 1px solid #e3ebe6; }
.collaboration-error { padding: 1rem 1.3rem; color: #8a4229; background: #fff5ee; }
.collaboration-steps { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin: 2rem 0 0; padding: 0; }
.collaboration-steps li { border-top: 2px solid #b7d1c3; padding-top: 1.2rem; }
.collaboration-steps h3 { color: var(--color-navy); font-size: 1.1rem; margin-bottom: .6rem; }
.collaboration-steps p { color: var(--color-text-muted); font-size: .9rem; line-height: 1.85; }
.intro-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.intro-value-grid article { border-top: 2px solid #93b5a5; padding-top: 1.5rem; }
.intro-index { display: block; color: #a97c2e; font: 600 .8rem var(--font-mono); margin-bottom: 1rem; }
.intro-value-grid h3 { font-size: 1.2rem; color: var(--color-navy); margin-bottom: .9rem; }
.intro-value-grid p,.intro-step p { color: var(--color-text-muted); font-size: .94rem; line-height: 1.9; }
.intro-value-grid strong,.intro-step strong { display: block; font-size: .81rem; line-height: 1.7; color: var(--color-primary); margin-top: 1.2rem; }
.intro-data-grid { display: grid; grid-template-columns: .9fr 1fr; gap: 4rem; align-items: center; }
.intro-data-art { position: relative; background: #e5f0e9; border-radius: 12px; overflow: hidden; }
.intro-data-art img { width: 100%; height: 540px; object-fit: cover; display: block; }
.intro-data-art span { position: absolute; bottom: 1.5rem; left: 1.5rem; font: 700 .75rem var(--font-mono); letter-spacing: .08em; color: #113d32; background: #ffffffe6; padding: .7rem 1rem; }
.intro-data-row { display: flex; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid #dce6df; }
.intro-data-row>span { color: #b68832; font: 700 .8rem var(--font-mono); padding-top: .25rem; }
.intro-data-row h3 { font-size: 1.05rem; color: var(--color-primary); margin-bottom: .5rem; }
.intro-data-row p { color: var(--color-text-muted); font-size: .92rem; line-height: 1.85; }
#scenarios .scenario-tabs { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
#scenarios .scenario-tab-btn { flex: 1 1 auto; padding: .9rem 1rem; border: 1px solid #d6e2dc; border-radius: 6px; font-size: .9rem; }
#scenarios .scenario-tab-btn.is-active { background: var(--color-primary); color: #fff; }
#scenarios .scenario-pane { background: #fff; }
.scenario-pane>h3 { font-size: 1.4rem; color: var(--color-navy); }
.scenario-description { margin: .7rem 0 1.8rem; color: var(--color-text-muted); font-size: .95rem; line-height: 1.8; }
.intro-step { border-top: 1px solid #dce6df; padding-top: 1rem; }
.intro-step h4 { font-size: 1.05rem; margin-bottom: .7rem; color: var(--color-navy); }
.intro-example-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.intro-example-pair article { border-left: 2px solid #b68832; padding-left: 1.4rem; }
.intro-example-pair span { font-size: .75rem; color: #8e6c2b; }
.intro-example-pair h3 { font-size: 1.1rem; margin: .4rem 0; color: var(--color-navy); }
.intro-example-pair p { font-size: .9rem; color: var(--color-text-muted); line-height: 1.85; }
.intro-assets { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid #d5e2d9; border-radius: 8px; background: #fff; overflow: hidden; }
.intro-assets>div { padding: 1.6rem 1rem; border-right: 1px solid #d5e2d9; }
.intro-assets>div:last-child { border: 0; }
.intro-assets span { font: .8rem var(--font-mono); color: #a97c2e; }
.intro-assets h3 { margin-top: .8rem; font-size: 1.05rem; color: var(--color-navy); }
.intro-evolution { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 2.5rem; }
.intro-evolution article { padding-top: 1rem; border-top: 2px solid #bad3c5; }
.intro-evolution span { font-size: .8rem; color: var(--color-primary); }
.intro-evolution h3 { font-size: 1.1rem; color: var(--color-navy); margin: .65rem 0; }
.intro-evolution p,.intro-boundary { font-size: .9rem; color: var(--color-text-muted); line-height: 1.85; }
.intro-boundary { margin-top: 2rem; padding: 1.2rem 1.4rem; border-left: 2px solid #b68832; background: #faf6ec; }
.intro-contact { background: linear-gradient(120deg,#eef7f2,#fcf9f0); text-align: center; }
.intro-contact>div>p:not(.intro-eyebrow) { margin: 1rem auto 1.6rem; max-width: 42rem; color: var(--color-text-muted); line-height: 1.9; }
.intro-contact .hero-cta-group { justify-content: center; }
.deck-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 0; background: #182b2a; color: #fff; }
.deck-dialog[open] { display: flex; flex-direction: column; }
.deck-dialog::backdrop { background: #132622ed; }
.deck-dialog-toolbar { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; padding: .7rem 1.2rem; border-bottom: 1px solid #ffffff24; }
.deck-dialog-toolbar strong { margin-right: auto; font-size: .9rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.deck-dialog-toolbar>span { font: .85rem var(--font-mono); white-space: nowrap; color: #c6d9cc; }
.deck-dialog button { flex-shrink: 0; }
.deck-dialog-scroll { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; padding: 1rem; }
.deck-dialog-scroll img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100dvh - 150px); object-fit: contain; }
.deck-dialog-scroll.is-zoomed { display: block; }
.deck-dialog-scroll.is-zoomed img { width: 2400px; max-width: none; height: auto; max-height: none; }
.deck-dialog-paging { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: .6rem 1rem; flex-shrink: 0; }
.deck-dialog-paging>span { color: #c6d9cc; font-size: .75rem; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
@media (max-width: 1050px) {
  .site-nav { display: none; } .mobile-nav-toggle { display: flex; } .mobile-drawer:not([hidden]) { display: block; }
  .intro-hero-grid { grid-template-columns: 1.2fr 1fr; } .intro-hero-art img { height: 340px; }
  .intro-data-grid { gap: 2rem; } .intro-assets { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .intro-assets>div { border-bottom: 1px solid #d5e2d9; } .intro-assets>div:nth-child(3n) { border-right: 0; }
}
@media (max-width: 768px) {
  .collaboration-film-bar { padding: .8rem; gap: .5rem; flex-wrap: wrap; font-size: .75rem; }
  .collaboration-film figcaption { padding: .8rem; }
  .collaboration-steps { grid-template-columns: 1fr; gap: 1.3rem; margin-top: 1.5rem; }
  .collaboration-steps .intro-index { margin-bottom: .6rem; }
  .intro-hero { padding: 2.5rem 0; } .intro-hero-grid { grid-template-columns: 1fr; gap: .5rem; }
  .intro-hero-art { display: none; } .intro-hero h1 { font-size: clamp(1.9rem,6.8vw,2.7rem); }
  .intro-lead { font-size: 1rem; margin-top: 1.15rem; } .intro-hero .hero-cta-group { flex-wrap: wrap; }
  .intro-section-top { display: block; } .intro-section-top>p { margin-top: .7rem; max-width: none; }
  .intro-value-grid,.intro-data-grid,.intro-evolution,.intro-example-pair { grid-template-columns: 1fr; }
  .intro-value-grid { gap: 1.7rem; } .intro-data-art img { height: 300px; }
  .deck-topbar { padding: .7rem .65rem; gap: .4rem; } .deck-topbar>div { gap: .4rem; } .deck-edition { display: none; }
  .deck-topbar { flex-wrap: wrap; } .deck-topbar .deck-actions { margin-left: auto; }
  .deck-narration { padding: .7rem; flex-wrap: wrap; } #narrationStatus { flex: 1; }
  .deck-actions button { padding: .4rem .6rem; font-size: .75rem; } .deck-topbar strong { font-size: .85rem; }
  .deck-chapters { gap: 1.2rem; padding: 0 .8rem; } .deck-chapters button { padding: .7rem 0; }
  .deck-bottom { flex-wrap: wrap; padding: .75rem .7rem; gap: .6rem; }
  .deck-page-info { width: 100%; justify-content: space-between; } .deck-paging { width: 100%; } .deck-paging select { flex: 1; width: auto; max-width: none; min-width: 0; }
  .deck-thumbnails { grid-template-columns: repeat(3,minmax(0,1fr)); padding: .5rem .6rem; gap: .4rem; }
  #deckText { grid-template-columns: 1fr; gap: 1.2rem; }
  .intro-assets h3 { font-size: .92rem; } .intro-assets>div { padding: 1.2rem .7rem; }
  #scenarios .scenario-tab-btn { font-size: .82rem; flex: 1 1 28%; min-width: 0; }
  .drafter-action-bar { flex-wrap: wrap; } .drafter-action-bar .btn { flex: 1 1 auto; }
  .deck-dialog-toolbar { padding: .6rem; gap: .5rem; flex-wrap: wrap; }
  .deck-dialog-toolbar strong { flex: 1; font-size: .8rem; } .deck-dialog-toolbar button { padding: .3rem .65rem; }
  .deck-dialog-paging { gap: 1rem; justify-content: space-between; } .deck-dialog-paging>span { display: none; }
  .deck-dialog-scroll { padding: .35rem; } .deck-dialog-scroll img { max-height: calc(100dvh - 150px); }
}
@media (prefers-reduced-motion: reduce) { .deck-progress span { transition: none; } }