:root {
  --page-bg: #050605;
  --panel-bg: #0d100d;
  --text-main: #f4f7f2;
  --text-soft: rgba(244, 247, 242, .58);
  --project-green: #65e37a;
  --project-yellow: #f5d95f;
  --line: rgba(255, 255, 255, .12);
  --radius-lg: 32px;
}

@font-face {
  font-family: "Xiangxiang Display";
  src: url("../assets/fonts/project-display-v1.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--page-bg); }
body { margin: 0; color: var(--text-main); background: var(--page-bg); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
html, body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.project-shell { width: min(1440px, calc(100% - 96px)); margin-inline: auto; }
.project-nav { position: fixed; inset: 24px 28px auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 6, 5, .72); backdrop-filter: blur(18px); }
.project-nav__back { font-size: 14px; letter-spacing: .04em; }
.project-nav__chapters { display: flex; gap: 4px; }
.project-nav__chapters a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-soft); font-size: 12px; }
.project-nav__chapters a:first-child { color: #071108; background: var(--project-green); }

.project-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 28%, rgba(101, 227, 122, .19), transparent 28%), radial-gradient(circle at 15% 88%, rgba(92, 53, 196, .22), transparent 30%), #050605; }
.project-hero::before { content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.project-hero__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 9vw; align-items: center; padding-block: 144px 120px; }
body[data-project-page="xiaoxiang"] .project-hero__layout { align-items: start; }
body[data-project-page="xiaoxiang"] .project-hero__copy { margin-top: 26px; }
.project-kicker, .section-index { margin: 0; color: var(--project-green); font-size: 13px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.project-hero h1 { margin: 0; font-family: "Xiangxiang Display", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(64px, 6.3vw, 126px); font-weight: 400; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.project-hero__english { width: 100%; margin: 14px 0 0; color: rgba(244,247,242,.76); font-size: clamp(15px, 1.25vw, 22px); font-weight: 300; letter-spacing: .2em; line-height: 1.4; text-align: justify; text-align-last: justify; white-space: nowrap; }
body[data-project-page="xiaoxiang"] .project-hero__title-lockup { display: flex; width: max-content; max-width: 100%; flex-direction: column; }
body[data-project-page="xiaoxiang"] .project-hero__english { display: flex; justify-content: space-between; letter-spacing: 0; }
.project-hero__background { max-width: 720px; margin-top: clamp(78px, 7vw, 112px); }
.project-hero__background h2 { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.4; letter-spacing: .02em; }
.project-hero__background > p { margin: 18px 0 0; color: rgba(244,247,242,.67); font-size: clamp(17px, 1.25vw, 21px); font-weight: 300; line-height: 1.75; }
body[data-project-page="xiaoxiang"] .xiaoxiang-hero__story { max-width: 720px; margin-top: clamp(78px, 7vw, 112px); }
.xiaoxiang-story__heading { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.4; letter-spacing: .02em; }
.xiaoxiang-story__tabs { display: inline-flex; align-items: baseline; }
.xiaoxiang-story__tabs button { padding: 0; border: 0; background: none; color: #f4f7f2; font: inherit; font-weight: 400; letter-spacing: inherit; opacity: .5; cursor: pointer; transition: opacity .3s ease; }
.xiaoxiang-story__tabs button[aria-selected="true"] { font-weight: 650; opacity: 1; }
.xiaoxiang-story__separator { margin: 0 12px; font-weight: 400; opacity: .5; }
.xiaoxiang-story__tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xiaoxiang-story__viewport { overflow: hidden; margin-top: 18px; }
.xiaoxiang-story__track { display: flex; width: 200%; transform: translateX(0); transition: transform .48s cubic-bezier(.22,.8,.2,1); }
.xiaoxiang-hero__story.is-role .xiaoxiang-story__track { transform: translateX(-50%); }
.xiaoxiang-story__panel { flex: 0 0 50%; min-width: 0; padding-right: 1px; }
.xiaoxiang-story__panel p { max-width: 720px; margin: 0; color: rgba(244,247,242,.67); font-size: clamp(17px, 1.25vw, 21px); font-weight: 300; line-height: 1.75; }
.project-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.project-tags li { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: rgba(255,255,255,.76); font-size: 14px; }
body[data-project-page="xiaoxiang"] .project-tags { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: clamp(6px, 1vw, 16px); margin-top: clamp(52px, 6vw, 96px); }
body[data-project-page="xiaoxiang"] .project-tags li { padding: clamp(9px, 1vw, 17px) clamp(10px, 1.2vw, 20px); border-width: 2px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.045); color: rgba(244,247,242,.78); font-size: clamp(14px, 1.4vw, 22px); font-weight: 300; white-space: nowrap; }
.project-meta { display: flex; gap: 56px; margin: 52px 0 0; }
.project-meta div { display: grid; gap: 7px; }
.project-meta dt { color: var(--text-soft); font-size: 12px; letter-spacing: .12em; }
.project-meta dd { margin: 0; font-size: 16px; }
.project-hero__media { position: relative; margin: 0; }
.project-hero__media::before { content: ""; position: absolute; inset: 11% -12% -8%; border-radius: 50%; background: rgba(101,227,122,.22); filter: blur(80px); }
.project-hero__media video { position: relative; width: 100%; aspect-ratio: 345 / 461; object-fit: cover; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-lg); box-shadow: 0 48px 120px rgba(0,0,0,.55); }
.xiaoxiang-carousel-frame { width: 100%; max-width: 520px; aspect-ratio: 1268 / 2572; overflow: visible; }
.xiaoxiang-carousel-embed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.project-hero__carousel { width: 100%; max-width: 520px; min-width: 0; }
body[data-project-page="xiaoxiang"] .project-hero__carousel { position: relative; isolation: isolate; }
body[data-project-page="xiaoxiang"] .project-hero__carousel::before { content: ""; position: absolute; z-index: 0; inset: 11% -12% 0; border-radius: 50%; background: rgba(101,227,122,.22); filter: blur(80px); pointer-events: none; }
body[data-project-page="xiaoxiang"] .project-hero__media::before { content: none; }
body[data-project-page="xiaoxiang"] .xiaoxiang-carousel-frame { z-index: 1; }
body[data-project-page="xiaoxiang"] .xiaoxiang-carousel-pagination { position: relative; z-index: 1; }
.xiaoxiang-carousel-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; height: 18px; margin-top: 14px; }
.xiaoxiang-carousel-pagination span { width: 8px; height: 8px; border-radius: 999px; background: #3b3d42; transition: width .32s ease, background-color .32s ease, box-shadow .32s ease; }
.xiaoxiang-carousel-pagination span.is-active { width: 23px; background: #fff; box-shadow: 0 0 9px rgba(255,255,255,.3); }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; display: flex; gap: 12px; align-items: center; color: var(--text-soft); font-size: 12px; letter-spacing: .12em; transform: translateX(-50%); }

.project-section { min-height: 72vh; padding: 160px 0; border-top: 1px solid rgba(255,255,255,.06); }
.project-section h2 { max-width: 1020px; margin: 28px 0 0; font-size: clamp(48px, 6.4vw, 108px); line-height: 1.02; letter-spacing: -.055em; }
.section-heading { display: flex; width: max-content; max-width: 100%; flex-direction: column; align-items: flex-start; gap: 13px; }
.project-section .section-heading h2 { margin: 0; font-family: "Xiangxiang Display", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(42px, 5.2vw, 84px); line-height: 1.08; letter-spacing: -.045em; }
.project-section .section-heading h2 { font-weight: 400; }
.section-heading > p, .result-english { width: 100%; margin: 0; color: rgba(244,247,242,.48); font-size: 13px; font-weight: 300; letter-spacing: .2em; line-height: 1.5; text-align: justify; text-align-last: justify; }
.section-intro { margin-bottom: 48px; }
.section-copy { max-width: 610px; padding-top: 68px; color: rgba(244,247,242,.72); font-size: 20px; line-height: 1.78; }
.section-copy p { margin: 0 0 26px; }
.content-placeholder { padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 14px; }
.overview-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .6fr); gap: 8vw; align-items: start; }
.strategy-section { background: #f0f5eb; color: #0b110c; }
.strategy-section .section-index { color: #298c3c; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(11,17,12,.2); }
.strategy-card { min-height: 420px; padding: 34px 32px; border-right: 1px solid rgba(11,17,12,.2); }
.strategy-card:last-child { border-right: 0; }
.strategy-card > span { display: inline-block; color: #298c3c; font: 600 13px/1 system-ui, sans-serif; letter-spacing: .12em; }
.strategy-card h3 { max-width: 330px; margin: 110px 0 0; font-size: clamp(28px, 2.3vw, 42px); line-height: 1.15; letter-spacing: -.04em; }
.strategy-card p { max-width: 350px; margin: 28px 0 0; color: rgba(11,17,12,.62); font-size: 16px; line-height: 1.75; }

.visuals-section { padding-bottom: 40px; overflow-anchor: none; background: linear-gradient(180deg, #050605, #091009 65%, #050605); }
.visuals-section > .section-intro { display: flex; justify-content: center; margin-bottom: 0; }
.visuals-section > .section-intro .section-heading { align-items: center; }
.visuals-section > .section-intro .section-heading > p { display: flex; justify-content: space-between; letter-spacing: 0; }
.visual-block { padding-top: 80px; padding-bottom: 150px; }
.visual-switcher { display: flex; flex-direction: column; align-items: center; padding-top: 12px; text-align: center; }
.visual-switcher__copy { margin: 0; color: var(--text-soft); font-size: 18px; line-height: 1.7; white-space: nowrap; }
.visual-jelly { position: relative; z-index: 3; display: flex; gap: 8px; max-width: calc(100% - 24px); margin-top: 32px; }
.visuals-section [data-visual-panel] { padding-top: 36px; padding-bottom: 150px; }
.visuals-section [data-visual-panel] > .visual-block__copy { display: none; }
.has-project-js .visuals-section [data-visual-panel]:not(.is-active) { display: none; }
.visual-jelly__button { min-width: 86px; padding: 10px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #27272a; color: #bdbdbd; font: 500 15px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.visual-jelly__button:hover { border-color: rgba(45,255,185,.48); }
.visual-jelly__button:focus-visible { outline: 2px solid #2dffb9; outline-offset: 3px; }
.visual-jelly__button[aria-checked="true"] { border-color: #2dffb9; background: #2dffb9; color: #18181b; box-shadow: 0 8px 24px rgba(45,255,185,.18); }
.visual-jelly__button.is-jelly { animation: visual-jelly-pop .58s cubic-bezier(.22,.8,.2,1); }
@keyframes visual-jelly-pop { 0%, 100% { transform: scale(1); } 23% { transform: scale(1.12,.82); } 49% { transform: scale(.9,1.08); } 73% { transform: scale(1.04,.96); } }
.visual-block__copy { max-width: 720px; margin-bottom: 58px; }
.visual-block__copy h3 { margin: 14px 0 0; font-size: clamp(36px, 4.4vw, 72px); line-height: 1.08; letter-spacing: -.045em; }
body[data-project-page="xiaoxiang"] .visual-block__copy h3 { font-family: "Xiangxiang Display", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; }
body[data-project-page="xiaoxiang"] .visual-block:not(.visual-block--opening) .visual-block__copy { margin-inline: auto; text-align: center; }
body[data-project-page="xiaoxiang"] .visual-block:not(.visual-block--opening) .visual-block__copy > p:last-child { margin-inline: auto; }
.visual-block__copy > p:last-child { max-width: 650px; margin: 24px 0 0; color: var(--text-soft); font-size: 18px; line-height: 1.7; }
.visual-label { margin: 0; color: var(--project-green); font-size: 12px; font-weight: 600; letter-spacing: .17em; }
.phone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: end; }
.phone-frame { position: relative; margin: 0; min-width: 0; aspect-ratio: 350 / 758; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: linear-gradient(145deg, rgba(101,227,122,.16), rgba(255,255,255,.035)); box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.opening-marquee, .popup-marquee, .middle-marquee, .header-marquee { --edge-fade: clamp(36px, 7vw, 104px); --opening-card-width: clamp(190px, 16vw, 250px); width: calc(100% + 64px); margin: -80px -32px; padding: 80px 32px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent); }
.phone-grid--opening, .phone-grid--popup, .phone-grid--middle, .phone-grid--header { display: flex; width: max-content; height: calc(var(--opening-card-width) * 2.165714); flex-wrap: nowrap; align-items: center; gap: 23px; will-change: transform; }
.phone-grid--opening > .phone-frame, .phone-grid--popup > .phone-frame, .phone-grid--middle > .phone-frame, .phone-grid--header > .phone-frame { flex: 0 0 auto; width: var(--opening-card-width); transition: width .25s ease; }
.phone-grid--opening > .phone-frame:hover, .phone-grid--popup > .phone-frame:hover, .phone-grid--middle > .phone-frame:hover, .phone-grid--header > .phone-frame:hover { z-index: 2; width: calc(var(--opening-card-width) * 1.25); }
@media (hover: none) {
  .phone-grid--opening > .phone-frame.is-touch-active, .phone-grid--popup > .phone-frame.is-touch-active, .phone-grid--middle > .phone-frame.is-touch-active, .phone-grid--header > .phone-frame.is-touch-active { z-index: 2; width: calc(var(--opening-card-width) * 1.25); }
}
.phone-grid--opening video, .phone-grid--popup video, .phone-grid--middle video, .phone-grid--header video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.phone-frame img, .media-rail img, .banner-stack img { width: 100%; height: 100%; object-fit: cover; }
.phone-grid--compact .phone-frame { aspect-ratio: 373 / 767; }
.visual-block--rail { width: 100%; overflow: hidden; padding-bottom: 170px; }
.media-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 23vw); gap: 20px; overflow-x: auto; padding: 0 max(48px, calc((100vw - 1440px) / 2)) 50px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; cursor: grab; }
body[data-project-page="xiaoxiang"] .media-rail { scrollbar-width: none; }
body[data-project-page="xiaoxiang"] .media-rail::-webkit-scrollbar { display: none; }
.media-rail:active { cursor: grabbing; }
.media-rail.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.media-rail figure { margin: 0; aspect-ratio: 373 / 767; overflow: hidden; border-radius: 26px; background: var(--panel-bg); scroll-snap-align: center; }

.has-project-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.has-project-js [data-reveal].is-visible { opacity: 1; transform: none; }
.project-nav__chapters a.is-active { color: #071108; background: var(--project-green); }
.project-nav__chapters a:first-child:not(.is-active) { color: var(--text-soft); background: transparent; }
figure.is-media-error { position: relative; min-height: 180px; background: linear-gradient(135deg, rgba(116,255,92,.16), rgba(111,74,255,.2)), var(--panel-bg); }
figure.is-media-error::after { content: "素材加载失败"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.62); font-size: 14px; letter-spacing: .08em; }
.other-gallery-card__media.is-media-error { position: relative; }
.other-gallery-card__media.is-media-error::after { content: "素材加载失败"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.62); font-size: 14px; letter-spacing: .08em; }
.phone-frame.is-media-loading::after { content: "动效加载中…"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.65); font-size: 14px; letter-spacing: .08em; pointer-events: none; }
.phone-frame.is-media-loading video { visibility: hidden; }
body[data-project-page="xiaoxiang"] .phone-frame.is-media-loading video { visibility: visible; }
body[data-project-page="xiaoxiang"] .phone-frame.is-media-loading::after { inset: auto 14px 14px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.58); color: #fff; font-size: 12px; }
.other-gallery-card__media.is-media-loading { position: relative; }
.other-gallery-card__media.is-media-loading::after { content: "动效加载中…"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.65); font-size: 14px; letter-spacing: .08em; pointer-events: none; }
.other-gallery-card__media.is-media-loading video { visibility: hidden; }
.tool-card figure.is-media-loading { position: relative; }
.tool-card figure.is-media-loading::after { content: "视频加载中…"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.65); font-size: 14px; letter-spacing: .08em; pointer-events: none; }
.tool-card figure.is-media-loading video { visibility: hidden; }
.is-media-error[data-project-media] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .has-project-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .media-rail { scroll-behavior: auto; }
  .visual-jelly__button { transition: none; }
  .visual-jelly__button.is-jelly { animation: none; }
}
.banner-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.banner-stack figure { display: grid; place-items: center; margin: 0; aspect-ratio: 1080 / 498; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel-bg); }
.banner-stack figure:first-child { grid-column: auto; }
.banner-stack img { width: 100%; height: 100%; object-fit: contain; }
.tools-section { background: radial-gradient(circle at 90% 8%, rgba(104,75,255,.18), transparent 30%), #040507; }
.tools-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr); column-gap: 7vw; align-items: end; margin-bottom: 94px; }
.tools-intro .section-index { grid-column: 1 / -1; }
.tools-intro .section-heading { grid-column: 1; }
.tools-intro h2 { max-width: 920px; }
body[data-project-page="xiaoxiang"] .tools-intro h2 { text-align: left; }
.tools-intro > p:last-child { margin: 0 0 8px; color: var(--text-soft); font-size: 17px; line-height: 1.75; }
body[data-project-page="xiaoxiang"] .tools-intro > p:last-child { text-align: justify; }
.tool-showcase { display: grid; gap: 88px; }
.tool-card { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 36px 44px; padding: 38px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.025); }
.tool-card__heading h3 { margin: 0; font-size: clamp(48px, 5vw, 82px); line-height: 1; }
.tool-card__title-video { display: block; width: 100%; height: auto; }
.tool-card__heading p { margin: 22px 0 0; color: var(--text-soft); line-height: 1.6; }
.tool-card[data-tool="layers"], .tool-card[data-tool="delivery"] { grid-template-rows: auto minmax(0, 1fr) auto; }
.tool-card[data-tool="layers"] .tool-card__heading, .tool-card[data-tool="delivery"] .tool-card__heading { grid-column: 1; grid-row: 1; }
.tool-card__metric { grid-column: 1; grid-row: 2; align-self: center; width: 100%; max-width: 290px; container-type: inline-size; transform: translateX(-8px); }
.tool-card__metric-values { display: grid; grid-template-columns: max-content 13.5% max-content; justify-content: space-between; align-items: center; min-height: 21.05cqw; padding-inline: 3%; }
.tool-card__metric-number { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 15.9cqw; font-weight: 900; line-height: 1; white-space: nowrap; }
.tool-card__metric-number span { font-size: .725em; }
.tool-card__metric-number--before { color: transparent; background: linear-gradient(#7dd6ff, #2196f3); background-clip: text; }
.tool-card__metric-number--after { color: transparent; background: linear-gradient(#7fff9e, #1db954); background-clip: text; }
.tool-card__metric-values img { width: 100%; height: auto; }
.tool-card__metric p { margin: 1.27cqw 0 0; color: #aaa; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 5.97cqw; font-weight: 500; line-height: 1.5; text-align: center; white-space: nowrap; }
.tool-card[data-tool="layers"] figure, .tool-card[data-tool="delivery"] figure { grid-row: 1 / span 3; }
.tool-card[data-tool="layers"] ul, .tool-card[data-tool="delivery"] ul { grid-column: 1; grid-row: 3; }
.tool-card__folder { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; transform: translateY(9px); }
.folder-float { position: relative; z-index: 1; width: 200px; height: 148px; color: #f5f5f5; }
.folder-float__trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.folder-float__back { position: absolute; inset: 27px 0 0; border-radius: 14px; background: #3f3f46; box-shadow: 0 18px 32px rgba(0,0,0,.32); }
.folder-float__back::before { position: absolute; top: -15px; left: 0; width: 78px; height: 27px; border-radius: 11px 12px 0 0; background: #3f3f46; content: ""; }
.folder-float__paper { position: absolute; top: 33px; left: 15px; width: 170px; height: 95px; border-radius: 9px; background: #f5f5f5; transform-origin: center bottom; transition: transform 520ms cubic-bezier(.18,1.35,.35,1); }
.folder-float__paper--back { transform: translateY(3px) rotate(-4deg); opacity: .8; }
.folder-float__paper--front { transform: translateY(0) rotate(4deg); }
.folder-float__front { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 102px; padding: 18px 18px 20px; border-radius: 14px; background: #52525b; box-shadow: inset 0 1px rgba(255,255,255,.12); transform-origin: center bottom; transition: transform 520ms cubic-bezier(.18,1.35,.35,1); }
.folder-float__front strong { font-size: 20px; line-height: 1.2; letter-spacing: .03em; }
.folder-float__front small { margin-top: 7px; color: #d4d4d8; font-size: 13px; }
.folder-float__caption { position: absolute; right: 0; bottom: -38px; left: 0; margin: 0; color: #f5f5f5; font-size: 16px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-align: center; }
.folder-float__items { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.folder-float__item { position: absolute; bottom: 80px; left: 50%; min-width: 72px; padding: 9px 12px; border: 1px solid rgba(24,24,27,.08); border-radius: 999px; background: #f5f5f5; box-shadow: 0 10px 24px rgba(0,0,0,.25); color: #18181b; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px) scale(.55); transition: transform 520ms cubic-bezier(.18,1.3,.3,1), opacity 220ms ease; transition-delay: 0ms; cursor: pointer; }
.folder-float[data-open="true"] .folder-float__paper--back { transform: translateY(-14px) rotate(-8deg); }
.folder-float[data-open="true"] .folder-float__paper--front { transform: translateY(-23px) rotate(8deg); }
.folder-float[data-open="true"] .folder-float__front { transform: perspective(500px) rotateX(-16deg) translateY(5px); }
.folder-float[data-open="true"] .folder-float__items { z-index: 3; pointer-events: auto; }
.folder-float[data-open="true"] .folder-float__item { opacity: 1; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--tilt)); transition-delay: calc(var(--i) * 45ms); }
.folder-float__item:hover, .folder-float__item:focus-visible { background: #2dffb9; }
.folder-float__trigger:focus-visible, .folder-float__item:focus-visible { outline: 2px solid #2dffb9; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .folder-float__paper, .folder-float__front, .folder-float__item { transition-duration: 0ms; transition-delay: 0ms; } }
.tool-card figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: #070707; }
.tool-card figure img { width: 100%; height: 100%; object-fit: contain; }
.tool-card figure video { width: 100%; height: 100%; object-fit: contain; }
.tool-card ul { align-self: end; margin: 0; padding: 0; list-style: none; }
.tool-card li { padding: 14px 0; border-bottom: 1px solid var(--line); color: rgba(255,255,255,.67); font-size: 14px; line-height: 1.55; }

.result-section { min-height: 100vh; display: grid; align-items: center; overflow: hidden; background: var(--project-green); color: #071108; }
.result-section .section-index { color: #176d2a; }
.result-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .6fr); gap: 8vw; align-items: end; }
.result-eyebrow { margin: 92px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.result-section .result-statement { margin-top: 18px; font-size: clamp(72px, 10vw, 176px); line-height: 1.04; }
.result-english { color: rgba(7,17,8,.56); }
.result-section .result-statement { font-family: "Xiangxiang Display", "PingFang SC", "Microsoft YaHei", sans-serif; }
.result-section .result-statement { font-weight: 400; }
.result-summary { padding-bottom: 10px; }
.result-summary > p { margin: 0 0 40px; font-size: 19px; line-height: 1.75; }
.result-summary ol { margin: 0 0 52px; padding: 0; list-style: none; border-top: 1px solid rgba(7,17,8,.22); }
.result-summary li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(7,17,8,.22); }
.result-summary li span { font-size: 12px; font-weight: 700; }
.result-summary .content-placeholder { color: rgba(7,17,8,.58); border-color: rgba(7,17,8,.22); font-size: 13px; }

.project-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 32px 48px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 14px; }
.project-footer > span { color: rgba(255,255,255,.43); font-size: 10px; letter-spacing: .15em; white-space: nowrap; }
.project-footer > a:last-child { justify-self: end; }
@media (max-width: 600px) {
  .project-footer { grid-template-columns: 1fr auto; }
  .project-footer > span { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

@media (max-width: 1100px) {
  body[data-project-page="xiaoxiang"] .project-tags { gap: 6px; }
  body[data-project-page="xiaoxiang"] .project-tags li { padding: 8px; font-size: clamp(11px, 1.25vw, 14px); }
  .project-shell { width: min(100% - 48px, 960px); }
  .project-nav { inset: 18px 20px auto; }
  .project-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 7vw; padding-block: 124px 100px; }
  .project-hero h1 { font-size: clamp(68px, 10vw, 112px); }
  .project-hero__english { letter-spacing: .5em; }
  .project-section { padding: 124px 0; }
  .overview-layout, .result-layout { grid-template-columns: 1fr; gap: 30px; }
  .section-copy { max-width: 760px; padding-top: 20px; }
  .strategy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strategy-card { min-height: 360px; padding-inline: 24px; }
  .strategy-card h3 { margin-top: 74px; }
  .phone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 52px; }
  .phone-frame:nth-child(even) { transform: none; }
  .media-rail { grid-auto-columns: minmax(290px, 38vw); padding-inline: 24px; }
  .tools-intro { grid-template-columns: 1fr; }
  .tools-intro > p:last-child { max-width: 620px; margin-top: 28px; }
  .tool-card { grid-template-columns: 230px minmax(0, 1fr); padding: 28px; }
  .result-summary { max-width: 680px; padding-bottom: 0; }
}

@media (max-width: 720px) {
  :root { --radius-lg: 22px; }
  .project-shell { width: calc(100% - 32px); }
  .project-nav { inset: 10px 10px auto; padding: 7px 8px 7px 13px; }
  .project-nav__back { font-size: 12px; }
  .project-nav__chapters { gap: 1px; }
  .project-nav__chapters a { width: 29px; height: 29px; font-size: 10px; }
  .project-hero { min-height: auto; }
  .project-hero__layout { grid-template-columns: 1fr; gap: 58px; padding-block: 110px 92px; }
  .project-hero h1 { font-size: clamp(58px, 21vw, 88px); }
  .project-hero h1 { white-space: normal; font-size: clamp(52px, 15vw, 78px); }
  .project-hero__english { margin-top: 10px; font-size: 12px; letter-spacing: .16em; }
  .project-hero__background { margin-top: 62px; }
  body[data-project-page="xiaoxiang"] .xiaoxiang-hero__story { margin-top: 62px; }
  .xiaoxiang-story__heading { font-size: 20px; }
  .xiaoxiang-story__separator { margin-inline: 8px; }
  .xiaoxiang-story__viewport { margin-top: 12px; }
  .xiaoxiang-story__panel p { font-size: 15px; }
  .project-hero__background h2 { font-size: 20px; }
  .project-hero__background > p { margin-top: 12px; font-size: 15px; }
  body[data-project-page="xiaoxiang"] .project-tags { flex-wrap: nowrap; gap: clamp(5px, 1.6vw, 9px); margin-top: 42px; }
  body[data-project-page="xiaoxiang"] .project-tags li { flex: 0 0 auto; padding: 8px clamp(8px, 2vw, 12px); font-size: clamp(11px, 3vw, 14px); white-space: nowrap; }
  .project-meta { gap: 32px; margin-top: 38px; }
  .project-hero__media { width: min(82vw, 390px); margin-inline: auto; }
  .xiaoxiang-carousel-frame { height: auto; min-height: 0; aspect-ratio: 1268 / 2572; }
  .scroll-cue { display: none; }
  .project-section { min-height: 0; padding: 96px 0; }
  .project-section h2 { margin-top: 20px; font-size: clamp(44px, 14vw, 68px); }
  .project-section .section-heading h2 { margin: 0; font-size: clamp(42px, 12vw, 64px); }
  .section-heading > p, .result-english { font-size: 10px; letter-spacing: .34em; }
  .section-intro { margin-bottom: 28px; }
  .section-copy { padding-top: 14px; font-size: 17px; }
  .strategy-grid { grid-template-columns: 1fr; }
  .strategy-card { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(11,17,12,.2); }
  .strategy-card:last-child { border-bottom: 0; }
  .strategy-card h3 { margin-top: 72px; }
  .visual-block { padding-top: 48px; padding-bottom: 96px; }
  .visual-switcher { padding-top: 20px; }
  .visual-switcher__copy { font-size: 16px; white-space: normal; }
  .visual-jelly { width: max-content; margin: 22px auto 0; }
  .visual-jelly__button { min-width: 0; padding: 9px 14px; font-size: 13px; }
  .visuals-section [data-visual-panel] { padding-top: 28px; padding-bottom: 72px; }
  .visual-block__copy { margin-bottom: 38px; }
  .visual-block__copy > p:last-child { font-size: 16px; }
  .phone-grid { grid-template-columns: 1fr; gap: 22px; padding-inline: 13vw; }
  .opening-marquee, .popup-marquee, .middle-marquee, .header-marquee { --opening-card-width: min(64vw, 250px); }
  .phone-grid--opening, .phone-grid--popup, .phone-grid--middle, .phone-grid--header { gap: 27px; padding-inline: 0; }
  .phone-frame { border-radius: 22px; }
  .visual-block--rail { padding-bottom: 100px; }
  .media-rail { grid-auto-columns: minmax(270px, 78vw); gap: 14px; padding: 0 16px 34px; cursor: auto; }
  .banner-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .banner-stack figure { border-radius: 16px; }
  .tools-intro { grid-template-columns: 1fr; margin-bottom: 56px; }
  .tool-showcase { gap: 34px; }
  .tool-card { grid-template-columns: 1fr; gap: 28px; padding: 22px; }
  .tool-card[data-tool="layers"], .tool-card[data-tool="delivery"] { grid-template-rows: auto; }
  .tool-card[data-tool="layers"] .tool-card__heading, .tool-card__metric, .tool-card[data-tool="layers"] figure, .tool-card[data-tool="layers"] ul, .tool-card[data-tool="delivery"] .tool-card__heading, .tool-card__folder, .tool-card[data-tool="delivery"] figure, .tool-card[data-tool="delivery"] ul { grid-column: auto; grid-row: auto; }
  .tool-card__metric { transform: none; }
  .tool-card__folder { margin-top: 82px; margin-bottom: 38px; transform: none; }
  .tool-card figure { grid-column: auto; grid-row: auto; order: 2; }
  .tool-card ul { order: 3; }
  .tool-card__heading h3 { font-size: 52px; }
  .result-section { min-height: auto; }
  .result-layout { grid-template-columns: 1fr; gap: 58px; }
  .result-section .result-statement { font-size: clamp(64px, 20vw, 98px); }
  .result-eyebrow { margin-top: 56px; }
  .project-footer { gap: 18px; padding: 26px 16px; font-size: 12px; }
}

@media (max-width: 420px) {
  .tool-card__folder { transform: scale(.82); }
}

body[data-project-page="xiaoxiang"] .project-nav__back { font-size: 22px; white-space: nowrap; }
body[data-project-page="xiaoxiang"] .project-nav__chapters a { width: 44px; height: 44px; font-size: 22px; }
body[data-project-page="xiaoxiang"] .project-hero__background > p { font-size: 22px; }
body[data-project-page="xiaoxiang"] .visual-switcher__copy { font-size: 22px; }
body[data-project-page="xiaoxiang"] .visual-jelly__button { font-size: 22px; }
body[data-project-page="xiaoxiang"] .visual-jelly__button[aria-checked="false"] {
  background: rgba(39, 39, 42, .68);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
body[data-project-page="xiaoxiang"] .visual-jelly { gap: 14px; }
body[data-project-page="xiaoxiang"] .tools-intro > p:last-child { font-size: 22px; }
body[data-project-page="xiaoxiang"] .tool-card__heading p { font-size: 22px; }
body[data-project-page="xiaoxiang"] .tool-card__metric p { font-size: 22px; line-height: 1.4; white-space: normal; }
body[data-project-page="xiaoxiang"] .tool-card li { font-size: 22px; }

body[data-project-page="xiaoxiang"] .project-hero {
  background: radial-gradient(circle at 76% 28%, rgba(101, 227, 122, .19), transparent 28%), radial-gradient(ellipse 680px 520px at 15% 100%, rgba(92, 53, 196, .18), transparent 100%), #050605;
}
body[data-project-page="xiaoxiang"] .visuals-section {
  border-top: 0;
  background: radial-gradient(ellipse 680px 520px at 15% 0%, rgba(92, 53, 196, .18), transparent 100%), radial-gradient(ellipse 680px 520px at 90% 100%, rgba(104, 75, 255, .18), transparent 100%), linear-gradient(180deg, #050605, #091009 65%, #050605);
}
body[data-project-page="xiaoxiang"] .tools-section {
  border-top: 0;
  background: radial-gradient(ellipse 680px 520px at 90% 0%, rgba(104, 75, 255, .18), transparent 100%), #050605;
}

@media (min-width: 1101px) {
  body[data-project-page="xiaoxiang"] .tools-intro { grid-template-columns: minmax(0, 1fr) minmax(480px, .55fr); column-gap: 80px; }
}

body[data-project-page="xiaoxiang"] .card-spotlight {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: #ffffff40;
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  border-color: #222;
  background: #111;
}
body[data-project-page="xiaoxiang"] .card-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity: 0;
  transition: opacity .5s ease;
}
body[data-project-page="xiaoxiang"] .card-spotlight:hover::before,
body[data-project-page="xiaoxiang"] .card-spotlight:focus-within::before,
body[data-project-page="xiaoxiang"] .card-spotlight.is-touch-active::before { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .xiaoxiang-story__tabs button, .xiaoxiang-story__track { transition: none; }
  body[data-project-page="xiaoxiang"] .card-spotlight::before { transition: none; }
}

@media (max-width: 720px) {
  body[data-project-page="xiaoxiang"] .project-nav__chapters a { width: 35px; height: 35px; }
  body[data-project-page="xiaoxiang"] .visual-jelly { gap: 4px; }
  body[data-project-page="xiaoxiang"] .visual-jelly__button { padding: 9px 8px; }
}