/* About page: scoped to preserve the shared directory and course layouts. */
.about-page { --about-space: clamp(24px, 4vw, 56px); --about-rule: #dedede; }
.about-page .about-hero { display: block; min-height: 0; padding: var(--about-space); }
.about-page .about-eyebrow { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.5; letter-spacing: .025em; }
.about-page .about-quote { margin: 48px 0 0; max-width: 1100px; }
.about-page .about-quote blockquote { margin: 0; }
.about-page .about-quote h1 { margin: 0; font-size: clamp(34px, 4.2vw, 66px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.about-page .about-quote-translation { margin: 26px 0 0; max-width: 620px; font-size: 13px; line-height: 1.9; color: #35233d; }
.about-page .about-quote figcaption { margin-top: 14px; font-size: 11px; line-height: 1.8; color: #44334b; }
.about-page .about-quote figcaption a { text-decoration: none; border-bottom: 1px solid #44334b66; }
.about-page .about-section { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 3fr); gap: 32px; margin: 0 var(--about-space); padding: 48px 0; border-bottom: 1px solid var(--about-rule); }
.about-page .about-section-label { margin: 0; padding-top: 3px; font-size: 13px; font-weight: 500; line-height: 1.65; }
.about-page .about-section-label span { display: block; margin-top: 3px; color: #737373; font-size: 11px; font-weight: 400; }
.about-page .about-section-body { min-width: 0; }
.about-page .about-lead { font-size: clamp(19px, 1.9vw, 27px); font-weight: 400; line-height: 1.7; letter-spacing: -.025em; }
.about-page .about-intro-secondary { margin-top: 20px; font-size: 15px; line-height: 1.9; color: #606060; }
.about-page .about-service { display: grid; grid-template-columns: minmax(105px, 1fr) minmax(0, 2.3fr); gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--about-rule); }
.about-page .about-service:first-child { padding-top: 0; }
.about-page .about-service:last-child { padding-bottom: 0; border-bottom: 0; }
.about-page .about-service-heading { display: flex; align-items: baseline; gap: 12px; }
.about-page .about-number { flex: none; color: #777; font-size: 11px; font-variant-numeric: tabular-nums; }
.about-page h3 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -.025em; }
.about-page .about-service p, .about-page .about-roles p, .about-page .about-method-intro { font-size: 13px; line-height: 1.9; color: #606060; }
.about-page .about-capabilities { display: flex; flex-wrap: wrap; gap: 7px 18px; padding: 0; margin: 17px 0 0; list-style: none; font-size: 11px; color: #737373; }
.about-page .about-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; margin-top: 12px; font-size: 12px; font-weight: 500; }
.about-page .about-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.about-page .about-people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.about-page .about-media { background: #e5e5e5; border-radius: 4px; }
.about-page .about-method-title { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.5; }
.about-page .about-belief-copy { margin: 22px 0 0; max-width: 650px; font-size: 15px; line-height: 1.95; color: #606060; }
.about-page .about-method-intro { margin-top: 16px; max-width: 660px; }
.about-page .about-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--about-rule); }
.about-page h4 { margin: 0 0 9px; font-size: 14px; font-weight: 500; }
.about-page .about-roles h4 { display: inline-block; padding-bottom: 3px; border-bottom: 3px solid var(--accent); }
.about-page .about-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.about-page .about-process li { display: flex; flex-direction: column; gap: 14px; }
.about-page .about-process p { margin: 0; color: #737373; font-size: 12px; line-height: 1.85; }
.about-page .about-people-intro { max-width: 610px; font-size: 17px; line-height: 1.85; margin-bottom: 26px; }
.about-page .about-portrait { aspect-ratio: 4 / 5; }
.about-page .about-person h3 { margin-top: 16px; font-size: 17px; }
.about-page .about-person p { margin-top: 5px; font-size: 12px; color: #737373; }
.about-page .about-contact { padding: var(--about-space); margin-top: 10px; background: #f3f3f3; }
.about-page .about-contact h2 { margin: 30px 0 20px; font-size: clamp(29px, 3.2vw, 46px); line-height: 1.4; font-weight: 500; letter-spacing: -.04em; }
.about-page .about-contact > p:not(.about-eyebrow) { max-width: 570px; font-size: 14px; line-height: 1.9; color: #606060; }
.about-page .about-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }
.about-page .about-contact-primary { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 13px 20px; border-radius: 30px; background: #111; color: #fff; font-size: 13px; }
.about-page .about-contact-primary:hover { background: #333; }
.about-page .about-contact-actions .about-text-link { margin: 0; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .about-page .about-section { grid-template-columns: 1fr; gap: 24px; }
  .about-page .about-section-label span { display: inline; margin-left: 10px; }
  .about-page .about-quote h1 { font-size: 42px; }
}
@media (max-width: 599.98px) {
  .about-page .about-quote { margin-top: 34px; }
  .about-page .about-quote h1 { font-size: clamp(30px, 8vw, 43px); }
  .about-page .about-quote-translation { margin-top: 22px; font-size: 12px; }
  .about-page .about-section { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
  .about-page .about-section-label span { display: inline; margin-left: 10px; }
  .about-page .about-service { grid-template-columns: 1fr; gap: 13px; padding: 23px 0; }
  .about-page .about-people-grid { gap: 14px; }
  .about-page .about-roles { gap: 20px; }
  .about-page .about-process { grid-template-columns: 1fr; gap: 22px; }
  .about-page .about-process li { flex-direction: row; gap: 16px; align-items: baseline; }
  .about-page .about-process h4 { margin-bottom: 5px; }
  .about-page .about-contact-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Scheme-two host integration: retain its shell and theme, scope every override. */
:root[data-study="quiet-cards"] .about-page {
  --about-space: clamp(20px, 3vw, 40px);
  --about-rule: var(--line);
  --accent: var(--purple);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
:root[data-study="quiet-cards"] .about-page svg.icon {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
}
:root[data-study="quiet-cards"] .about-page .about-hero { background: var(--purple); color: #171a1d; border-radius: 5px 5px 0 0; }
:root[data-study="quiet-cards"] .about-page .about-quote figcaption a { color: inherit; }
:root[data-study="quiet-cards"] .about-page .about-people-grid { padding: 0; }
:root[data-study="quiet-cards"] .about-page .about-contact { border-radius: 0 0 5px 5px; }
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-intro-secondary,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-section-label span,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-number,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-service p,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-capabilities,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-belief-copy,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-method-intro,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-roles p,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-process p,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-person p,
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-contact > p:not(.about-eyebrow) { color: var(--muted); }
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-contact { background: var(--hover); }
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-media { background: #343830; }
:root[data-study="quiet-cards"][data-theme="dark"] .about-page .about-contact-primary { background: var(--ink); color: var(--bg); }
/* Diagrams keep their readable light palette within the dark surrounding page. */

/* Audience questions connect the studio's practice to useful next steps. */
.about-page .about-support { display: block; container: about-support / inline-size; }
.about-page .about-support-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.about-page .about-audience-heading h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; }
.about-page .about-audience-heading p { margin: 10px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted, #666); }
.about-page .about-learning { padding: 28px; border: 1px solid var(--about-rule); border-radius: 6px; background: var(--hover, #f7f7f5); }
.about-page .about-question-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.about-page .about-question-card { display: flex; flex-direction: column; min-width: 0; padding: 22px 20px; border: 1px solid var(--about-rule); border-radius: 5px; background: var(--surface, #fff); }
.about-page .about-question-card h4 { margin: 0 0 13px; font-size: clamp(18px, 1.55vw, 23px); font-weight: 500; line-height: 1.6; letter-spacing: -.025em; }
.about-page .about-question-card > p { margin: 0 0 25px; font-size: 13px; line-height: 1.95; color: var(--muted, #666); }
.about-page .about-question-next { min-height: 93px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--about-rule); }
.about-page .about-question-next a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin: 6px 0; font-size: 13px; font-weight: 500; line-height: 1.7; text-decoration: none; }
.about-page .about-question-next a .icon { flex: none; }
.about-page .about-question-next a:hover { text-decoration: underline; text-underline-offset: 4px; }
.about-page .about-question-next small { display: block; font-size: 10px; line-height: 1.8; color: var(--muted, #666); }
.about-page .about-learning-footer { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 18px; }
.about-page .about-learning-footer .about-text-link { margin-top: 0; flex: none; }
.about-page .about-business { display: grid; grid-template-columns: 1fr 1.45fr; gap: 50px; padding: 38px 28px; }
.about-page .about-business-needs > div + div { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--about-rule); }
.about-page .about-business h4 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.7; }
.about-page .about-business-needs p { margin: 9px 0; font-size: 13px; line-height: 1.85; color: var(--muted, #666); }
.about-page .about-support a:focus-visible { outline: 2px solid var(--ink, #252622); outline-offset: 4px; border-radius: 2px; }
@container about-support (max-width: 760px) {
  .about-page .about-support-heading { display: block; }
  .about-page .about-question-grid { grid-template-columns: 1fr; }
  .about-page .about-question-next { min-height: 0; }
  .about-page .about-question-card h4 br { display: none; }
  .about-page .about-question-card h4 { font-size: 21px; margin-top: 0; }
  .about-page .about-question-card > p { margin-bottom: 18px; }
  .about-page .about-business { grid-template-columns: 1fr; gap: 24px; }
  .about-page .about-learning-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@container about-support (max-width: 420px) {
  .about-page .about-learning { padding: 20px 14px; }
  .about-page .about-question-card { padding: 20px 16px; }
  .about-page .about-business { padding: 30px 0; }
}

.about-page .about-section-body > .about-process:first-child { margin-top: 0; }

/* Centered narrative, using the current site's typography, surfaces and actions. */
:root[data-study="quiet-cards"] #page-bar[hidden] { display: none; }
:root[data-study="quiet-cards"] .about-page.about-narrative {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
:root[data-study="quiet-cards"] .about-narrative .about-hero {
  background: transparent; color: var(--ink); padding: 64px var(--about-space) 36px;
}
.about-narrative .about-eyebrow { justify-content: center; color: var(--muted); }
.about-narrative .about-eyebrow > span { display: none; }
.about-narrative .about-quote { max-width: 760px; margin: 32px auto 0; text-align: center; }
.about-narrative .about-quote h1 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.18; }
.about-narrative .about-quote-translation { margin: 26px auto 0; color: var(--muted); }
.about-narrative .about-quote figcaption { color: var(--muted); }
.about-narrative .about-quote figcaption a { border-color: var(--line); }
.about-narrative .about-section {
  display: block; width: calc(100% - var(--about-space) * 2); max-width: 820px;
  margin: 0 auto; padding: 48px 0; border: 0; text-align: center;
}
.about-narrative .about-section-label { margin: 0 0 24px; padding: 0; }
.about-narrative .about-section-label span { display: block; margin: 3px 0 0; }
.about-narrative .about-lead { max-width: 680px; margin: 0 auto; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.85; text-wrap: pretty; }
.about-narrative .about-explore-caption { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.about-narrative .about-explore-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
:root[data-study="quiet-cards"] .about-narrative .tdl-action-icon .icon { width: 100%; height: 100%; }
.about-narrative .about-people-grid { max-width: 640px; margin: 0 auto; text-align: left; }
:root[data-study="quiet-cards"] .about-narrative .about-contact {
  width: calc(100% - var(--about-space) * 2); max-width: 580px; margin: 36px auto 64px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); text-align: center;
}
.about-narrative .about-contact h2 { margin: 0 0 12px; font-size: 28px; }
.about-narrative .about-contact > p { margin: 0 auto; }
.about-narrative .about-contact-actions { align-items: center; justify-content: center; margin-top: 20px; }
@media (max-width: 599.98px) {
  :root[data-study="quiet-cards"] .about-narrative .about-hero { padding-top: 36px; padding-bottom: 24px; }
  .about-narrative .about-section { padding: 34px 0; }
  .about-narrative .about-quote h1 { font-size: 30px; }
  .about-narrative .about-quote { margin-top: 24px; }
  :root[data-study="quiet-cards"] .about-narrative .about-contact { margin-top: 24px; margin-bottom: 36px; padding: 26px 20px; }
}

/* Scroll story: shared font family and palette, a quieter editorial type scale. */
/* The white card is the scroll container itself: a fixed frame aligned with the other tabs' toolbar
   (pills start 15px below the content top and 16px in from each side); the story scrolls inside it. */
:root[data-study="quiet-cards"] #content.is-about {
  width: auto; margin: 15px 16px 16px;
  background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--card-radius, 6px);
  scrollbar-width: thin;
  /* the story only scrolls up and down: decorations that bleed past the frame (the 品牌 warp, the hidden founder
     card, a card's shadow room) are clipped, never a sideways swipe */
  overflow-x: hidden; overscroll-behavior-x: none;
}
:root[data-study="quiet-cards"] #content.is-about .content-wrap { padding: 0; max-width: none; }
:root[data-study="quiet-cards"] .about-page.about-story {
  --story-unread: color-mix(in srgb, var(--ink) 50%, var(--card-surface));
  /* Body size after reboot.studio (40px Latin, 1.6 leading); CJK glyphs read larger, so 34px is the visual match.
     Inline graphics are sized from this token, so they scale with the text. */
  /* Reading type after reboot.studio (40px / 1.6 in Latin). Chinese glyphs fill the em box where Latin lowercase fills
     about half of it, so the same airiness needs a taller line (1.8) and a slightly smaller size reads as large. */
  --story-size: clamp(26px, 2.6vw, 36px);
  --story-measure: 960px;   /* the centred reading column: quote and body share it */
  --story-column: 960px;    /* body sections fill the column, left-aligned on its axis */
  --story-inset: clamp(24px, 6vw, 80px);
  max-width: none; width: 100%; margin: 0; padding: 0 var(--story-inset);
  background: transparent; border: 0; border-radius: 0;
}
.about-story .about-hero, .about-story .story-body { width: min(100%, var(--story-measure)); margin-inline: auto; }
.about-story .story-body > .story-section { max-width: var(--story-column); }
:root[data-study="quiet-cards"] .about-story .about-hero { display: block; min-height: calc(var(--story-viewport, 100svh) * .74); padding: calc(var(--story-viewport, 100svh) * .15) 0 48px; }
.about-story .about-quote { margin: 0; width: 100%; max-width: none; text-align: left; }
/* Statement headline in the site's own display face; weight 640 keeps force without out-shouting the body. */
.about-story .about-quote h1 { font-family: Outfit, 'PingFang SC', sans-serif; font-size: clamp(44px, 4.6vw, 66px); font-weight: 640; line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; }
.about-story .about-quote-translation { margin: 32px 0 0; max-width: 600px; font-size: 17px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.about-story .about-quote figcaption { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.about-story .story-section { margin: 0; padding: 40px 0; text-align: left; }
.about-story .story-copy { margin: 0; font-size: var(--story-size); font-weight: 400; line-height: 1.8; letter-spacing: -.012em; text-wrap: pretty; }
.about-story .story-introduction { padding-top: 32px; }
.about-story .story-phrase { --read: 100%; }
.about-story { overflow-anchor: none; position: relative; isolation: isolate; }
.about-story .story-body { position: relative; z-index: 1; background: transparent; }
.about-story.story-motion .about-hero { position: sticky; top: 0; z-index: 0; }
.about-story.story-motion .about-quote { transform: scale(var(--hero-scale, 1)); filter: blur(var(--hero-blur, 0px)); opacity: var(--hero-opacity, 1); transform-origin: left center; will-change: transform, filter, opacity; }
.about-story.story-motion .about-hero.is-retired .about-quote { visibility: hidden; }
.about-story .story-phrase { white-space: nowrap; }
.about-story .story-read-line { display: block; white-space: nowrap; }
.about-story .story-read-line > .story-phrase { display: inline-block; white-space: nowrap; }
.about-story .story-read-line.is-fluid, .about-story .story-read-line.is-fluid > .story-phrase { white-space: normal; }
.about-story .story-inline-slot { --chip: calc(var(--story-size) * 1.4); --slot-width: var(--chip); --slot-gap: calc(var(--story-size) * .18); --slot-height: var(--chip); display: inline-block; vertical-align: middle; width: var(--slot-width); height: var(--slot-height); margin: 0 var(--slot-gap) calc(var(--story-size) * .08); overflow: hidden; white-space: nowrap; font-size: 0; line-height: 0; }
/* AI tools as app icons, sized and finished like reboot.studio's inline Framer icon: 1.75 × the text (the founder faces
   use the same), 22% corners, a 5% hairline and a soft five-step shadow at 6%. Stacked, each peeks out to the right of
   the one in front; on hover (pointer devices only) they fan out into a row and the slot widens with them, pushing the
   following words along. Lines are measured with the stack, so the sentence keeps its single line; about-motion.js
   sets --app-open-step from the room left on that line, so a narrow column gets a slightly overlapping fan. */
.about-story .slot-apps { --app: calc(var(--story-size) * 1.75); --app-step: calc(var(--app) * .42); --app-open-step: calc(var(--app) * 1.14); --apps-open: calc(var(--app) + var(--app-open-step) * 3); --slot-width: calc(var(--app) + var(--app-step) * 3); --slot-height: calc(var(--story-size) * 1.3); overflow: visible; position: relative; z-index: 2; }
.about-story .story-apps { position: relative; display: inline-block; width: var(--slot-width); height: var(--slot-height); vertical-align: top; }
.about-story .story-app { --rot: 5deg; --dy: 0px; position: absolute; left: 0; top: 50%; width: var(--app); height: var(--app); margin-top: calc(var(--app) / -2); border-radius: 22%; overflow: hidden; background: #fff; z-index: calc(10 - var(--i));
  box-shadow: 0 1px 1px -.5px rgba(0,0,0,.06), 0 3px 3px -1.5px rgba(0,0,0,.06), 0 6px 6px -3px rgba(0,0,0,.06), 0 12px 12px -6px rgba(0,0,0,.06), 0 24px 24px -12px rgba(0,0,0,.06);
  transform: translate(calc(var(--app-step) * var(--i)), var(--dy)) rotate(var(--rot)); transition: transform .45s cubic-bezier(.16,1,.3,1) calc(var(--i) * 25ms); }
.about-story .story-app:nth-child(2) { --rot: -3deg; --dy: -2px; }
.about-story .story-app:nth-child(3) { --rot: 2deg; --dy: -4px; }
.about-story .story-app:nth-child(4) { --rot: -4deg; --dy: -1px; }
.about-story .story-app img { display: block; width: 100%; height: 100%; }
.about-story .story-app::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(0,0,0,.05); pointer-events: none; }
@media (hover: hover) {
  .about-story .slot-apps:hover { --slot-width: var(--apps-open); z-index: 6; }
  .about-story .slot-apps:hover .story-app { transform: translate(calc(var(--app-open-step) * var(--i)), 0) rotate(0deg); }
}
/* Founder faces (after reboot.studio): photos larger than the line, white rims, overlapping; they pop in
   one by one as the slot opens, lift on hover, and one shared card slides between the people. */
.about-story .slot-team { --face: calc(var(--story-size) * 1.75); --face-rim: max(2.5px, calc(var(--face) * .065)); --face-overlap: calc(var(--face) * .2); --slot-width: calc(var(--face) * var(--team-count, 2) - var(--face-overlap) * (var(--team-count, 2) - 1)); --slot-height: calc(var(--story-size) * 1.3); overflow: visible; position: relative; z-index: 2; }
.about-story .slot-team:has(.story-face:is(:hover,:focus-visible)) { z-index: 6; }
.about-story .story-team { position: relative; display: inline-flex; align-items: center; height: var(--slot-height); vertical-align: top; }
.about-story .story-face { position: relative; flex: none; width: var(--face); height: var(--face); margin: calc((var(--slot-height) - var(--face)) / 2) 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: default; transition: transform .3s cubic-bezier(.16,1,1,1); }
.about-story .story-face + .story-face { margin-left: calc(var(--face-overlap) * -1); z-index: 1; }
/* the face under the pointer grows and lifts above its neighbour */
.about-story .story-face:hover, .about-story .story-face:focus-visible { transform: translateY(-4px) scale(1.22); z-index: 2; }
.about-story .story-face:focus-visible { outline: none; }
.about-story .story-face:focus-visible .story-face-pic { box-shadow: 0 0 0 2px var(--card-surface), 0 0 0 4px var(--ink); }
.about-story .story-face-pic { display: block; width: 100%; height: 100%; overflow: hidden; border: var(--face-rim) solid var(--card-surface); border-radius: 50%; background: var(--hover, #f5f5f5); }
.about-story .story-face-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-story .story-team-card { position: absolute; top: calc(100% + 12px); left: var(--team-card-left, 50%); width: min(272px, calc(100vw - 48px)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 66%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); color: var(--ink); box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--ink) 22%, transparent); font-size: 14px; line-height: 1.5; white-space: normal; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(var(--team-card-x, -50%), -10px); transition: opacity .3s cubic-bezier(.19,1,.22,1), transform .3s cubic-bezier(.19,1,.22,1), visibility 0s linear .3s; }
.about-story .story-team:has(.story-face:is(:hover,:focus-visible)) .story-team-card { opacity: 1; visibility: visible; transform: translate(var(--team-card-x, -50%), 0); transition-delay: 0s; }
.about-story .story-team-track { display: flex; width: calc(100% * var(--team-count, 2)); transform: translateX(0); transition: transform 0s linear .3s; }
.about-story .story-team:has(.story-face:is(:hover,:focus-visible)) .story-team-track { transition: transform .45s cubic-bezier(.19,1,.22,1); }
.about-story .story-team:has(.story-face:nth-of-type(2):is(:hover,:focus-visible)) .story-team-track { transform: translateX(calc(-100% / var(--team-count, 2))); }
.about-story .story-team:has(.story-face:nth-of-type(3):is(:hover,:focus-visible)) .story-team-track { transform: translateX(calc(-200% / var(--team-count, 2))); }
.about-story .story-team-person { flex: 1 1 0; min-width: 0; padding: 13px 18px 15px; }
.about-story .story-team-head { display: grid; white-space: nowrap; }
.about-story .story-team-role { color: var(--muted); font-size: 12px; line-height: 1.4; letter-spacing: .06em; }
.about-story .story-team-head strong { margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.45; }
.about-story .story-team-bio { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: color-mix(in srgb, var(--ink) 75%, var(--surface)); font-size: 13.5px; line-height: 1.7; }
/* 产品 in vector-edit mode (after arlan.me/vault "Figma vector editor"). The glyphs are drawn from vector outlines;
   the line measure reserves the widest (hover) spacing so lines never re-wrap. */
.about-story { --tt-blue: #0d99ff; }
:root[data-theme="dark"] .about-story { --tt-blue: #4db5ff; }
.about-story .tt { --tt-side: .4em; --tt-gap: .36em; position: relative; display: inline-block; line-height: 1; white-space: nowrap; transition: letter-spacing .4s cubic-bezier(.22,.8,.2,1), margin .4s cubic-bezier(.22,.8,.2,1); }
/* Room for the loose frame and its handles on both sides; on hover the characters also part so a single-character
   frame never covers its neighbour. The line measure reserves that widest (hover) width. */
.about-story .tt.is-shown, .about-story .tt.is-framed { margin-inline: var(--tt-side); }
.about-story .tt.is-wide, .about-story .story-line-measure .tt { letter-spacing: var(--tt-gap); margin-left: var(--tt-side); margin-right: calc(var(--tt-side) - var(--tt-gap)); }
.about-story .tt-base { transition: color .3s ease; }
.about-story .tt.is-bold .tt-base { color: transparent; }
.about-story .tt-word { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s ease; user-select: none; -webkit-user-select: none; }
.about-story .tt.is-bold .tt-word { opacity: 1; }
.about-story .tt-ch { position: relative; display: inline-block; }
.about-story .tt-ch.has-vector .tt-glyph { color: transparent; }
@media (hover: hover) { .about-story .tt.is-bold .tt-ch { cursor: grab; } }
.about-story .tt.is-dragging .tt-ch { cursor: grabbing; }
.about-story .tt-ch.is-spring { transition: translate .55s cubic-bezier(.34,1.56,.64,1); }
.about-story .tt-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.about-story .tt-vec { position: absolute; left: 0; pointer-events: none; }
.about-story .tt-vec svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.about-story .tt-vec path { fill-rule: evenodd; fill: currentColor; stroke: var(--tt-blue); stroke-width: 1.4px; stroke-opacity: 0; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .3s ease, stroke-opacity .3s ease; }
.about-story .tt-ch.is-vec .tt-vec path { fill: color-mix(in srgb, var(--tt-blue) 10%, transparent); stroke-opacity: 1; }
.about-story .tt-pts { position: absolute; inset: 0; }
.about-story .tt-pts i { position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--tt-blue); opacity: 0; transform: scale(0); transition: opacity .2s ease, transform .25s ease-out; }
.about-story .tt-pts i[hidden] { display: none; }
.about-story .tt-ch.is-vec .tt-pts i { opacity: 1; transform: scale(1); }
.about-story .tt-frame { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; z-index: 3;
  transition: left .42s cubic-bezier(.16,1,.3,1), top .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1), height .42s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.about-story .tt-frame.is-on { opacity: 1; }
.about-story .tt-frame.is-instant { transition: opacity .2s ease; }
.about-story .tt-box { position: absolute; inset: 0; border: 1px solid var(--tt-blue); transform-origin: top left; }
.about-story .tt-frame .c { position: absolute; z-index: 1; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--card-surface); border: 1px solid var(--tt-blue); border-radius: 1px; }
.about-story .tt-frame .tl { left: 0; top: 0; } .about-story .tt-frame .tr { left: 100%; top: 0; } .about-story .tt-frame .br { left: 100%; top: 100%; } .about-story .tt-frame .bl { left: 0; top: 100%; }
.about-story .tt-badge { position: absolute; z-index: 2; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); opacity: 0; transition: opacity .2s ease; padding: 2px 6px; border-radius: 4px; background: var(--tt-blue); color: #fff; font: 500 11px/1.4 Outfit, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Intro, as in the reference: the frame opens from its top-left corner, handles pop clockwise, the badge pops beneath. */
.about-story .tt-frame.is-intro .tt-box { animation: tt-open .6s cubic-bezier(.16,1,.3,1) both; }
.about-story .tt-frame.is-intro .c { animation: tt-pop .25s ease-out both; }
.about-story .tt-frame.is-intro .tl { animation-delay: .18s; } .about-story .tt-frame.is-intro .tr { animation-delay: .28s; } .about-story .tt-frame.is-intro .br { animation-delay: .38s; } .about-story .tt-frame.is-intro .bl { animation-delay: .48s; }
.about-story .tt-frame.show-badge .tt-badge { opacity: 1; }
.about-story .tt-frame.is-intro.show-badge .tt-badge { animation: tt-badge .25s ease-out .2s both; }
@keyframes tt-open { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes tt-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes tt-badge { from { opacity: 0; transform: translateX(-50%) scale(0); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
/* 体验 outlined on a type-design grid (after reboot.studio's "Design."), with collaborator cursors. The outline and the
   guides are placed by about-motion.js over the word's em boxes; the line measure reserves the side room. */
.about-story .ow { --ow-side: .34em; position: relative; display: inline-block; line-height: 1; white-space: nowrap; transition: margin .4s cubic-bezier(.22,.8,.2,1); }
.about-story .ow.is-shown, .about-story .ow.is-on, .about-story .story-line-measure .ow { margin-inline: var(--ow-side); }
.about-story .ow-base { transition: color .3s ease; }
.about-story .ow.is-on .ow-base { color: transparent; }
.about-story .ow-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.about-story .ow-art { position: absolute; left: 0; top: 0; pointer-events: none; }
.about-story .ow-glyphs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* each character's outline draws in, the second a little after the first; scrolling back up undraws them */
.about-story .ow-glyphs path { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.45,0,.25,1) .1s; }
.about-story .ow-glyphs path + path { transition-delay: .3s; }
.about-story .ow.is-on .ow-glyphs path { stroke-dashoffset: 0; }
/* guides along the em boxes, running a little past the corners; they extend clockwise from the top */
.about-story .ow-guides i { position: absolute; background: color-mix(in srgb, currentColor 22%, transparent); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.about-story .ow-guides .h { left: -.16em; right: -.16em; height: 1px; transform: scaleX(0); transform-origin: left center; }
.about-story .ow-guides .v { top: -.16em; bottom: -.16em; width: 1px; transform: scaleY(0); transform-origin: center top; }
.about-story .ow-guides .t { top: 0; } .about-story .ow-guides .b { bottom: 0; transform-origin: right center; }
.about-story .ow-guides .r { right: 0; } .about-story .ow-guides .l { left: 0; transform-origin: center bottom; }
.about-story .ow.is-on .ow-guides i { transform: none; }
.about-story .ow.is-on .ow-guides .r { transition-delay: .08s; } .about-story .ow.is-on .ow-guides .b { transition-delay: .16s; } .about-story .ow.is-on .ow-guides .l { transition-delay: .24s; }
/* 品牌 warped (after React Bits "Warp Text"): a WebGL canvas, sized and placed by about-motion.js, replaces the text once
   read; without WebGL (.is-live missing) the text simply stays. The line measure reserves the side room. */
.about-story .ww { --ww-side: .22em; position: relative; display: inline-block; line-height: 1; white-space: nowrap; transition: margin .4s cubic-bezier(.22,.8,.2,1); }
.about-story .ww.is-shown, .about-story .ww.is-on, .about-story .story-line-measure .ww { margin-inline: var(--ww-side); }
.about-story .ww-base { transition: color .2s ease; }
.about-story .ww.is-on.is-live .ww-base { color: transparent; }
.about-story .ww-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.about-story .ww-art { position: absolute; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.about-story .ww.is-on .ww-art { opacity: 1; }
/* Figma-style collaborator cursors, arrows only: the arrow tip sits on the cursor's position. */
.about-story .ow-cursors { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.about-story .ow-cur { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s ease; will-change: transform; }
.about-story .ow.is-on .ow-cur { opacity: 1; transition-delay: calc(.15s + var(--i) * .08s); }
.about-story .ow-cur:first-child { z-index: 1; }
.about-story .ow-float { position: absolute; left: 0; top: 0; }
/* When the arrows meet, the extras vanish and the first pops and floats. */
.about-story .ow.is-merged .ow-cur:not(:first-child) { opacity: 0; transition-duration: .25s; transition-delay: 0s; }
.about-story .ow.is-merged .ow-cur:first-child .ow-float { animation: ow-pop .45s cubic-bezier(.34,1.56,.64,1), ow-float 3.6s ease-in-out .45s infinite; }
@keyframes ow-pop { 40% { transform: scale(1.2); } }
@keyframes ow-float { 50% { transform: translate(.03em, -.09em); } }
.about-story .ow-cur svg { position: absolute; left: -.142em; top: -.083em; width: .62em; height: .62em; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); }
.about-story .ow-cur path { fill: var(--c); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.about-story .story-questions { padding-top: 10px; }
.about-story .story-future, .about-story .story-practice { padding: 56px 0 64px; }
.about-story .story-questions, .about-story .story-past { padding-bottom: 40px; }
/* Card groups hide between paragraphs until the reading line reaches them; then the gap grows and the cards fan out. */
.about-story .story-slot { display: grid; grid-template-rows: 1fr; }
.about-story .story-slot-inner { min-height: 0; overflow: hidden; padding: 0 28px; margin-inline: -28px; }
.about-story .story-slot-inner > .story-professions { margin-bottom: 20px; }
.about-story.story-motion .story-slot { grid-template-rows: 0fr; transition: grid-template-rows .65s cubic-bezier(.22,.7,.2,1); }
.about-story.story-motion .story-slot.is-open { grid-template-rows: 1fr; }
.about-story.story-motion .story-slot.is-instant, .about-story.story-motion .story-slot.is-instant :is(.story-phases li, .story-role), .about-story.story-motion .story-slot.is-instant .story-professions::before { transition: none !important; animation: none !important; }
/* Reader questions on a slowly turning sphere (form after the imingli homepage; cards in this page's style, no lines or
   centre point), left-aligned with the text. about-motion.js places the cards (.is-live); without it they wrap as a plain
   set of cards. Each question breaks after its comma, so cards are two lines and the sphere stays compact. */
.about-story .story-question-orb { position: relative; margin-top: 16px; }
/* phones: three touching rows of question pills drifting sideways instead of the sphere (see about-content.js) */
.about-story .story-question-lanes { display: none; }
@media (max-width: 599.98px) {
  .about-story .story-question-lanes { display: block; margin: 22px -16px 0; padding: 6px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .about-story .story-lane { position: relative; display: flex; gap: 10px; width: max-content; margin: 0; padding: 0; list-style: none; animation: story-lane-drift var(--dur) linear infinite; }
  .about-story .story-lane:nth-child(1) { z-index: 3; --dur: 93s; }
  .about-story .story-lane:nth-child(2) { z-index: 2; --dur: 111s; animation-direction: reverse; margin-left: -60px; }
  .about-story .story-lane:nth-child(3) { z-index: 1; --dur: 84s; margin-left: -120px; }
  .about-story .story-lane-pill { display: flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, var(--card-surface)); box-shadow: 0 0 0 2px var(--card-surface), 0 10px 18px -12px color-mix(in srgb, var(--ink) 30%, transparent); font-size: 13px; line-height: 1.3; white-space: nowrap; transform: rotate(var(--tilt)); }
  .about-story .story-lane-pill img { display: block; width: 26px; height: 26px; border-radius: 50%; }
  .about-story.story-motion .story-slot:not(.is-open) .story-lane { animation-play-state: paused; }
  /* the sphere's list stays for assistive tech only */
  .about-story .story-question-orb { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes story-lane-drift { to { transform: translateX(calc(-50% - 5px)); } }
.about-story .story-question-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 8px 0 28px; list-style: none; }
/* frosted cards: a card in front blurs the cards it covers */
.about-story .story-question { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 12px; padding: 11px 18px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 7%, transparent); font-size: 16px; }
.about-story .story-question-face { display: block; width: 52px; height: 52px; border-radius: 50%; }
.about-story .story-question-body { display: grid; gap: 3px; }
.about-story .story-question-topic { font-size: 12px; line-height: 1.4; letter-spacing: .06em; color: var(--muted); }
.about-story .story-question-text { line-height: 1.5; letter-spacing: -.01em; white-space: nowrap; }
.about-story .story-question-orb.is-live { height: clamp(380px, 40vw, 480px); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.about-story .story-question-orb.is-dragging { cursor: grabbing; }
.about-story .story-question-orb.is-live .story-question-list { position: absolute; inset: 0; display: block; padding: 0; }
/* each question breaks after its comma (about-content.js), so a card is two lines as wide as the longer half */
.about-story .story-question-orb.is-live .story-question { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
/* Roles along the relay, after a row of record pills: the four stage names head four columns split by faint vertical
   rules, and the roles lie in a loose pile across them, each placed where its work centres, so a role that spans two
   stages sits on the rule between them. The pile starts on the text's left edge. Capsules are grey with the
   face on the left and the Chinese name over the English title; each is tilted a little and laps onto its neighbours,
   with a page-coloured ring keeping overlaps apart. about-motion.js packs them into rows (.is-placed); without it they
   simply wrap. */
.about-story .story-past { container: past / inline-size; }
.about-story .story-professions { --rule: color-mix(in srgb, var(--ink) 9%, transparent); position: relative; margin-top: 36px; padding: 4px 0 18px; }
/* the three stage borders, drawn behind the capsules */
.about-story .story-professions::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--rule), var(--rule)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) 75% 0 / 1px 100% no-repeat; }
.about-story .story-phases { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
/* each stage name is centred in its column; the pile below still starts on the text's edge */
.about-story .story-phases li { color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; }
.about-story .story-roles { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.about-story .story-roles.is-placed { position: relative; display: block; height: var(--roles-h, auto); }
.about-story .story-role { --face: 42px; --inset: 5px; position: relative; display: flex; align-items: center; gap: 10px; padding: var(--inset) 18px var(--inset) var(--inset); border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, var(--card-surface)); box-shadow: 0 0 0 2px var(--card-surface), 0 10px 18px -12px color-mix(in srgb, var(--ink) 30%, transparent); transform: rotate(var(--tilt, 0deg)); transition: transform .3s cubic-bezier(.22,.8,.2,1), opacity .2s ease; }
.about-story .story-roles.is-placed .story-role { position: absolute; left: var(--x, 0px); top: var(--y, 0px); z-index: var(--z, 1); }
.about-story .story-role-face { flex: none; display: block; width: var(--face); height: var(--face); border-radius: 50%; }
.about-story .story-role-body { display: grid; gap: 1px; min-width: 0; }
.about-story .story-role-name { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; }
.about-story .story-role-en { color: var(--muted); font: 400 10.5px/1.4 Outfit, sans-serif; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-story .story-role:hover { z-index: 30; transform: translateY(-3px) rotate(0); }
}
@container past (max-width: 759.98px) {
  .about-story .story-role { --face: 36px; --inset: 4px; gap: 8px; padding-right: 14px; }
  .about-story .story-role-name { font-size: 14px; }
  .about-story .story-role-en { font-size: 9.5px; letter-spacing: .06em; }
}
@container past (max-width: 459.98px) {
  .about-story .story-professions { margin-top: 28px; }
  .about-story .story-phases li { font-size: 13px; }
  .about-story .story-roles { margin-top: 14px; }
  /* a legible English line (9.5px) on a slightly smaller face and tighter padding, so the capsules stay as narrow as
     before and the pile keeps each role near its stage */
  .about-story .story-role { --face: 28px; --inset: 4px; gap: 6px; padding-right: 9px; }
  .about-story .story-role-name { font-size: 13px; }
  .about-story .story-role-en { font-size: 9.5px; letter-spacing: .02em; }
}
.about-story .story-definition { margin-top: 28px; }
/* Before / Now, in the role capsules' style. Before: the relay's people piled into a round cluster with depth, as if on
   a still sphere: the ones behind smaller, fainter and softer. Now: one squarish grey card like the capsules, the person in
   the upper middle and their agents in a row beneath, the name at the foot. Three columns from the text's edge: Before,
   an arrow zone, Now. Before and Now are as wide as their content, so the arrow sits exactly midway between the two
   graphics; a faint rule runs through it. Each part is a title, the graphic and a small note, all three centred on the
   graphic, the rows lining up across the columns (subgrid). Stacked on narrow screens, the rule turns horizontal and the arrow points down. Widths are queried on the section, since a container cannot query itself. */
.about-story .story-future { container: future / inline-size; }
.about-story .story-builder { --rule: color-mix(in srgb, var(--ink) 9%, transparent); --unit-bg: color-mix(in srgb, var(--ink) 5%, var(--card-surface)); --unit-shadow: 0 0 0 2px var(--card-surface), 0 12px 22px -14px color-mix(in srgb, var(--ink) 30%, transparent); --chip: 64px; --pile: 1.28; --face: 78px; --agent: 46px; --shift: 168px; display: grid; grid-template-columns: auto var(--shift) auto; grid-template-rows: auto auto auto; justify-content: start; margin: 48px 0 0; padding-bottom: 8px; }
.about-story .builder-era { position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; justify-items: center; align-items: center; min-width: 0; text-align: center; }
.about-story .builder-era-label { display: block; margin-bottom: 22px; color: var(--ink); font: 500 18px/1.4 Outfit, sans-serif; letter-spacing: -.01em; }
.about-story .builder-shift { position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; place-items: center; }
.about-story .builder-shift::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule); }
.about-story .builder-shift-chip { position: relative; grid-row: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card-surface); box-shadow: 0 0 0 1px var(--line), 0 8px 16px -10px color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); }
:root[data-study="quiet-cards"] .about-story .builder-shift-chip .icon { width: 18px; height: 18px; }
.about-story .builder-people { position: relative; width: calc(172px * var(--pile)); height: calc(160px * var(--pile)); list-style: none; margin: 0; padding: 0; }
/* a face near the box's right edge must not be squeezed by the space left to it */
.about-story .builder-person { position: absolute; left: calc(var(--px) * var(--pile)); top: calc(var(--py) * var(--pile)); translate: -50% -50%; width: max-content; padding: 5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 5%, var(--card-surface)); box-shadow: 0 0 0 2px var(--card-surface), 0 10px 18px -12px color-mix(in srgb, var(--ink) 30%, transparent); opacity: var(--o); filter: blur(var(--blur)); transform: scale(var(--s)) rotate(var(--tilt)); }
.about-story .builder-person img { display: block; width: var(--chip); max-width: none; height: var(--chip); border-radius: 50%; }
.about-story .builder-era-note { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* side by side, a note wider than its graphic spills evenly past both sides instead of widening its column, so the
   columns stay as wide as the graphics and the arrow stays midway between them */
.about-story .story-builder .builder-era-note { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.about-story .builder-unit { display: grid; justify-items: center; align-content: center; width: 220px; min-height: 214px; padding: 22px 18px 20px; border-radius: 28px; background: var(--unit-bg); box-shadow: var(--unit-shadow); transform: rotate(-2deg); }
.about-story .builder-member { position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--unit-bg); }
.about-story .builder-member.is-human { z-index: 2; width: var(--face); height: var(--face); }
.about-story .builder-agents { display: flex; justify-content: center; margin-top: calc(var(--agent) * -.28); }
.about-story .builder-member.is-agent { z-index: calc(1 - var(--k)); width: var(--agent); height: var(--agent); background: var(--card-surface); }
.about-story .builder-member.is-agent + .builder-member.is-agent { margin-left: calc(var(--agent) * -.18); }
.about-story .builder-member.is-agent:nth-child(2) { z-index: 1; translate: 0 6px; }
.about-story .builder-member img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.about-story .builder-unit-body { display: grid; justify-items: center; gap: 1px; margin-top: 16px; text-align: center; }
.about-story .builder-unit-body strong { font: 500 18px/1.3 Outfit, sans-serif; letter-spacing: -.01em; }
.about-story .builder-unit-body span { color: color-mix(in srgb, var(--ink) 55%, var(--unit-bg)); font: 400 10.5px/1.4 Outfit, sans-serif; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
@container future (max-width: 679.98px) {
  .about-story .story-builder { --shift: 120px; }
}
/* Narrow columns keep Before and Now side by side, the arrow between them, everything scaled down to fit; the notes
   wrap under their graphics. */
@container future (max-width: 599.98px) {
  .about-story .story-builder { --shift: 64px; --pile: 1; --chip: 50px; --face: 62px; --agent: 36px; grid-template-columns: minmax(0, 1fr) var(--shift) minmax(0, 1fr); justify-content: stretch; }
  .about-story .builder-era-label { margin-bottom: 16px; font-size: 16px; }
  .about-story .builder-era-note { margin-top: 14px; font-size: 13px; }
  .about-story .story-builder .builder-era-note { display: block; width: auto; max-width: 100%; white-space: normal; text-wrap: balance; }
  .about-story .builder-person { padding: 4px; }
  .about-story .builder-unit { width: min(100%, 180px); min-height: 172px; padding: 16px 12px 14px; border-radius: 24px; }
  .about-story .builder-shift-chip { width: 34px; height: 34px; }
  .about-story .builder-unit-body { margin-top: 12px; }
  .about-story .builder-unit-body strong { font-size: 15px; }
  .about-story .builder-unit-body span { font-size: 8.5px; letter-spacing: .05em; }
}
@container future (max-width: 459.98px) {
  .about-story .story-builder { --shift: 52px; --pile: .72; --chip: 36px; --face: 48px; --agent: 28px; margin-top: 36px; }
  .about-story .builder-person { padding: 3px; }
  /* the card is as wide as the Before cluster, so both sit the same distance from the arrow */
  .about-story .builder-unit { width: calc(172px * var(--pile) - 4px); min-height: calc(160px * var(--pile) + 8px); padding: 12px 6px 11px; border-radius: 20px; }
  .about-story .builder-era-note { font-size: 12.5px; line-height: 1.55; }
  .about-story .builder-shift-chip { width: 30px; height: 30px; }
  :root[data-study="quiet-cards"] .about-story .builder-shift-chip .icon { width: 15px; height: 15px; }
  .about-story .builder-unit-body { margin-top: 9px; }
  .about-story .builder-unit-body strong { font-size: 14px; }
  .about-story .builder-unit-body span { font-size: 7.5px; letter-spacing: .04em; }
}
@container future (max-width: 319.98px) {
  .about-story .story-builder { --shift: 44px; --pile: .66; --chip: 33px; }
}
/* Motion: the Before faces drop into the cluster from the back forwards; then the person arrives, the agents rise in
   beneath them, and the card closes around the group with its name. */
.about-story.story-motion :is(.builder-before, .builder-unit, .builder-agents)[data-assemble] { opacity: 1; transform: none; }
.about-story.story-motion .builder-before:not(.is-shown) :is(.builder-era-label, .builder-person, .builder-era-note) { opacity: 0; transition: opacity .2s ease; }
.about-story.story-motion .builder-before.is-shown .builder-era-note { animation: story-phase-in .45s ease 800ms backwards; }
.about-story.story-motion .builder-now .builder-era-note.is-shown { transition-delay: 900ms; }
.about-story.story-motion .builder-before.is-shown .builder-era-label { animation: story-phase-in .45s ease backwards; }
.about-story.story-motion .builder-before.is-shown .builder-person { animation: builder-person-in .6s cubic-bezier(.34,1.45,.64,1) calc(120ms + var(--i) * 60ms) backwards; }
@keyframes builder-person-in { from { opacity: 0; transform: translateY(-16px) scale(calc(var(--s) * .7)) rotate(calc(var(--tilt) * -2)); } }
.about-story.story-motion .builder-member.is-human { opacity: 0; transform: scale(.4); transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.about-story.story-motion .builder-member.is-human.is-shown { opacity: 1; transform: none; transition-delay: 300ms; }
.about-story.story-motion .builder-era-label.is-shown { transition-delay: 200ms; }
.about-story.story-motion .builder-shift-chip[data-assemble] { opacity: 0; transform: none; scale: .4; transition: scale .5s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.about-story.story-motion .builder-shift-chip.is-shown[data-assemble] { opacity: 1; scale: 1; }
.about-story.story-motion .builder-shift-chip .icon { opacity: 0; translate: -8px 0; transition: translate .45s cubic-bezier(.22,.8,.2,1), opacity .2s ease; }
.about-story.story-motion .builder-shift-chip.is-shown .icon { opacity: 1; translate: none; transition-delay: 150ms; }
.about-story.story-motion .builder-agents .is-agent { opacity: 0; transform: translateY(18px) scale(.6); transition: transform .3s ease, opacity .2s ease; }
.about-story.story-motion .builder-agents.is-shown .is-agent { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.34,1.45,.64,1) calc(200ms + var(--k) * 90ms), opacity .25s ease calc(200ms + var(--k) * 90ms); }
.about-story.story-motion .builder-unit { background: transparent; box-shadow: none; transform: none; transition: background .5s ease, box-shadow .5s ease, transform .6s cubic-bezier(.34,1.45,.64,1); }
.about-story.story-motion .builder-unit.is-shown[data-assemble] { background: var(--unit-bg); box-shadow: var(--unit-shadow); transform: rotate(-2deg); transition-delay: 650ms; }
.about-story.story-motion .builder-unit-body { opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .4s ease; }
.about-story.story-motion .builder-unit.is-shown .builder-unit-body { opacity: 1; translate: none; transition-delay: 800ms; }

.about-story .story-attitude { padding-top: 48px; }
/* Three practices, weighted by what the studio offers now. Sharing leads at full width: its icon sits alone in the
   top-left corner, the title, one paragraph and two actions (浏览资源, 查看教程) gather at the bottom left, and a wall of
   resources and tutorials drifts upward on the right in two staggered columns (one where the card is too narrow for
   two), running off the card's edges. Pointing at (or focusing) an action
   slides a one-line hint up under it and fades the other kind of card on the wall; on touch screens and phones there are
   no hints and the wall is only a picture (no pause, no links). Consulting and experiments follow in a bento row: two thirds to one third once the
   third is wide enough for its title and tag, half and half below that; experiments, with nothing to show yet, is
   marked 筹备中 and has no action. Every card opens with an icon tile. In the lead the text gathers at the bottom; in the
   two smaller cards, which sit side by side, title and text follow the icon and the last line holds a pill — 聊聊项目
   (a white button, like 查看教程) or 筹备中 (a quiet pill of the same size, not a button) — pinned to the bottom, so
   titles, text and pills line up across the row whatever the text lengths.
   The tiles speak the role capsules' language (2px white ring, the same soft shadow, one shared slight tilt) in the page
   palette: light green / blue / purple with the mark in a deep tone of the same hue, and a touch of roundness. Flat grey cards with no ring or shadow (after apple.com), no index numbers. Under 600px of
   column everything stacks and the wall becomes a strip across the top of the lead. The whole list waits folded until
   the reader reaches it (about-motion.js), then the cards rise in turn and stay. */
.about-story .story-practice { container: practice / inline-size; }
/* the list waits folded under its heading, like the slots above, until it is read (about-motion.js marks it shown) */
.about-story .story-practice-fold { display: grid; grid-template-rows: 1fr; margin-top: 36px; }
.about-story .story-practice-list { --fill: color-mix(in srgb, var(--ink) 5%, var(--card-surface)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.about-story .story-practice-card { display: flex; flex-direction: column; padding: 28px 30px 30px; border-radius: 24px; background: var(--fill); }
.about-story .story-practice-card:not(.is-lead, .is-pending) { grid-column: span 2; }
.about-story .story-practice-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; }
.about-story .story-practice-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: auto; }
.about-story .story-practice-card h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.4; }
.about-story .story-practice-tag { display: inline-flex; align-items: center; min-height: 39px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--card-surface) 55%, transparent); color: var(--muted); font: 500 14px/1.5 var(--mono); white-space: nowrap; }
/* the body unfolds from nothing; its inner box is padded (and pulled back) so nothing at its edges is clipped */
.about-story .story-practice-body { display: grid; grid-template-rows: 1fr; }
.about-story .story-practice-inner { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 6px 12px 18px; margin: 0 -12px -18px; }
.about-story .story-practice-inner > p { max-width: 620px; margin: 10px 0 0; font-size: 16px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }
.about-story .story-practice-card:not(.is-lead) .story-practice-head { flex: none; }
.about-story .story-practice-card:not(.is-lead) .story-practice-body { flex: 1; }
.about-story .story-practice-inner > .story-actions { margin-top: auto; padding-top: 22px; }
:root .about-story .story-practice-inner > .story-actions .tdl-action--secondary.tdl-action { --action-surface: var(--card-surface); border-color: var(--card-surface); }
.about-story .story-practice-art { display: flex; padding-left: 4px; }
.about-story .story-practice-art > span { --tile: 56px; position: relative; display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: 28%; background: linear-gradient(160deg, var(--tile-light), var(--tile-base)); color: var(--tile-deep); box-shadow: 0 0 0 2px var(--card-surface), 0 10px 18px -12px color-mix(in srgb, var(--ink) 30%, transparent); transform: rotate(-6deg); }
.about-story .story-practice-art > span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 3px rgb(255 255 255 / .55), inset 0 -3px 5px rgb(0 0 0 / .07); pointer-events: none; }
/* filled marks: the shell's base sheet strokes every svg (svg { fill: none; stroke: currentColor }) */
.about-story .story-practice-glyph { position: relative; width: 80%; height: 80%; fill: currentColor; stroke: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .12)); }
.about-story .art-share { --tile-light: #EAF8E1; --tile-base: #BFEBA8; --tile-deep: #4A9E2A; }
.about-story .art-consult { --tile-light: #E2F4FD; --tile-base: #AEE0F8; --tile-deep: #1F86CC; }
.about-story .art-experiment { --tile-light: #F0ECFF; --tile-base: #D3C9FA; --tile-deep: #7458E0; }
/* the lead: icon top left, text bottom left, the wall in the right column bleeding past the card's padding */
.about-story .story-practice-card.is-lead { --pad-t: 36px; --pad-x: 38px; --pad-b: 26px; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: 1fr auto; column-gap: 32px; min-height: 380px; padding: var(--pad-t) var(--pad-x) var(--pad-b); border-radius: 28px; overflow: hidden; }
.about-story .is-lead > .story-practice-head { grid-area: 1 / 1; }
.about-story .is-lead > .story-practice-body { grid-area: 2 / 1; }
.about-story .story-practice-card.is-lead h3 { font-size: 27px; }
.about-story .is-lead .story-practice-art > span { --tile: 64px; }
/* where the column is wide, break the lead at punctuation rather than inside a phrase (a phrase too long for the
   line may still wrap) */
.about-story .story-practice-inner > p.story-practice-lead { max-width: 34em; margin-top: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.about-story .story-practice-lead .nobr { white-space: nowrap; }
.about-story .story-practice-ctas { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-bottom: 30px; }
.about-story .story-practice-cta { position: relative; }
:root .about-story .story-practice-ctas .tdl-action--secondary.tdl-action { --action-surface: var(--card-surface); border-color: var(--card-surface); }
.about-story .story-practice-hint { position: absolute; top: calc(100% + 9px); left: 0; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; white-space: nowrap; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity .25s ease, translate .35s cubic-bezier(.22,.8,.2,1); }
.about-story .story-practice-hint-label { display: none; color: var(--ink); }
.about-story .story-practice-cta:has(.tdl-action:focus-visible) .story-practice-hint { opacity: 1; translate: none; }
/* the wall: two columns of cards rising forever at different speeds, the second set lower, faded at the top and
   bottom */
.about-story .story-practice-wall { grid-area: 1 / 2 / 3 / 3; position: relative; margin: calc(var(--pad-t) * -1) calc(var(--pad-x) * -1) calc(var(--pad-b) * -1) 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.about-story .story-wall-cols { position: absolute; inset: 0 var(--pad-x) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.about-story .story-wall-track { --gap: 14px; display: flex; flex-direction: column; gap: var(--gap); margin: 0; padding: 0; list-style: none; animation: story-wall-up 80s linear infinite; }
.about-story .story-wall-track + .story-wall-track { margin-top: 64px; animation-duration: 100s; }
.about-story .story-wall-track:nth-child(3) { display: none; }
.about-story .story-practice-wall:hover .story-wall-track { animation-play-state: paused; }
@keyframes story-wall-up { to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
.about-story .story-wall-card { padding: 8px; border-radius: 18px; background: var(--card-surface); box-shadow: 0 10px 28px -18px rgb(0 0 0 / .32); transition: opacity .4s ease, filter .4s ease, scale .5s cubic-bezier(.22,.8,.2,1), translate .35s cubic-bezier(.22,.8,.2,1), box-shadow .35s ease; }
/* each card is a link to its tab; under the pointer (the wall pauses) it lifts a little */
.about-story .story-wall-link { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) { .about-story .story-wall-card:hover { translate: 0 -3px; box-shadow: 0 16px 30px -16px rgb(0 0 0 / .36); } }
.about-story .story-wall-card.is-resource { padding: 12px; }
.about-story .story-wall-cover { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; object-fit: cover; background: var(--fill); }
.about-story .story-wall-name { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.4; }
.about-story .is-tutorial .story-wall-name { align-items: flex-start; padding: 9px 4px 2px; }
.about-story .is-tutorial .story-wall-name > span { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.about-story .story-wall-name > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.about-story .story-wall-name small { flex: none; margin: 1px 0 0 auto; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.about-story .story-wall-logo { flex: none; width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.about-story .story-wall-note { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.about-story .is-lead:has(.tdl-action[data-view="resources"]:focus-visible) .story-wall-card:not(.is-resource),
.about-story .is-lead:has(.tdl-action[data-view="courses"]:focus-visible) .story-wall-card:not(.is-tutorial) { opacity: .22; filter: grayscale(1); scale: .97; }
@media (hover: hover) {
  .about-story .story-practice-cta:has(.tdl-action:hover) .story-practice-hint { opacity: 1; translate: none; }
  .about-story .is-lead:has(.tdl-action[data-view="resources"]:hover) .story-wall-card:not(.is-resource),
  .about-story .is-lead:has(.tdl-action[data-view="courses"]:hover) .story-wall-card:not(.is-tutorial) { opacity: .22; filter: grayscale(1); scale: .97; }
}
/* touch screens and phones: no hints, and the wall is a picture only (no pause under a finger, no links) */
@media (hover: none), (max-width: 599.98px) {
  .about-story .story-practice-hint { display: none; }
  .about-story .story-practice-ctas { padding-bottom: 0; }
  .about-story .story-practice-wall { pointer-events: none; }
}
@container practice (max-width: 819.98px) {
  .about-story .story-practice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story .story-practice-card:not(.is-lead, .is-pending) { grid-column: auto; }
  .about-story .story-practice-card.is-lead { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: 24px; }
  /* the second button's hint would run into the wall: both hints start at the left edge, in the space kept under
     the buttons */
  .about-story .story-practice-cta { position: static; }
  .about-story .story-practice-hint { top: auto; bottom: 0; }
}
/* too narrow for two columns beside the text: one */
@container practice (min-width: 600px) and (max-width: 699.98px) {
  .about-story .story-wall-cols { grid-template-columns: minmax(0, 1fr); }
  .about-story .story-wall-track + .story-wall-track { display: none; }
}
@container practice (max-width: 599.98px) {
  .about-story .story-practice-list { grid-template-columns: minmax(0, 1fr); }
  .about-story .story-practice-card.is-lead { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
  /* phones: the wall is a low strip across the top of the card, three columns of smaller cards rising, faded at the
     top, a little at the sides, and long at the foot, where the card's icon rests on it */
  .about-story .is-lead > .story-practice-wall { grid-area: 1 / 1; height: 150px; margin: calc(var(--pad-t) * -1) calc(var(--pad-x) * -1) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 45%, transparent 92%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 45%, transparent 92%); mask-composite: intersect; }
  .about-story .is-lead > .story-practice-head { grid-area: 2 / 1; }
  .about-story .is-lead > .story-practice-body { grid-area: 3 / 1; }
  .about-story .is-lead .story-practice-art { position: relative; z-index: 2; margin-top: -30px; }
  .about-story .is-lead .story-practice-art > span { --tile: 52px; }
  /* narrow lines are too short to break only at punctuation: wrap as ordinary text, filling each line */
  .about-story .story-practice-inner > p.story-practice-lead { word-break: normal; text-wrap: wrap; }
  /* a line may still stop a character or two short (no comma may start a line, an English word does not split):
     justify the card text so its lines reach the edge */
  .about-story .story-practice-inner > p { text-align: justify; text-justify: inter-character; text-wrap: wrap; }
  .about-story .story-practice-lead .nobr { white-space: normal; }
  /* wider than the card: the outer two columns run past both edges, as if the wall continued beyond the card */
  .about-story .story-wall-cols { inset: 0 -40px auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .about-story .story-wall-track { --gap: 10px; animation-duration: 70s; }
  .about-story .story-wall-track + .story-wall-track { display: flex; margin-top: 44px; animation-duration: 86s; }
  .about-story .story-wall-track:nth-child(3) { margin-top: 18px; animation-duration: 78s; }
  .about-story .story-wall-card { padding: 5px; border-radius: 12px; }
  .about-story .story-wall-card.is-resource { padding: 8px 9px; }
  .about-story .story-wall-cover { border-radius: 8px; }
  .about-story .story-wall-name { gap: 6px; font-size: 12px; }
  .about-story .is-tutorial .story-wall-name { padding: 6px 2px 1px; }
  .about-story .is-tutorial .story-wall-name small { display: none; }
  .about-story .story-wall-logo { width: 20px; height: 20px; border-radius: 5px; }
  .about-story .story-wall-note { margin-top: 3px; font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .about-story .story-practice-hint { display: none; }
  .about-story .story-practice-ctas { padding-bottom: 0; }
}
.about-story .art-experience > span { border-radius: 50%; }
.about-story .art-brand > span { background: color-mix(in srgb,var(--purple) 35%,var(--surface)); }
.about-story .story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
/* the shared contact dialog (any view): a white card over a dimmed page, a QR-code placeholder until the real one */
.tdl-contact-dialog { width: min(360px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 28px; background: var(--card-surface, #fff); color: var(--ink); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .35); }
.tdl-contact-dialog::backdrop { background: rgb(20 20 20 / .32); backdrop-filter: blur(4px); }
.tdl-contact-dialog[open] { animation: tdl-dialog-in .32s cubic-bezier(.22,.8,.2,1); }
@keyframes tdl-dialog-in { from { opacity: 0; translate: 0 12px; scale: .97; } }
@media (prefers-reduced-motion: reduce) { .tdl-contact-dialog[open] { animation: none; } }
.tdl-contact-dialog-body { position: relative; display: grid; justify-items: center; padding: 40px 32px 34px; text-align: center; }
.tdl-contact-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, var(--card-surface, #fff)); color: var(--ink); cursor: pointer; }
.tdl-contact-close:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.tdl-contact-close .icon { width: 18px; height: 18px; }
/* the code keeps its own white quiet zone and stays dark on white in dark mode too, so it always scans */
.tdl-contact-qr { display: block; width: 184px; height: 184px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.tdl-contact-dialog h2 { margin: 24px 0 0; font-size: 21px; font-weight: 500; line-height: 1.4; }
.tdl-contact-dialog p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
/* a phone cannot scan its own screen: say how to use the code there */
.tdl-contact-dialog .tdl-contact-tip { display: none; margin-top: 10px; font-size: 13px; }
@media (hover: none), (max-width: 599.98px) { .tdl-contact-dialog .tdl-contact-tip { display: block; } }
.about-story .story-contact { margin-top: 32px; padding-top: 48px; padding-bottom: 88px; border-top: 1px solid var(--line); }
.about-story .story-contact h2 { margin: 0 0 14px; font-size: var(--story-size); font-weight: 500; line-height: 1.4; }
.about-story .story-contact > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
/* Only enhanced pages receive hidden decorative states. Text is always selectable. */
.about-story.story-motion .story-phrase { color: color-mix(in srgb,var(--ink) var(--read),var(--story-unread)); transition: color .12s linear; }
.about-story.story-motion .story-inline-slot { width: 0; margin-inline: 0; transition: width .42s cubic-bezier(.22,.8,.25,1), margin .42s cubic-bezier(.22,.8,.25,1); }
.about-story.story-motion .story-inline-slot.is-shown { width: var(--slot-width); margin-inline: var(--slot-gap); }
.about-story.story-motion .story-inline-slot > * { opacity: 0; transform: scale(.3) rotate(-12deg); transform-origin: left center; transition: opacity .25s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.about-story.story-motion .story-inline-slot.is-shown > * { opacity: 1; transform: none; }
.about-story.story-motion .slot-team > .story-team { opacity: 1; transform: none; transition: none; }
.about-story.story-motion .slot-apps > .story-apps { opacity: 1; transform: none; transition: none; }
.about-story.story-motion .slot-apps:not(.is-shown) .story-app { opacity: 0; transform: translate(0, 0) scale(.3) rotate(-15deg); transition: opacity .2s ease, transform .2s ease; }
.about-story.story-motion .slot-apps.is-shown .story-app { animation: story-app-pop .6s cubic-bezier(.34,1.56,.64,1) calc(60ms + var(--i) * 70ms) backwards; }
@keyframes story-app-pop { from { opacity: 0; transform: translate(0, 0) scale(.3) rotate(-15deg); } }
.about-story.story-motion .slot-team .story-face-pic { opacity: 0; transform: scale(0); transition: transform .45s cubic-bezier(.34,1.45,.64,1) calc(var(--ri) * 50ms), opacity .2s ease calc(var(--ri) * 50ms); }
.about-story.story-motion .slot-team.is-shown .story-face-pic { opacity: 1; transform: scale(1); transition: transform .6s cubic-bezier(.34,1.56,.64,1) calc(60ms + var(--i) * 30ms), opacity .25s ease calc(60ms + var(--i) * 30ms); }
.about-story .story-reading-measure { position: fixed !important; top: 0 !important; left: 0 !important; visibility: hidden !important; pointer-events: none !important; margin: 0 !important; }
.about-story .story-reading-measure .story-inline-slot { width: 0 !important; margin-inline: 0 !important; transition: none !important; }
.about-story .story-line-measure > .story-phrase { display: inline-block; white-space: nowrap; }
.about-story .story-line-measure .story-inline-slot { width: var(--slot-width) !important; margin-inline: var(--slot-gap) !important; }
.about-story.story-motion .story-slot:not(.is-open) :is(.story-phases li, .story-role), .about-story.story-motion .story-slot:not(.is-open) .story-professions::before { opacity: 0; }
.about-story.story-motion .story-slot.is-open .story-phases li { animation: story-phase-in .45s ease calc(120ms + var(--s) * 160ms) backwards; }
.about-story.story-motion .story-slot.is-open .story-professions::before { transform-origin: top; animation: story-rule-grow .6s cubic-bezier(.22,.8,.2,1) 80ms backwards; }
/* the Builder figure waits in its slot the same way; its rule draws down as the slot opens */
.about-story.story-motion .story-slot:not(.is-open) .builder-shift::before { opacity: 0; }
.about-story.story-motion .story-slot.is-open .builder-shift::before { transform-origin: top; animation: story-rule-grow .6s cubic-bezier(.22,.8,.2,1) 80ms backwards; }
.about-story.story-motion .story-slot.is-instant .builder-shift::before { animation: none; }
.about-story.story-motion .story-slot.is-open .story-role { animation: story-role-in .65s cubic-bezier(.34,1.45,.64,1) calc(260ms + var(--i) * 75ms) backwards; }
@keyframes story-phase-in { from { opacity: 0; translate: 0 6px; } }
@keyframes story-rule-grow { from { transform: scaleY(0); opacity: 0; } }
@keyframes story-role-in { from { opacity: 0; transform: translateY(-22px) rotate(calc(var(--tilt, 0deg) * -2.5)) scale(.85); } }
.about-story.story-motion [data-assemble] { opacity: 0; transform: translateY(14px); transition: opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1); }
.about-story.story-motion [data-assemble].is-shown { opacity: 1; transform: none; }
/* read: the fold opens and the three whole cards rise in turn (the lead first); the wall fades in once the lead has
   landed. Reached by a jump, everything is simply there. Once open it stays open until the page reloads. */
.about-story.story-motion .story-practice-fold { transition: grid-template-rows .7s cubic-bezier(.22,.7,.2,1); }
.about-story.story-motion .story-practice-fold:not(:has(> .is-shown)) { grid-template-rows: 0fr; }
.about-story.story-motion .story-practice-fold:has(> .is-instant) { transition: none; }
.about-story.story-motion .story-practice-list { --bleed: 28px; overflow: hidden; padding: 0 var(--bleed) var(--bleed); margin: 0 calc(var(--bleed) * -1) calc(var(--bleed) * -1); }
@media (max-width: 599.98px) { .about-story.story-motion .story-practice-list { --bleed: 16px; } }
.about-story.story-motion .story-practice-list:not(.is-shown) :is(.story-practice-card, .story-practice-wall) { opacity: 0; }
.about-story.story-motion .story-practice-list.is-shown:not(.is-instant) .story-practice-card { animation: story-card-rise .7s cubic-bezier(.22,.8,.2,1) calc(120ms + var(--i) * 140ms) backwards; }
@keyframes story-card-rise { from { opacity: 0; transform: translateY(36px); } }
.about-story.story-motion .story-practice-wall { transition: opacity .9s ease 650ms; }
.about-story.story-motion .story-practice-list.is-instant .story-practice-wall { transition: none; }
@keyframes story-content-arrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@media (max-width: 599.98px) {
  :root[data-study="quiet-cards"] #content.is-about { margin: 12px 16px 16px; }
  :root[data-study="quiet-cards"] .about-page.about-story { --story-inset: 16px; }
  :root[data-study="quiet-cards"] .about-story .about-hero { min-height: calc(var(--story-viewport, 100svh) * .7); padding: calc(var(--story-viewport, 100svh) * .1) 0 40px; }
  .about-story .about-quote h1 { font-size: clamp(34px, 9.6vw, 40px); line-height: 1.16; }
  .about-story .about-quote-translation { font-size: 15px; line-height: 1.75; margin-top: 20px; }
  .about-story .about-quote figcaption { font-size: 13px; }
  .about-story .story-section { padding: 26px 0; }
  .about-story .story-future, .about-story .story-practice { padding: 34px 0 40px; }
  .about-story .story-questions, .about-story .story-past { padding-bottom: 26px; }
  .about-story .story-slot-inner { padding: 0 16px; margin-inline: -16px; }
  .about-story .story-attitude { padding-top: 36px; }
  /* 22px keeps about 15 characters a line on a phone, so the phrase-by-phrase breaks rarely leave a short line; the
     line height stays at the desktop's 1.8 */
  :root[data-study="quiet-cards"] .about-page.about-story { --story-size: 22px; }
  .about-story .story-copy { letter-spacing: -.01em; line-height: 1.8; }
  /* the opening line carries faces and app icons almost two lines of text tall: give its lines more room */
  .about-story .story-introduction .story-copy { line-height: 2; }
  /* plain paragraphs (no inline graphics) wrap at the column's width like ordinary text; only the opening line (packed
     around its graphics) and the two short two-phrase headings keep breaking between phrases */
  .about-story .story-copy:not([data-stable-lines], [data-keep-phrases]) .story-phrase { white-space: normal; }
  .about-story .story-team-card { left: var(--team-card-left, 0); transform: translate(var(--team-card-x, -24px), -10px); width: min(264px, calc(100vw - 48px)); }
  .about-story .story-team:has(.story-face:is(:hover,:focus-visible)) .story-team-card { transform: translate(var(--team-card-x, -24px), 0); }
  .about-story .story-question-orb.is-live { height: 420px; }
  .about-story .story-question { padding: 9px 12px 10px 9px; gap: 0 9px; border-radius: 10px; font-size: 14px; }
  .about-story .story-question-face { width: 40px; height: 40px; }
  .about-story .story-question-topic { font-size: 12px; }
  .about-story .story-practice-list { gap: 14px; }
  .about-story .story-practice-card { padding: 22px 20px 24px; border-radius: 20px; }
  .about-story .story-practice-card.is-lead { --pad-t: 22px; --pad-x: 20px; --pad-b: 24px; border-radius: 20px; }
  .about-story .story-practice-head { gap: 16px; }
  .about-story .story-practice-card h3 { font-size: 19px; }
  .about-story .story-practice-card.is-lead h3 { font-size: 22px; }
  .about-story .story-practice-inner > p { font-size: 15px; }
  .about-story .story-practice-art > span { --tile: 48px; }
  /* phones enlarge the action pills (16px type); 筹备中 keeps their size */
  .about-story .story-practice-tag { min-height: 45px; padding: 0 18px; font-size: 16px; }
  .about-story .story-contact { padding-bottom: 56px; }
  .about-story .story-contact > p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-story *, .about-story *::before, .about-story *::after { animation: none !important; transition: none !important; }
}