*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { background: #000; color: #fff; font-family: 'Inter',system-ui,sans-serif; overflow-x: hidden; }
.snap-slide { scroll-snap-align: start; scroll-snap-stop: normal; }
section[id] { scroll-margin-top: 0; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.block { display: block; }
.grid { display: grid; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.gap-0 { gap: 0; }
.gap-x-0 { column-gap: 0; }
.gap-y-0 { row-gap: 0; }
.gap-0.5 { gap: 0.125rem; }
.gap-x-0.5 { column-gap: 0.125rem; }
.gap-y-0.5 { row-gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-1.5 { gap: 0.375rem; }
.gap-x-1.5 { column-gap: 0.375rem; }
.gap-y-1.5 { row-gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-2.5 { gap: 0.625rem; }
.gap-x-2.5 { column-gap: 0.625rem; }
.gap-y-2.5 { row-gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-8 { row-gap: 2rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.top-0 { top: 0px; }
.right-0 { right: 0px; }
.bottom-0 { bottom: 0px; }
.left-0 { left: 0px; }
.top-1/2 { top: 50%; }
.right-1/2 { right: 50%; }
.bottom-1/2 { bottom: 50%; }
.left-1/2 { left: 50%; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.top-5 { top: 1.25rem; }
.right-5 { right: 1.25rem; }
.bottom-5 { bottom: 1.25rem; }
.left-5 { left: 1.25rem; }
.top-6 { top: 1.5rem; }
.right-6 { right: 1.5rem; }
.bottom-6 { bottom: 1.5rem; }
.left-6 { left: 1.5rem; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-1\/2 { transform: translateX(50%); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.translate-y-1\/2 { transform: translateY(50%); }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-[60] { z-index: 60; }
.w-1 { width: 0.25rem; }
.h-1 { height: 0.25rem; }
.w-1.5 { width: 0.375rem; }
.h-1.5 { height: 0.375rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-2.5 { width: 0.625rem; }
.h-2.5 { height: 0.625rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-32 { width: 8rem; }
.h-32 { height: 8rem; }
.w-40 { width: 10rem; }
.h-40 { height: 10rem; }
.w-48 { width: 12rem; }
.h-48 { height: 12rem; }
.w-1/2 { width: 50%; }
.h-1/2 { height: 50%; }
.w-1/3 { width: 33.333%; }
.h-1/3 { height: 33.333%; }
.w-2/3 { width: 66.667%; }
.h-2/3 { height: 66.667%; }
.w-1/4 { width: 25%; }
.h-1/4 { height: 25%; }
.w-3/4 { width: 75%; }
.h-3/4 { height: 75%; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-2/5 { width: 40%; }
.h-2/5 { height: 40%; }
.w-3/5 { width: 60%; }
.h-3/5 { height: 60%; }
.w-\[7px\] { width: 7px; }
.h-\[2px\] { height: 2px; }
.h-\[7px\] { height: 7px; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.min-w-\[40px\] { min-width: 40px; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[90vw\] { max-width: 90vw; }
.max-h-\[78vh\] { max-height: 78vh; }
.p-0 { padding: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }
.p-1 { padding: 0.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pt-1 { padding-top: 0.25rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pl-1 { padding-left: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.p-2 { padding: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }
.p-2.5 { padding: 0.625rem; }
.px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.pt-2.5 { padding-top: 0.625rem; }
.pb-2.5 { padding-bottom: 0.625rem; }
.pl-2.5 { padding-left: 0.625rem; }
.pr-2.5 { padding-right: 0.625rem; }
.p-3 { padding: 0.75rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pl-3 { padding-left: 0.75rem; }
.pr-3 { padding-right: 0.75rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-4 { padding-left: 1rem; }
.pr-4 { padding-right: 1rem; }
.p-5 { padding: 1.25rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pt-5 { padding-top: 1.25rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pl-5 { padding-left: 1.25rem; }
.pr-5 { padding-right: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-6 { padding-right: 1.5rem; }
.p-8 { padding: 2rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-8 { padding-left: 2rem; }
.pr-8 { padding-right: 2rem; }
.p-10 { padding: 2.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-10 { padding-right: 2.5rem; }
.p-12 { padding: 3rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-12 { padding-top: 3rem; }
.pb-12 { padding-bottom: 3rem; }
.pl-12 { padding-left: 3rem; }
.pr-12 { padding-right: 3rem; }
.p-16 { padding: 4rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-16 { padding-top: 4rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-16 { padding-left: 4rem; }
.pr-16 { padding-right: 4rem; }
.p-20 { padding: 5rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-20 { padding-top: 5rem; }
.pb-20 { padding-bottom: 5rem; }
.pl-20 { padding-left: 5rem; }
.pr-20 { padding-right: 5rem; }
.p-32 { padding: 8rem; }
.px-32 { padding-left: 8rem; padding-right: 8rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-32 { padding-top: 8rem; }
.pb-32 { padding-bottom: 8rem; }
.pl-32 { padding-left: 8rem; }
.pr-32 { padding-right: 8rem; }
.m-0 { margin: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.m-0.5 { margin: 0.125rem; }
.mx-0.5 { margin-left: 0.125rem; margin-right: 0.125rem; }
.my-0.5 { margin-top: 0.125rem; margin-bottom: 0.125rem; }
.mt-0.5 { margin-top: 0.125rem; }
.mb-0.5 { margin-bottom: 0.125rem; }
.ml-0.5 { margin-left: 0.125rem; }
.mr-0.5 { margin-right: 0.125rem; }
.m-1 { margin: 0.25rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.m-2 { margin: 0.5rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.m-3 { margin: 0.75rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-3 { margin-bottom: 0.75rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.m-4 { margin: 1rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-4 { margin-left: 1rem; }
.mr-4 { margin-right: 1rem; }
.m-5 { margin: 1.25rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.ml-5 { margin-left: 1.25rem; }
.mr-5 { margin-right: 1.25rem; }
.m-6 { margin: 1.5rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-6 { margin-left: 1.5rem; }
.mr-6 { margin-right: 1.5rem; }
.m-8 { margin: 2rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-8 { margin-left: 2rem; }
.mr-8 { margin-right: 2rem; }
.m-10 { margin: 2.5rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-10 { margin-left: 2.5rem; }
.mr-10 { margin-right: 2.5rem; }
.m-12 { margin: 3rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.mt-12 { margin-top: 3rem; }
.mb-12 { margin-bottom: 3rem; }
.ml-12 { margin-left: 3rem; }
.mr-12 { margin-right: 3rem; }
.m-16 { margin: 4rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.mt-16 { margin-top: 4rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-16 { margin-left: 4rem; }
.mr-16 { margin-right: 4rem; }
.m-20 { margin: 5rem; }
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
.mt-20 { margin-top: 5rem; }
.mb-20 { margin-bottom: 5rem; }
.ml-20 { margin-left: 5rem; }
.mr-20 { margin-right: 5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.text-xs { font-size: 0.75rem; line-height: 1; }
.text-sm { font-size: 0.875rem; line-height: 1; }
.text-base { font-size: 1rem; line-height: 1; }
.text-lg { font-size: 1.125rem; line-height: 1; }
.text-xl { font-size: 1.25rem; line-height: 1; }
.text-2xl { font-size: 1.5rem; line-height: 1; }
.text-3xl { font-size: 1.875rem; line-height: 1; }
.text-4xl { font-size: 2.25rem; line-height: 1; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-8xl { font-size: 6rem; line-height: 1; }
.text-9xl { font-size: 8rem; line-height: 1; }
.text-\[8px\] { font-size: 8px; }
.text-\[10px\] { font-size: 10px; }
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-sans { font-family: 'Inter',system-ui,sans-serif; }
.font-serif { font-family: 'EB Garamond',serif; }
.font-mono { font-family: 'JetBrains Mono',monospace; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.break-all { word-break: break-all; }
.break-words { overflow-wrap: break-word; }
.leading-3 { line-height: .75rem; }
.leading-4 { line-height: 1rem; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-9 { line-height: 2.25rem; }
.leading-10 { line-height: 2.5rem; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.leading-\[1\.05\] { line-height: 1.05; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[-0\.08px\] { letter-spacing: -0.08px; }
.tracking-\[-0\.12px\] { letter-spacing: -0.12px; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-white\/30 { color: rgba(255,255,255,0.3); }
.text-white\/40 { color: rgba(255,255,255,0.4); }
.text-white\/50 { color: rgba(255,255,255,0.5); }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-white\/70 { color: rgba(255,255,255,0.7); }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.text-white\/90 { color: rgba(255,255,255,0.9); }
.text-white\/20 { color: rgba(255,255,255,0.2); }
.text-white\/10 { color: rgba(255,255,255,0.1); }
.bg-black { background-color: #000; }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }
.bg-black\/30 { background-color: rgba(0,0,0,0.3); }
.bg-black\/50 { background-color: rgba(0,0,0,0.5); }
.bg-black\/60 { background-color: rgba(0,0,0,0.6); }
.bg-black\/70 { background-color: rgba(0,0,0,0.7); }
.bg-black\/80 { background-color: rgba(0,0,0,0.8); }
.bg-white\/20 { background-color: rgba(255,255,255,0.2); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.from-black { --tw-gradient-from: #000; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-black\/60 { --tw-gradient-from: rgba(0,0,0,0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-black\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, transparent); }
.via-black\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.7), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }
.to-black { --tw-gradient-to: #000; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.border-white\/5 { border-color: rgba(255,255,255,0.05); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.border-white { border-color: #fff; }
.rounded-none { border-radius: 0; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-\[20px\] { border-radius: 20px; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-center { object-position: center; }
.transition { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-colors { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-all { transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-opacity { transition-property: opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }
.opacity-0 { opacity: 0.0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1.0; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.select-none { user-select: none; }
.select-text { user-select: text; }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1); }
.hover\:text-white:hover { color: #fff; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:opacity-80:hover { opacity: 0.8; }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:w-10 { width: 2.5rem; }
  .sm\:h-10 { height: 2.5rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:pb-20 { padding-bottom: 5rem; }
  .sm\:mt-5 { margin-top: 1.25rem; }
  .sm\:left-8 { left: 2rem; }
  .sm\:right-8 { right: 2rem; }
  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .sm\:text-\[9px\] { font-size: 9px; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:gap-8 { gap: 2rem; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl { font-size: 6rem; line-height: 1; }
}
.liquid-glass { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.accent { color: #c9a87c; }
.active { opacity: 1 !important; pointer-events: auto !important; }

/* ===== CUSTOM SECTION CSS ===== */


 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}
body {
  background: #000;
  color: #fff;
  font-family: 'Inter',system-ui,sans-serif;
  overflow-x: hidden;
}
.snap-slide {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
section[id] {
  scroll-margin-top: 0;
}
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.15) 80%,rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.nav-link-underline {
  position: relative;
}
.nav-link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@keyframes dotPulse {
  0%,100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.45);
  }
}
.dot-pulse {
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 14px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #dedede;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 48px;
  background: #8a8a8a;
  border: 2px solid #dedede;
  border-radius: 7px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #707070;
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: #555555;
}
@supports (-moz-appearance: none) {
  html {
    scrollbar-color: #8a8a8a #dedede;
    scrollbar-width: auto;
  }
}
.toc-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  transform-style: preserve-3d;
}
.toc-abs-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.75s cubic-bezier(0.22,1,0.36,1),opacity 0.5s ease,filter 0.5s ease;
  will-change: transform,opacity,filter;
}
.toc-arrow {
  transition: opacity 0.3s,background 0.3s;
}
.toc-arrow:disabled {
  opacity: 0.15;
  cursor: default;
}
@keyframes tocLineGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes about-twinkle {
  0%,100% {
    opacity: 0.06;
  }
  50% {
    opacity: 0.5;
  }
}
.about-star {
  position: absolute;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  animation: about-twinkle 4s ease-in-out infinite;
}
@keyframes about-fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes about-fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes about-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes about-fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes about-glowPulse {
  0%,100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes about-badgeGlow {
  0%,100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.12);
  }
}
.about-anim-left {
  animation: about-fadeInLeft 0.9s cubic-bezier(0.22,1,0.36,1) backwards;
}
.about-anim-right {
  animation: about-fadeInRight 0.9s cubic-bezier(0.22,1,0.36,1) backwards;
}
.about-anim-scale {
  animation: about-scaleIn 1.1s cubic-bezier(0.22,1,0.36,1) backwards;
}
.about-anim-up {
  animation: about-fadeUp 0.6s ease-out backwards;
}
.about-badge-perspective {
  perspective: 1000px;
}
.about-badge-3d {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}
.about-hex {
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.about-hex-bg {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s;
}
.about-hex-bg:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.08);
}
.hero-direction {
  max-width: 36em;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.8;
  color: #f3f3f3;
  text-wrap: balance;
}
.hero-direction-primary { font-weight: 500; }
.hero-direction-detail { color: #d1d1d1; }
.hero-direction-detail::before { content: '｜'; }
.about-directions { margin-bottom: 28px; }
.about-direction-primary { display: flex; flex-wrap: wrap; gap: 8px; }
.about-direction-support { margin: 12px 0 0; font-size: 13px; line-height: 1.85; color: #ababab; }
.about-tag {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: 'Noto Sans SC',sans-serif;
  color: rgba(255,255,255,0.55);
  transition: all 0.3s;
}
.about-tag:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.about-tag.about-tag-primary { color: #ededed; border-color: #595959; font-size: 13px; font-weight: 500; }
.about-btn-outline {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  font-family: 'Noto Sans SC',sans-serif;
}
.about-btn-outline:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
}
.about-btn-solid {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  font-family: 'Noto Sans SC',sans-serif;
}
.about-btn-solid:hover {
  background: rgba(255,255,255,0.1);
}
.contact-method-label { margin: 0 0 8px; color: #ababab; font-size: 12px; letter-spacing: .08em; }
.contact-method-value { display: inline-block; color: #f5f3ee; font-size: 14px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
a.contact-method-value { text-decoration: underline; text-decoration-color: #606060; text-underline-offset: 5px; }
a.contact-method-value:hover { text-decoration-color: currentColor; }
.contact-copy { margin-top: 12px; }
.contact-copy-button {
  min-height: 44px;
  padding: 6px 14px;
  color: #eee;
  background: transparent;
  border: 1px solid #595959;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.contact-copy-button:hover { background-color: #242424; border-color: #aaa; }
.contact-copy-button:disabled { cursor: wait; color: #aaa; }
.contact-copy-status { margin: 8px 0 0; min-height: 3.4em; color: #bbb; font-size: 12px; line-height: 1.7; }
.contact-copy-button:focus-visible,
a.contact-method-value:focus-visible { outline: 2px solid #ededed; outline-offset: 4px; }
.contact-resumes { margin-top: 40px; padding-top: 20px; border-top: 1px solid #343434; text-align: left; }
.contact-resumes .resume-documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.contact-resumes .resume-document + .resume-document { border-top: none; }
@media (max-width: 639px) {
  .hero-direction-detail { display: block; }
  .hero-direction-detail::before { content: none; }
  .contact-resumes .resume-documents { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-resumes .resume-document + .resume-document { border-top: 1px solid #454649; }
}
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.resume-picker > summary { display: flex; align-items: center; gap: 8px; list-style: none; min-height: 44px; }
.resume-picker > summary::-webkit-details-marker { display: none; }
.resume-picker[open] > summary svg { transform: rotate(180deg); }
.resume-picker-panel {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  padding: 4px 20px;
  color: #f5f3ee;
  background: #191a1c;
  border: 1px solid #454649;
  border-radius: 12px;
}
.resume-document { padding: 16px 0; }
.resume-document + .resume-document { border-top: 1px solid #454649; }
.resume-document-title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.resume-document-description { margin: 4px 0 8px; font-size: 12px; line-height: 1.6; color: #b9b9b9; }
.resume-document-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.resume-document-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f5f3ee;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: #77787a;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease;
}
.resume-document-actions a:hover { text-decoration-color: currentColor; }
.resume-document-actions a:focus-visible,
.resume-picker > summary:focus-visible { outline: 2px solid #e5e5e5; outline-offset: 4px; }
.resume-chapter-link { background: #111112; color: #f5f3ee; padding: 24px clamp(24px, 5vw, 96px); }
.resume-chapter-link .resume-documents { max-width: 1700px; margin: 0 auto; border-top: 1px solid #454649; }
.resume-chapter-link .resume-document { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; padding: 20px 0 0; }
.resume-chapter-link .resume-document-description { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .resume-document-actions a { transition: none; }
}
.about-proj-item {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s;
  cursor: pointer;
}
.about-proj-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  transform: translateX(-4px);
}
.about-proj-item:focus-visible {
  outline: 2px solid #e5e5e5;
  outline-offset: 3px;
}
.about-proj-thumb {
  display: block;
  width: 72px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}
.about-photo-placeholder {
  background: linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 12px;
}
@media(max-width:1023px) {
  .about-order-badge {
    order: 1;
  }
  .about-order-left {
    order: 2;
  }
  .about-order-right {
    order: 3;
  }
  .about-grid {
    grid-template-columns: 1fr!important;
    gap: 32px!important;
    justify-items: center;
  }
}
.about-sub {
  position: relative;
  min-height: auto;
  padding: 80px 24px;
  overflow: hidden;
  background: #0a0a0c;
}
.about-sub-inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
}
.about-tools-summary {
  margin: 0 0 28px;
  font-size: 12px;
  line-height: 1.7;
  color: #aaa;
}
.about-evidence-summary { padding-block: 44px 56px; }
.about-evidence-summary .about-sub-head { margin-bottom: 24px; align-items: baseline; gap: 16px; }
.about-evidence-summary .about-sub-title { font-size: 24px; }
.about-evidence-note { font-size: 12px; color: #aaa; }
.about-evidence-summary .about-section-label { margin-bottom: 12px; }
.about-evidence-summary .about-award-row { padding-block: 11px; }
.about-evidence-summary .about-award-rowmeta { color: #9daabf; }
.about-evidence-summary .about-exp-card2 { padding: 16px 20px; }
.about-evidence-summary .about-exp-card2-role { color: #9daabf; }
.about-evidence-summary .about-exp-card2-desc { color: #aaa; }
@media(max-width:640px) {
  .about-evidence-summary { padding-block: 32px 44px; }
  .about-evidence-summary .about-sub-head { flex-wrap: wrap; }
}
.about-sub-eyebrow {
  font-family: "'JetBrains Mono',monospace";
  font-size: 12px;
  color: rgba(59,130,246,0.6);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.about-sub-title {
  font-family: "'Noto Sans SC','Sora',sans-serif";
  font-weight: 700;
  font-size: 32px;
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
  line-height: 1.2;
}
.about-sub-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}
.about-sub-card:hover {
  border-color: rgba(59,130,246,0.2);
  background: rgba(59,130,246,0.04);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3),0 0 30px rgba(59,130,246,0.06);
}
.about-cap-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 16px;
}
@media(max-width:1024px) {
  .about-cap-grid {
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:640px) {
  .about-cap-grid {
    grid-template-columns: 1fr;
  }
  .about-sub {
    padding: 60px 16px;
  }
  .about-sub-title {
    font-size: 26px;
    margin-bottom: 32px;
  }
}
.about-cap-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.15);
}
.about-cap-title {
  font-family: "'Noto Sans SC',sans-serif";
  font-weight: 600;
  font-size: 15px;
  color: white;
  margin-bottom: 10px;
  line-height: 1.3;
}
.about-cap-desc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
}
.about-tool-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-tool-cat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.about-tool-cat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.about-tool-label {
  font-family: "'Noto Sans SC',sans-serif";
  font-weight: 600;
  font-size: 13px;
  color: rgba(59,130,246,0.8);
  min-width: 100px;
  flex-shrink: 0;
  padding-top: 2px;
}
.about-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-tool-tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-family: "'Noto Sans SC',sans-serif";
  transition: all 0.3s;
  cursor: default;
}
.about-tool-tag:hover {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.2);
  color: white;
}
.about-proj-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
@media(max-width:640px) {
  .about-proj-grid {
    grid-template-columns: 1fr;
  }
}
.about-proj-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer;
}
.about-proj-card:hover {
  border-color: rgba(59,130,246,0.2);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3),0 0 30px rgba(59,130,246,0.06);
}
.about-proj-cover {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
}
.about-proj-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.about-proj-card:hover .about-proj-cover img {
  transform: scale(1.05);
}
.about-proj-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-proj-body {
  padding: 20px;
}
.about-proj-name {
  font-family: "'Noto Sans SC',sans-serif";
  font-weight: 600;
  font-size: 15px;
  color: white;
  margin-bottom: 4px;
}
.about-proj-role {
  font-size: 11px;
  color: rgba(59,130,246,0.6);
  font-family: "'JetBrains Mono',monospace";
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.about-proj-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}
.about-honors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media(max-width:640px) {
  .about-honors-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.about-honors-col-title {
  font-family: "'Noto Sans SC',sans-serif";
  font-weight: 600;
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-honor-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 10px;
  transition: all 0.3s;
}
.about-honor-item:hover {
  background: rgba(59,130,246,0.04);
  border-color: rgba(59,130,246,0.12);
  transform: translateX(4px);
}
.about-honor-name {
  font-family: "'Noto Sans SC',sans-serif";
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  line-height: 1.4;
}
.about-honor-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.about-exp-item {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 12px;
  transition: all 0.3s;
}
.about-exp-item:hover {
  background: rgba(59,130,246,0.04);
  border-color: rgba(59,130,246,0.12);
  transform: translateX(4px);
}
.about-exp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 8px;
}
.about-exp-company {
  font-family: "'Noto Sans SC',sans-serif";
  font-size: 13px;
  font-weight: 600;
  color: white;
}
.about-exp-role {
  font-size: 11px;
  color: rgba(59,130,246,0.6);
  font-family: "'JetBrains Mono',monospace";
  text-align: right;
  white-space: nowrap;
}
.about-exp-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}
@keyframes about-subReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.about-sub-reveal {
  animation: about-subReveal 0.8s cubic-bezier(0.22,1,0.36,1) backwards;
}
.about-sub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 48px;
}
.about-sub-bignum {
  font-family: "'Sora',sans-serif";
  font-weight: 200;
  font-size: 80px;
  line-height: 0.8;
  color: rgba(255,255,255,0.06);
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
@media(max-width:640px) {
  .about-sub-bignum {
    font-size: 56px;
  }
  .about-sub-head {
    margin-bottom: 32px;
  }
}
.about-cap-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}
@media(max-width:768px) {
  .about-cap-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.about-cap-list {
  display: flex;
  flex-direction: column;
}
.about-cap-row {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}
.about-cap-row:last-child {
  border-bottom: none;
}
.about-cap-row:hover {
  padding-left: 10px;
}
.about-cap-row:hover .about-cap-rownum {
  color: rgba(59,130,246,0.8);
}
.about-cap-rownum {
  font-family: "'JetBrains Mono',monospace";
  font-size: 13px;
  color: rgba(255,255,255,0.2);
  min-width: 28px;
  flex-shrink: 0;
  padding-top: 3px;
  transition: color 0.3s;
}
.about-cap-rowbody {
  flex: 1;
  min-width: 0;
}
.about-cap-rowtitle {
  font-family: "'Noto Sans SC',sans-serif";
  font-weight: 600;
  font-size: 15px;
  color: white;
  margin-bottom: 6px;
  line-height: 1.3;
}
.about-cap-rowdesc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
}
.about-tool-panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 24px;
}
.about-tool-panel-head {
  font-family: "'JetBrains Mono',monospace";
  font-size: 11px;
  color: rgba(59,130,246,0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.about-tool-sec {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.about-tool-sec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.about-tool-sec-label {
  font-family: "'Noto Sans SC',sans-serif";
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.about-tool-sec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.about-hon-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}
@media(max-width:768px) {
  .about-hon-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.about-award-list {
  display: flex;
  flex-direction: column;
}
.about-award-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s;
  cursor: default;
}
.about-award-row:last-child {
  border-bottom: none;
}
.about-award-row:hover {
  padding-left: 8px;
}
.about-award-rownum {
  font-family: "'JetBrains Mono',monospace";
  font-size: 12px;
  color: rgba(255,255,255,0.15);
  min-width: 24px;
  flex-shrink: 0;
  padding-top: 2px;
  transition: color 0.3s;
}
.about-award-row:hover .about-award-rownum {
  color: rgba(59,130,246,0.7);
}
.about-award-rowbody {
  flex: 1;
  min-width: 0;
}
.about-award-rowname {
  font-family: "'Noto Sans SC',sans-serif";
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  margin-bottom: 3px;
}
.about-award-rowmeta {
  font-size: 11px;
  color: rgba(59,130,246,0.4);
  font-family: "'JetBrains Mono',monospace";
}
.about-exp-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-exp-card2 {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}
.about-exp-card2:hover {
  border-color: rgba(59,130,246,0.2);
  background: rgba(59,130,246,0.03);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2),0 0 20px rgba(59,130,246,0.05);
}
.about-exp-card2-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}
.about-exp-card2-co {
  font-family: "'Noto Sans SC',sans-serif";
  font-size: 14px;
  font-weight: 600;
  color: white;
}
.about-exp-card2-role {
  font-size: 11px;
  color: rgba(59,130,246,0.6);
  font-family: "'JetBrains Mono',monospace";
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.about-exp-card2-desc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
}
.about-exp-card2-period {
  margin: -2px 0 8px;
  font-size: 12px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}
.about-section-label {
  font-family: "'JetBrains Mono',monospace";
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms!important;
    transition-duration: 0.01ms!important;
  }
}
.mp-section {
  position: relative;
  background: #050505;
}
.mp-chapter {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mp-chapter-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 700px at 50% 42%,rgba(59,130,246,0.07) 0%,transparent 65%);
  pointer-events: none;
}
.mp-chapter-num {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(100px,18vw,240px);
  line-height: 0.8;
  color: rgba(255,255,255,0.05);
  letter-spacing: -0.05em;
  margin-bottom: -30px;
}
.mp-chapter-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(22px,3.5vw,44px);
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.mp-chapter-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(15px,1.8vw,22px);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.4em;
  margin-top: 14px;
}
.mp-chapter-sub {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 36px;
}
.mp-showcase {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 4%;
  position: relative;
  overflow: hidden;
}
.mp-showcase-item {
  position: relative;
  flex-shrink: 0;
}
.mp-showcase-item img {
  width: 290px;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 60px rgba(0,0,0,0.65));
  border-radius: 4px;
}
.mp-showcase-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.55);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.15em;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.mp-showcase {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 40px 4%;
  position: relative;
  overflow: hidden;
}
.mp-phones-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.mp-intro {
  position: relative;
  width: 360px;
  text-align: center;
}
.mp-intro-label {
  font-family: 'Sora',sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  color: #91A56F;
  text-transform: uppercase;
  font-weight: 500;
}
.mp-intro-title {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  margin-top: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.mp-intro-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  line-height: 28px;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
}
.mp-filmstrip-section {
  padding: 30px 0 60px;
  position: relative;
}
.mp-filmstrip-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 24px;
}
.mp-filmstrip-wrap {
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
.mp-filmstrip-wrap::before,.mp-filmstrip-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 5;
  pointer-events: none;
}
.mp-filmstrip-wrap::before {
  left: 0;
  background: linear-gradient(to right,#050505,transparent);
}
.mp-filmstrip-wrap::after {
  right: 0;
  background: linear-gradient(to left,#050505,transparent);
}
.mp-filmstrip {
  display: flex;
  width: max-content;
  animation: mp-scroll 50s linear infinite;
}
.mp-filmstrip:focus-within,
.mp-filmstrip-wrap:hover .mp-filmstrip {
  animation-play-state: paused;
}
@keyframes mp-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.mp-thumb {
  margin-right: 12px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  opacity: 0.45;
}
.mp-thumb:hover {
  opacity: 0.85;
  transform: translateY(-4px);
}
.mp-thumb.active {
  opacity: 1;
}
.mp-thumb img {
  width: 75px;
  height: auto;
  display: block;
  border-radius: 6px;
}
.mp-thumb-num {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}
.mp-hint {
  text-align: center;
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 0 50px;
}
@media(max-width:900px) {
  .mp-showcase {
    gap: 10px;
    padding: 30px 3%;
  }
  .mp-showcase-item img {
    width: 170px;
  }
  .mp-thumb img {
    width: 55px;
  }
  .mp-showcase-badge {
    font-size: 7px;
    padding: 2px 6px;
  }
}
.dd-section {
  background: #F7F5F0;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 90px 8% 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Sora',sans-serif;
}
.dd-section::before {
  content: '';
  position: absolute;
  left: 4%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26,26,26,0.07) 15%, rgba(26,26,26,0.07) 85%, transparent);
  pointer-events: none;
}
.dd-section::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 9%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: 50%;
  pointer-events: none;
}
.dd-meta-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 7vh;
}
.dd-meta-num {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(40px,5vw,72px);
  line-height: 1;
  color: #3a3a36;
  letter-spacing: -0.03em;
}
.dd-meta-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.dd-title-block {
  margin-bottom: 5vh;
}
.dd-title-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(26px,4vw,52px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin: 0;
}
.dd-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(15px,1.6vw,20px);
  letter-spacing: 0.4em;
  color: #666;
  margin-top: 18px;
}
.dd-divider {
  width: 0;
  height: 1px;
  background: #1a1a1a;
  margin: 5vh 0 6vh;
  transition: width 1.6s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.dd-section.in-view .dd-divider {
  width: 33%;
}
.dd-manifesto-wrap {
  position: relative;
  margin: 0 0 7vh 0;
  max-width: 1100px;
}
.dd-manifesto {
  font-family: 'EB Garamond','Noto Serif SC',serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px,4.5vw,56px);
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.dd-manifesto .dd-m-line {
  display: block;
  padding-left: 24px;
  position: relative;
}
.dd-manifesto .dd-m-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: rgba(26,26,26,0.12);
}
.dd-manifesto .dd-m-keyword {
  font-weight: 500;
  font-style: normal;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.dd-manifesto .dd-m-final {
  display: block;
  padding-left: 24px;
  font-size: 0.38em;
  color: #6a6a62;
  margin-top: 1.6em;
  letter-spacing: 0.06em;
  font-style: italic;
  line-height: 1.6;
}
.dd-manifesto-visual {
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 38%;
  background-image: linear-gradient(rgba(26,26,26,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
  mask-image: linear-gradient(to right, transparent, black 40%);
}
.dd-keywords {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 36px;
  padding: 5vh 0 6vh;
  border-top: 1px solid #d8d5cc;
  border-bottom: 1px solid #d8d5cc;
  margin-bottom: 5vh;
  position: relative;
}
.dd-keywords::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
.dd-keyword {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  padding-top: 24px;
}
.dd-keyword::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--kw-accent, #1a1a1a);
  opacity: 0.65;
}
.dd-keyword.kw-nature {
  --kw-accent: #6b8a5a;
}
.dd-keyword.kw-culture {
  --kw-accent: #9a7a4a;
}
.dd-keyword.kw-lightness {
  --kw-accent: #7a7a82;
}
.dd-keyword-num {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #9a9a92;
  letter-spacing: 0.1em;
}
.dd-keyword-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(26px,3.2vw,38px);
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dd-keyword-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #3a3a36;
  letter-spacing: 0.35em;
  padding-left: 1px;
}
.dd-keyword-subtitle {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b8a5a;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 2px;
}
.dd-keyword-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.75;
  color: #7a7a72;
  max-width: 210px;
  margin-top: 6px;
}
.dd-principles {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
}
.dd-principle {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(26,26,26,0.06);
  align-items: start;
}
.dd-principle:last-child {
  border-bottom: 1px solid rgba(26,26,26,0.06);
}
.dd-principle-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dd-principle-num {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.dd-principle-label {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #8a8a82;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dd-principle-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dd-principle-keyword {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 500;
  font-size: clamp(16px,1.4vw,20px);
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.dd-principle-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(12px,1.05vw,14px);
  line-height: 1.7;
  color: #6a6a62;
}
.dd-footer {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  margin-top: 5vh;
}
.dd-footer-word {
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #8a8a82;
  text-transform: uppercase;
}
body.dd-active .liquid-glass {
  background: rgba(247,245,240,0.2);
  box-shadow: none;
}
body.dd-active header .text-white {
  color: #1a1a1a;
}
body.dd-active header .text-white\/40 {
  color: rgba(26,26,26,0.5);
}
body.dd-active header .text-white\/70 {
  color: rgba(26,26,26,0.75);
}
.dd-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dd-section.in-view .dd-anim {
  opacity: 1;
  transform: translateY(0);
}
.dd-anim-1 {
  transition-delay: 0.1s;
}
.dd-anim-2 {
  transition-delay: 0.25s;
}
.dd-anim-3 {
  transition-delay: 0.4s;
}
.dd-anim-4 {
  transition-delay: 0.55s;
}
.dd-anim-5 {
  transition-delay: 0.75s;
}
.dd-anim-6 {
  transition-delay: 0.9s;
}
.dd-anim-7 {
  transition-delay: 1.05s;
}
.dd-anim-8 {
  transition-delay: 1.2s;
}
.dd-anim-9 {
  transition-delay: 1.35s;
}
.dd-anim-10 {
  transition-delay: 1.5s;
}
.dd-anim-11 {
  transition-delay: 1.65s;
}
.dd-anim-12 {
  transition-delay: 1.8s;
}
.dd-anim-13 {
  transition-delay: 2s;
}
.dd-p-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dd-principles.in-view .dd-p-anim {
  opacity: 1;
  transform: translateY(0);
}
.dd-p-anim-1 {
  transition-delay: 0.1s;
}
.dd-p-anim-2 {
  transition-delay: 0.25s;
}
.dd-p-anim-3 {
  transition-delay: 0.4s;
}
.dd-p-anim-4 {
  transition-delay: 0.55s;
}
.dd-p-anim-5 {
  transition-delay: 0.7s;
}
@media(max-width:900px) {
  .dd-section {
    padding: 60px 6% 40px;
  }
  .dd-section::before {
    left: 2%;
  }
  .dd-section::after {
    right: 2%;
  }
  .dd-principle {
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 22px 0;
  }
  .dd-principle-num {
    font-size: 18px;
  }
  .dd-meta-row {
    gap: 14px;
    margin-bottom: 5vh;
  }
  .dd-divider {
    margin: 4vh 0 5vh;
  }
  .dd-manifesto-wrap {
    margin-bottom: 5vh;
  }
  .dd-manifesto {
    font-size: clamp(22px,6vw,34px);
    max-width: 100%;
  }
  .dd-manifesto .dd-m-final {
    font-size: 0.5em;
  }
  .dd-manifesto-visual {
    display: none;
  }
  .dd-keywords {
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    padding: 4vh 0 5vh;
    margin-bottom: 4vh;
  }
  .dd-keyword-en {
    font-size: 20px;
  }
  .dd-keyword-cn {
    font-size: 13px;
    letter-spacing: 0.2em;
  }
  .dd-keyword-desc {
    font-size: 11px;
    max-width: 100%;
  }
  .dd-principle-left {
    gap: 5px;
  }
  .dd-footer {
    margin-top: 4vh;
  }
}
.dc-section {
  background: #F7F5F0;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 90px 8% 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Sora',sans-serif;
}
.dc-section::before {
  content: '';
  position: absolute;
  left: 4%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26,26,26,0.07) 15%, rgba(26,26,26,0.07) 85%, transparent);
  pointer-events: none;
}
.dc-section::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 9%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: 50%;
  pointer-events: none;
}
.dc-meta-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 7vh;
}
.dc-meta-num {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(40px,5vw,72px);
  line-height: 1;
  color: #3a3a36;
  letter-spacing: -0.03em;
}
.dc-meta-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.dc-title-block {
  margin-bottom: 5vh;
}
.dc-title-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(26px,4vw,52px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin: 0;
}
.dc-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(15px,1.6vw,20px);
  letter-spacing: 0.4em;
  color: #666;
  margin-top: 18px;
}
.dc-divider {
  width: 0;
  height: 1px;
  background: #1a1a1a;
  margin: 5vh 0 6vh;
  transition: width 1.6s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.dc-section.in-view .dc-divider {
  width: 33%;
}
.dc-body {
  position: relative;
  margin: 0 0 7vh 0;
  max-width: 1100px;
}
.dc-body-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 24px 0;
}
.dc-body-text {
  font-family: 'Noto Serif SC','EB Garamond',serif;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 42px;
  color: #1a1a1a;
  margin: 0;
  max-width: 500px;
  position: relative;
  z-index: 1;
  text-align: left;
}
.dc-body-text .dc-body-problem {
  display: block;
  margin-bottom: 0.8em;
}
.dc-body-text .dc-body-goal {
  display: block;
  color: #2a2a28;
}
.dc-body-visual {
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 38%;
  background-image: linear-gradient(rgba(26,26,26,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
  mask-image: linear-gradient(to right, transparent, black 40%);
}
.dc-keywords {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  padding: 0;
  border-top: 1px solid #d8d5cc;
  border-bottom: 1px solid #d8d5cc;
  margin-bottom: 5vh;
  margin-top: auto;
  position: relative;
}
.dc-keywords::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
.dc-keyword {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  padding: 40px 28px 40px 0;
}
.dc-keyword + .dc-keyword {
  border-left: 1px solid #e5e3dc;
  padding-left: 28px;
}
.dc-keyword::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: #6b8a5a;
  opacity: 0.7;
}
.dc-keyword + .dc-keyword::before {
  left: 28px;
}
.dc-keyword-num {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #9a9a92;
  letter-spacing: 0.1em;
}
.dc-keyword-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(24px,3vw,34px);
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dc-keyword-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #3a3a36;
  letter-spacing: 0.35em;
  padding-left: 1px;
}
.dc-keyword-subtitle {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #6b8a5a;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.dc-keyword-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  color: #7a7a72;
  max-width: 220px;
  margin-top: 8px;
}
.dc-footer {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  margin-top: 5vh;
}
.dc-footer-word {
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #8a8a82;
  text-transform: uppercase;
}
body.dc-active .liquid-glass {
  background: rgba(247,245,240,0.2);
  box-shadow: none;
}
body.dc-active header .text-white {
  color: #1a1a1a;
}
body.dc-active header .text-white\/40 {
  color: rgba(26,26,26,0.5);
}
body.dc-active header .text-white\/70 {
  color: rgba(26,26,26,0.75);
}
.dc-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dc-section.in-view .dc-anim {
  opacity: 1;
  transform: translateY(0);
}
.dc-anim-1 {
  transition-delay: 0.1s;
}
.dc-anim-2 {
  transition-delay: 0.25s;
}
.dc-anim-3 {
  transition-delay: 0.4s;
}
.dc-anim-4 {
  transition-delay: 0.55s;
}
.dc-anim-5 {
  transition-delay: 0.75s;
}
.dc-anim-6 {
  transition-delay: 0.9s;
}
.dc-anim-7 {
  transition-delay: 1.05s;
}
.dc-anim-8 {
  transition-delay: 1.3s;
}
@media(max-width:900px) {
  .dc-section {
    padding: 60px 6% 40px;
  }
  .dc-section::before {
    left: 2%;
  }
  .dc-section::after {
    right: 2%;
  }
  .dc-meta-row {
    gap: 14px;
    margin-bottom: 5vh;
  }
  .dc-divider {
    margin: 4vh 0 5vh;
  }
  .dc-body {
    margin-bottom: 5vh;
  }
  .dc-body-text {
    font-size: clamp(15px,5vw,20px);
    max-width: 100%;
  }
  .dc-body-visual {
    display: none;
  }
  .dc-keywords {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dc-keyword {
    padding: 28px 0;
  }
  .dc-keyword + .dc-keyword {
    border-left: none;
    border-top: 1px solid #e5e3dc;
    padding-left: 0;
  }
  .dc-keyword + .dc-keyword::before {
    left: 0;
  }
  .dc-keyword-en {
    font-size: 22px;
  }
  .dc-keyword-cn {
    font-size: 13px;
    letter-spacing: 0.2em;
  }
  .dc-keyword-desc {
    font-size: 11px;
    max-width: 100%;
  }
  .dc-footer {
    margin-top: 4vh;
  }
}
.ia-section {
  background: #F7F5F0;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 60px 5% 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Sora',sans-serif;
}
.ia-section::before {
  content: '';
  position: absolute;
  left: 4%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26,26,26,0.07) 15%, rgba(26,26,26,0.07) 85%, transparent);
  pointer-events: none;
}
.ia-section::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 9%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: 50%;
  pointer-events: none;
}
.ia-meta-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 2.5vh;
}
.ia-meta-num {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(36px,4.5vw,64px);
  line-height: 1;
  color: #3a3a36;
  letter-spacing: -0.03em;
}
.ia-meta-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.ia-title-block {
  margin-bottom: 2vh;
}
.ia-title-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(24px,3.5vw,46px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin: 0;
}
.ia-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(14px,1.5vw,18px);
  letter-spacing: 0.4em;
  color: #666;
  margin-top: 12px;
}
.ia-divider {
  width: 0;
  height: 1px;
  background: #1a1a1a;
  margin: 0 0 2vh 0;
  transition: width 1.6s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.ia-section.in-view .ia-divider {
  width: 33%;
}
.ia-diagram {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  margin-bottom: 1.5vh;
}
.ia-diagram-grid {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16/8;
  margin: 0 auto;
}
.ia-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.ia-line {
  stroke: #b5c4a8;
  stroke-width: 1.2;
  fill: none;
  opacity: 0.55;
  transition: stroke 0.4s ease,stroke-width 0.4s ease,opacity 0.4s ease;
}
.ia-line.active {
  stroke: #6b8a5a;
  stroke-width: 2;
  opacity: 1;
}
.ia-line-dot {
  fill: #6b8a5a;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ia-line-dot.active {
  opacity: 1;
}
.ia-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: linear-gradient(135deg,#6b8a5a,#4a6a3a);
  box-shadow: 0 6px 24px rgba(74,106,58,0.3),0 0 0 6px rgba(247,245,240,0.85);
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.5s ease;
}
.ia-section.in-view .ia-center {
  transform: translate(-50%,-50%) scale(1);
}
.ia-center:hover {
  box-shadow: 0 6px 24px rgba(74,106,58,0.35),0 0 0 6px rgba(247,245,240,0.85),0 0 48px rgba(107,138,90,0.3);
}
.ia-center-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-top: 4px;
}
.ia-center-en {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(240,243,234,0.85);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ia-center-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin-top: 6px;
}
.ia-module {
  position: absolute;
  z-index: 2;
  width: 212px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(107,138,90,0.15);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 3px 16px rgba(26,26,26,0.07);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),box-shadow 0.45s ease,border-color 0.45s ease;
  cursor: default;
}
.ia-module:hover, .ia-module.is-active {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 30px rgba(107,138,90,0.2);
  border-color: rgba(107,138,90,0.4);
  z-index: 5;
}
.ia-module-top-left {
  top: 0;
  left: 0;
}
.ia-module-top-right {
  top: 0;
  right: 0;
}
.ia-module-bottom-left {
  bottom: 0;
  left: 0;
}
.ia-module-bottom-right {
  bottom: 0;
  right: 0;
}
.ia-module-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.ia-module-num {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #9a9a92;
  letter-spacing: 0.1em;
}
.ia-module-en {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #3a5a2a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ia-module-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #6b8a5a;
  letter-spacing: 0.22em;
  margin-bottom: 10px;
}
.ia-module-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ia-module-item {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  color: #5a5a52;
  padding-left: 10px;
  position: relative;
}
.ia-module-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b5c4a8;
  transition: background 0.3s ease;
}
.ia-module:hover .ia-module-item::before, .ia-module.is-active .ia-module-item::before {
  background: #6b8a5a;
}
.ia-journey {
  margin-top: auto;
  padding-top: 2vh;
  border-top: 1px solid #d8d5cc;
}
.ia-journey-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}
.ia-journey-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2px;
}
.ia-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.ia-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid #c4d0b5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #6b8a5a;
  letter-spacing: 0.03em;
  transition: all 0.4s ease;
}
.ia-step:hover .ia-step-circle {
  background: #6b8a5a;
  border-color: #6b8a5a;
  color: #fff;
  transform: scale(1.1);
}
.ia-step-en {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #5a5a52;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}
.ia-step-label {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #8a8a82;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}
.ia-arrow {
  flex: 0 0 auto;
  color: #c4d0b5;
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  transform: translateY(12px);
}
body.ia-active .liquid-glass {
  background: rgba(247,245,240,0.2);
  box-shadow: none;
}
body.ia-active header .text-white {
  color: #1a1a1a;
}
body.ia-active header .text-white\/40 {
  color: rgba(26,26,26,0.5);
}
body.ia-active header .text-white\/70 {
  color: rgba(26,26,26,0.75);
}
.ia-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.ia-section.in-view .ia-anim {
  opacity: 1;
  transform: translateY(0);
}
.ia-anim-1 {
  transition-delay: 0.1s;
}
.ia-anim-2 {
  transition-delay: 0.25s;
}
.ia-anim-3 {
  transition-delay: 0.4s;
}
.ia-anim-4 {
  transition-delay: 0.55s;
}
.ia-anim-5 {
  transition-delay: 0.7s;
}
.ia-anim-6 {
  transition-delay: 0.85s;
}
.ia-anim-7 {
  transition-delay: 1s;
}
.ia-anim-8 {
  transition-delay: 1.15s;
}
.ia-anim-9 {
  transition-delay: 1.3s;
}
.ia-anim-10 {
  transition-delay: 1.45s;
}
.ia-anim-11 {
  transition-delay: 1.6s;
}
.ia-anim-12 {
  transition-delay: 1.75s;
}
.ia-center {
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.3);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1) 0.5s,transform 1.2s cubic-bezier(0.22,1,0.36,1) 0.5s,box-shadow 0.5s ease;
}
.ia-section.in-view .ia-center {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.ia-module {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1),box-shadow 0.45s ease,border-color 0.45s ease;
}
.ia-section.in-view .ia-module-top-left {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.7s;
}
.ia-section.in-view .ia-module-top-right {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.85s;
}
.ia-section.in-view .ia-module-bottom-left {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1s;
}
.ia-section.in-view .ia-module-bottom-right {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.15s;
}
.ia-section.in-view .ia-module:hover, .ia-section.in-view .ia-module.is-active {
  transform: translateY(-3px) scale(1.04);
  transition-delay: 0s;
}
.ia-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1),stroke 0.4s ease,stroke-width 0.4s ease,opacity 0.4s ease;
}
.ia-section.in-view .ia-line {
  stroke-dashoffset: 0;
}
.ia-section.in-view .ia-line:nth-child(1) {
  transition-delay: 0.8s;
}
.ia-section.in-view .ia-line:nth-child(2) {
  transition-delay: 0.9s;
}
.ia-section.in-view .ia-line:nth-child(3) {
  transition-delay: 1s;
}
.ia-section.in-view .ia-line:nth-child(4) {
  transition-delay: 1.1s;
}
.ia-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.ia-section.in-view .ia-step {
  opacity: 1;
  transform: translateY(0);
}
.ia-section.in-view .ia-step:nth-child(1) {
  transition-delay: 1.3s;
}
.ia-section.in-view .ia-step:nth-child(3) {
  transition-delay: 1.4s;
}
.ia-section.in-view .ia-step:nth-child(5) {
  transition-delay: 1.5s;
}
.ia-section.in-view .ia-step:nth-child(7) {
  transition-delay: 1.6s;
}
.ia-section.in-view .ia-step:nth-child(9) {
  transition-delay: 1.7s;
}
.ia-section.in-view .ia-step:nth-child(11) {
  transition-delay: 1.8s;
}
.ia-section.in-view .ia-step:nth-child(13) {
  transition-delay: 1.9s;
}
.ia-arrow {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ia-section.in-view .ia-arrow {
  opacity: 1;
}
.ia-section.in-view .ia-arrow:nth-child(2) {
  transition-delay: 1.35s;
}
.ia-section.in-view .ia-arrow:nth-child(4) {
  transition-delay: 1.45s;
}
.ia-section.in-view .ia-arrow:nth-child(6) {
  transition-delay: 1.55s;
}
.ia-section.in-view .ia-arrow:nth-child(8) {
  transition-delay: 1.65s;
}
.ia-section.in-view .ia-arrow:nth-child(10) {
  transition-delay: 1.75s;
}
.ia-section.in-view .ia-arrow:nth-child(12) {
  transition-delay: 1.85s;
}
@media(max-width:900px) {
  .ia-section {
    padding: 50px 5% 30px;
  }
  .ia-section::before {
    left: 2%;
  }
  .ia-section::after {
    right: 2%;
  }
  .ia-meta-row {
    gap: 14px;
    margin-bottom: 3vh;
  }
  .ia-divider {
    margin: 0 0 2vh 0;
  }
  .ia-diagram {
    min-height: 260px;
  }
  .ia-diagram-grid {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 50px 0;
  }
  .ia-lines {
    display: none;
  }
  .ia-center {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(1);
    width: 130px;
    height: 130px;
  }
  .ia-module {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 300px;
    transform: scale(1)!important;
    opacity: 1!important;
  }
  .ia-module-item {
    font-size: 13px;
  }
  .ia-journey-flow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .ia-step {
    flex: 0 0 auto;
    min-width: 80px;
  }
  .ia-arrow {
    display: none;
  }
}
.ds-section {
  background: #F7F5F0;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 48px 5% 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Sora',sans-serif;
}
.ds-section::before {
  content: '';
  position: absolute;
  left: 4%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26,26,26,0.07) 15%, rgba(26,26,26,0.07) 85%, transparent);
  pointer-events: none;
}
.ds-section::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 9%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: 50%;
  pointer-events: none;
}
.ds-meta-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 1.2vh;
}
.ds-meta-num {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(32px,3.8vw,52px);
  line-height: 1;
  color: #3a3a36;
  letter-spacing: -0.03em;
}
.ds-meta-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.ds-title-block {
  margin-bottom: 0.6vh;
}
.ds-title-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(20px,2.8vw,36px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin: 0;
}
.ds-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(12px,1.3vw,15px);
  letter-spacing: 0.4em;
  color: #666;
  margin-top: 6px;
}
.ds-divider {
  width: 0;
  height: 1px;
  background: #1a1a1a;
  margin: 0 0 1.4vh 0;
  transition: width 1.6s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.ds-section.in-view .ds-divider {
  width: 33%;
}
.ds-sub-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #8a8a82;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-sub-label::before {
  content: '';
  width: 14px;
  height: 1px;
  background: #6b8a5a;
  opacity: 0.6;
}
.ds-principles {
  display: flex;
  gap: 14px;
  margin-bottom: 1vh;
}
.ds-principle {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-principle-title {
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #45622A;
  letter-spacing: 0.04em;
}
.ds-principle-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #8a8a82;
  line-height: 1.5;
}
.ds-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 1;
  min-height: 0;
}
.ds-left, .ds-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-colors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(26,26,26,0.06);
}
.ds-color-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  width: 100px;
}
.ds-color-name {
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #1a1a1a;
  letter-spacing: 0.04em;
}
.ds-color-hex {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #9a9a92;
  letter-spacing: 0.03em;
}
.ds-color-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  flex: 1;
}
.ds-color-use {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #5a5a52;
  line-height: 1.5;
}
.ds-color-use::before {
  content: '\00B7';
  margin-right: 4px;
  color: #b5b5ae;
}
.ds-color-ratio {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 4px;
}
.ds-color-ratio-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,0.06);
}
.ds-color-ratio-seg {
  height: 100%;
}
.ds-color-ratio-pct {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ds-color-ratio-pct span {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #9a9a92;
  letter-spacing: 0.04em;
}
.ds-spacing {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(26,26,26,0.04);
  border-radius: 8px;
}
.ds-sp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ds-sp-bar {
  background: #91A56F;
  border-radius: 2px;
  opacity: 0.55;
  width: 22px;
}
.ds-sp-bar.is-base {
  background: #45622A;
  opacity: 0.8;
}
.ds-sp-px {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #5a5a52;
  margin-top: 2px;
}
.ds-sp-use {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: 9px;
  color: #9a9a92;
}
.ds-sp-grid-note {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #6b8a5a;
  letter-spacing: 0.08em;
  margin-top: 5px;
}
.ds-typo-fonts {
  display: flex;
  gap: 10px;
}
.ds-font {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
  overflow: hidden;
}
.ds-font-name {
  font-family: 'Montserrat',sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.ds-font-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #8a8a82;
  letter-spacing: 0.12em;
}
.ds-font-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 4px;
}
.ds-font-use {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #6b8a5a;
  line-height: 1.5;
}
.ds-font-use::before {
  content: '\00B7';
  margin-right: 4px;
  color: #b5b5ae;
}
.ds-font-sample {
  font-family: 'Montserrat',sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #45622A;
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.ds-font-zh {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #5a5a52;
  line-height: 1.6;
  margin-top: 4px;
}
.ds-typo-scale {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-scale-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ds-scale-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #9a9a92;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 48px;
  flex-shrink: 0;
}
.ds-scale-px {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #b5b5ae;
  letter-spacing: 0.04em;
  width: 36px;
  flex-shrink: 0;
}
.ds-scale-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-scale-use {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #9a9a92;
  flex-shrink: 0;
}
.ds-scale-h1 {
  font-family: 'Montserrat',sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.ds-scale-h2 {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #1a1a1a;
}
.ds-scale-body {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #5a5a52;
}
.ds-scale-cap {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 9px;
  color: #9a9a92;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ds-grid-info {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-grid-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-grid-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #9a9a92;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ds-grid-value {
  font-family: 'Montserrat',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #45622A;
  letter-spacing: 0.02em;
}
.ds-components {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-comp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-comp-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #9a9a92;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 64px;
  flex-shrink: 0;
}
.ds-comp-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ds-demo-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(26,26,26,0.06);
  border-radius: 6px;
}
.ds-demo-nav-item {
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #9a9a92;
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}
.ds-demo-nav-item.active {
  color: #45622A;
  font-weight: 500;
}
.ds-demo-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 6px;
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.ds-demo-btn-primary {
  background: #45622A;
  color: #fff;
  border: 1px solid #45622A;
}
.ds-demo-btn-secondary {
  background: transparent;
  color: #45622A;
  border: 1px solid #91A56F;
}
.ds-demo-btn-hover {
  background: #3a5224;
  color: #fff;
  border: 1px solid #3a5224;
  box-shadow: 0 4px 14px rgba(69,98,42,0.3);
}
.ds-demo-card {
  width: 112px;
  background: #fff;
  border: 1px solid rgba(26,26,26,0.06);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,26,26,0.05);
  transition: transform 0.3s ease,box-shadow 0.3s ease;
}
.ds-demo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(26,26,26,0.1);
}
.ds-demo-card-img {
  height: 40px;
  background: linear-gradient(135deg,#CFE3B6,#91A56F);
}
.ds-demo-card-body {
  padding: 5px 8px;
}
.ds-demo-card-title {
  font-family: 'Montserrat',sans-serif;
  font-weight: 500;
  font-size: 9px;
  color: #1a1a1a;
}
.ds-demo-card-designer {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #9a9a92;
  margin-top: 1px;
}
.ds-demo-card-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 8px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  background: rgba(207,227,182,0.4);
  color: #45622A;
  letter-spacing: 0.04em;
}
.ds-demo-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: 'Sora',sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.ds-demo-tag-green {
  background: rgba(207,227,182,0.4);
  color: #45622A;
}
.ds-demo-tag-outline {
  background: transparent;
  color: #91A56F;
  border: 1px solid #91A56F;
}
.ds-demo-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(26,26,26,0.1);
  border-radius: 20px;
  min-width: 120px;
}
.ds-demo-input-icon {
  font-size: 11px;
  color: #91A56F;
  line-height: 1;
}
.ds-demo-input-text {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  color: #b5b5ae;
  letter-spacing: 0.04em;
}
.ds-demo-modal {
  width: 106px;
  background: #fff;
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(26,26,26,0.08);
}
.ds-demo-modal-header {
  padding: 4px 8px;
  background: #F7F5F0;
  border-bottom: 1px solid rgba(26,26,26,0.05);
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
}
.ds-demo-modal-body {
  padding: 4px 8px;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  color: #5a5a52;
}
.ds-demo-modal-footer {
  padding: 0 8px 5px;
  display: flex;
  justify-content: flex-end;
}
.ds-demo-modal-btn {
  display: inline-flex;
  padding: 3px 10px;
  background: #45622A;
  color: #fff;
  border-radius: 4px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ds-demo-pf {
  width: 118px;
  background: #fff;
  border: 1px solid rgba(26,26,26,0.06);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,26,26,0.05);
  transition: transform 0.3s ease,box-shadow 0.3s ease;
}
.ds-demo-pf:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(26,26,26,0.1);
}
.ds-demo-pf-img {
  height: 42px;
  background: linear-gradient(135deg,#45622A,#91A56F);
}
.ds-demo-pf-body {
  padding: 5px 8px;
}
.ds-demo-pf-title {
  font-family: 'Montserrat',sans-serif;
  font-weight: 500;
  font-size: 9px;
  color: #1a1a1a;
}
.ds-demo-pf-designer {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #9a9a92;
  margin-top: 1px;
}
.ds-demo-pf-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  background: rgba(207,227,182,0.4);
  color: #45622A;
}
.ds-demo-pf-btn {
  display: inline-flex;
  margin-top: 3px;
  padding: 2px 10px;
  background: #45622A;
  color: #fff;
  border-radius: 4px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ds-states {
  display: flex;
  gap: 10px;
}
.ds-state-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 6px;
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  min-width: 72px;
}
.ds-state-default {
  background: #45622A;
  color: #fff;
  border: 1px solid #45622A;
  box-shadow: none;
  transform: translateY(0);
}
.ds-state-hover {
  background: #5a7a3a;
  color: #fff;
  border: 1px solid #5a7a3a;
  box-shadow: 0 4px 14px rgba(69,98,42,0.28);
  transform: translateY(-2px);
}
.ds-state-active {
  background: #2d4220;
  color: rgba(255,255,255,0.85);
  border: 1px solid #2d4220;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.22);
  transform: translateY(1px);
}
.ds-state-disabled {
  background: #8a9a7a;
  color: rgba(255,255,255,0.5);
  border: 1px solid #8a9a7a;
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.ds-state-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #5a5a52;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ds-state-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #8a8a82;
  text-align: center;
  line-height: 1.4;
}
.ds-states-note {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #9a9a92;
  margin-top: 6px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.ds-icon-system {
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(26,26,26,0.05);
  border-radius: 8px;
}
.ds-icon-left {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  align-items: center;
}
.ds-icon-left-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  color: #9a9a92;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ds-icon-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-icon-style {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  color: #45622A;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ds-icon-spec {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.ds-icon-spec-item {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  color: #5a5a52;
  font-weight: 400;
}
.ds-icon-spec-item .ds-icon-spec-label {
  color: #9a9a92;
}
.ds-icon-note {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  color: #8a8a82;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}
.ds-footer {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  margin-top: 1vh;
}
.ds-footer-word {
  font-family: 'Sora',sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: #8a8a82;
  text-transform: uppercase;
}
body.ds-active .liquid-glass {
  background: rgba(247,245,240,0.2);
  box-shadow: none;
}
body.ds-active header .text-white {
  color: #1a1a1a;
}
body.ds-active header .text-white\/40 {
  color: rgba(26,26,26,0.5);
}
body.ds-active header .text-white\/70 {
  color: rgba(26,26,26,0.75);
}
.ds-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.ds-section.in-view .ds-anim {
  opacity: 1;
  transform: translateY(0);
}
.ds-anim-1 {
  transition-delay: 0.1s;
}
.ds-anim-2 {
  transition-delay: 0.2s;
}
.ds-anim-3 {
  transition-delay: 0.3s;
}
.ds-anim-4 {
  transition-delay: 0.45s;
}
.ds-anim-5 {
  transition-delay: 0.55s;
}
.ds-anim-6 {
  transition-delay: 0.7s;
}
.ds-anim-7 {
  transition-delay: 0.85s;
}
.ds-anim-8 {
  transition-delay: 1s;
}
.ds-anim-9 {
  transition-delay: 1.15s;
}
.ds-color-swatch {
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ds-section.in-view .ds-color-swatch {
  transform: scale(1);
}
.ds-section.in-view .ds-color-row:nth-child(1) .ds-color-swatch {
  transition-delay: 0.5s;
}
.ds-section.in-view .ds-color-row:nth-child(2) .ds-color-swatch {
  transition-delay: 0.58s;
}
.ds-section.in-view .ds-color-row:nth-child(3) .ds-color-swatch {
  transition-delay: 0.66s;
}
.ds-section.in-view .ds-color-row:nth-child(4) .ds-color-swatch {
  transition-delay: 0.74s;
}
.ds-color-ratio-bar {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.8s;
}
.ds-section.in-view .ds-color-ratio-bar {
  transform: scaleX(1);
}
.ds-section.in-view .ds-demo-card:hover, .ds-section.in-view .ds-demo-pf:hover, .ds-section.in-view .ds-demo-btn:hover, .ds-section.in-view .ds-demo-nav-item:hover {
  transition-delay: 0s;
}
@media(max-width:900px) {
  .ds-section {
    padding: 42px 5% 22px;
  }
  .ds-section::before {
    left: 2%;
  }
  .ds-section::after {
    right: 2%;
  }
  .ds-meta-row {
    gap: 14px;
    margin-bottom: 1.5vh;
  }
  .ds-divider {
    margin: 0 0 1.5vh 0;
  }
  .ds-principles {
    flex-direction: column;
    gap: 8px;
  }
  .ds-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ds-color-info {
    width: 80px;
  }
  .ds-typo-fonts {
    flex-direction: column;
    gap: 8px;
  }
  .ds-states {
    flex-direction: column;
    gap: 8px;
  }
  .ds-comp-row {
    flex-wrap: wrap;
  }
  .ds-comp-label {
    width: 100%;
  }
  .ds-scale-h1 {
    font-size: 14px;
  }
  .ds-scale-h2 {
    font-size: 12px;
  }
}
.cc-section {
  background: #080808;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora',sans-serif;
}
.cc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 5% 0;
  position: relative;
  z-index: 3;
}
.cc-top-left,.cc-top-right {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  line-height: 1.6;
}
.cc-top-right {
  text-align: right;
}
.cc-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 20px 5%;
}
.cc-number {
  font-family: 'Sora',sans-serif;
  font-weight: 200;
  font-size: clamp(160px,22vw,220px);
  line-height: 0.85;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.05em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-58%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.cc-title-block {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cc-title-en {
  font-family: 'Sora',sans-serif;
  font-weight: 300;
  font-size: clamp(22px,3.8vw,42px);
  color: #FFFFFF;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
}
.cc-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-weight: 300;
  font-size: clamp(14px,1.6vw,18px);
  color: #888888;
  letter-spacing: 0.4em;
  text-align: center;
}
.cc-divider-line {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 4px 0 2px;
}
.cc-desc {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.8;
}
.cc-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 5% 36px;
  position: relative;
  z-index: 3;
}
.cc-nav-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px;
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  text-decoration: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.cc-nav-item .cc-nav-num {
  font-size: 8px;
  color: rgba(255,255,255,0.15);
  letter-spacing: 0.08em;
}
.cc-nav-item.is-active {
  color: rgba(255,255,255,0.9);
}
.cc-nav-item.is-active .cc-nav-num {
  color: rgba(255,255,255,0.5);
}
.cc-nav-item.is-active {
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.cc-nav-sep {
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.cc-section[data-chapter="02"] .cc-number {
  color: rgba(120,100,200,0.05);
}
.cc-section[data-chapter="03"] .cc-number {
  color: rgba(107,138,90,0.05);
}
.cc-section[data-chapter="04"] .cc-number {
  color: rgba(180,150,100,0.05);
}
.cc-section[data-chapter="05"] .cc-number {
  color: rgba(200,60,60,0.05);
}
.cc-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.cc-section.in-view .cc-anim {
  opacity: 1;
  transform: translateY(0);
}
.cc-anim-1 {
  transition-delay: 0.1s;
}
.cc-anim-2 {
  transition-delay: 0.3s;
}
.cc-anim-3 {
  transition-delay: 0.5s;
}
.cc-anim-4 {
  transition-delay: 0.65s;
}
.cc-anim-5 {
  transition-delay: 0.85s;
}
.cc-number {
  opacity: 0;
  transform: translate(-50%,-58%) scale(0.92);
  transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1) 0.2s,transform 1.4s cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.cc-section.in-view .cc-number {
  opacity: 1;
  transform: translate(-50%,-58%) scale(1);
}
@media(max-width:900px) {
  .cc-number {
    font-size: clamp(100px,28vw,160px);
  }
  .cc-nav-item {
    padding: 6px 8px;
    font-size: 8px;
  }
  .cc-nav-item .cc-nav-num {
    font-size: 7px;
  }
  .cc-nav-sep {
    height: 8px;
  }
}
/* Project discovery stays in the existing divider; no extra case-study page. */
.cc-authorship {
  margin: 2px 0 0;
  color: #a7a49e;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
  text-align: center;
}
.cc-section--indexed .cc-top { padding-top: 112px; }
.cc-section--indexed .cc-center { padding-block: 28px 36px; }
.cc-project-index {
  position: relative;
  z-index: 2;
  width: min(100%, 960px);
  margin-top: clamp(28px, 5vh, 52px);
  font-family: 'Noto Sans SC',sans-serif;
}
.cc-project-group {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  border-top: 1px solid #353432;
  padding-block: 18px;
}
.cc-project-group-label { margin: 0; font-size: 14px; color: #aaa7a1; }
.cc-project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.cc-project-link { display: flex; flex-direction: column; gap: 5px; min-height: 48px; color: #ddd9d1; text-decoration: none; transition: color .2s ease; }
.cc-project-name { font-size: 16px; line-height: 1.6; }
.cc-project-detail { color: #9f9c96; font-size: 14px; line-height: 1.5; }
.cc-project-group:first-child .cc-project-name { color: #f2eee5; }
.cc-project-link:hover .cc-project-name { text-decoration: underline; text-underline-offset: 5px; }
.cc-project-link:focus-visible { outline: 1px solid #ddd9d1; outline-offset: 6px; }
.game-demo-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding-inline: 18px;
  border: 1px solid #8a4a30;
  color: #713a26;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.game-demo-launch:hover { background: rgba(138,74,48,.07); }
.game-demo-launch:focus-visible { outline: 2px solid #713a26; outline-offset: 4px; }
.game-demo-hint { display: block; margin-top: 6px; font-family: 'Noto Sans SC',sans-serif; font-size: 12px; line-height: 1.6; color: #786b5d; }
@media (max-width: 760px) {
  .cc-section--indexed .cc-top { padding-top: 96px; }
  .cc-project-group { grid-template-columns: 1fr; gap: 12px; padding-block: 16px; }
  .cc-project-list { gap: 16px; }
  .cc-project-name { font-size: 14px; }
}
@media (max-width: 520px) {
  .cc-section--indexed .cc-center { padding-inline: 7%; }
  .cc-project-list { grid-template-columns: 1fr; gap: 4px; }
  .cc-project-link { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  .cc-project-name { font-size: 16px; }
  .cc-project-detail { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-project-link, .game-demo-launch { transition: none; }
}
.cs-overview {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.cs-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(circle at 15% 85%, #A63A2B 0%, transparent 8%), radial-gradient(circle at 85% 15%, #A63A2B 0%, transparent 6%), repeating-linear-gradient(45deg, transparent, transparent 40px, #A63A2B 40px, #A63A2B 41px);
}
.cs-bg-deco::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  border: 1px solid #A63A2B;
  border-radius: 50%;
  opacity: 0.5;
}
.cs-top-title {
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 3;
}
.cs-top-en {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.cs-top-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
.cs-main {
  flex: 1;
  display: flex;
  padding: 100px 60px 0;
  position: relative;
  z-index: 2;
  gap: 40px;
}
.cs-left {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
}
.cs-project-title {
  font-family: 'Sora',sans-serif;
  font-size: clamp(36px,4.2vw,58px);
  font-weight: 700;
  color: #171717;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.cs-project-title span {
  display: block;
}
.cs-project-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #333333;
  letter-spacing: 0.15em;
  margin-top: 24px;
}
.cs-intro {
  margin-top: 48px;
  max-width: 420px;
}
.cs-intro-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cs-intro-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #444444;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.cs-accent {
  color: #A63A2B;
  font-weight: 600;
}
.cs-right {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.cs-preview-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  align-self: flex-start;
  padding-left: 4px;
  margin-bottom: -4px;
}
.cs-hero-video {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(166,58,43,0.08);
}
.cs-demo-card {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(166,58,43,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.cs-demo-card:hover {
  border-color: rgba(166,58,43,0.3);
  background: rgba(255,255,255,0.7);
  box-shadow: 0 4px 24px rgba(166,58,43,0.06);
}
.cs-demo-qr {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(166,58,43,0.1);
}
.cs-demo-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-demo-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-demo-en-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.cs-demo-en-sub {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.cs-demo-en-type {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #999999;
  letter-spacing: 0.1em;
  margin-top: 1px;
}
.cs-demo-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.cs-demo-cn-sub {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #888888;
  letter-spacing: 0.02em;
}
.cs-demo-divider {
  width: 1px;
  height: 60px;
  background: #D4C9B5;
  flex-shrink: 0;
}
.cs-tags {
  display: flex;
  gap: 12px;
}
.cs-tag {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  background: transparent;
}
.cs-info-bar {
  display: flex;
  align-items: stretch;
  padding: 0 60px 36px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.cs-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px;
}
.cs-info-item:first-child {
  padding-left: 0;
}
.cs-info-item:last-child {
  padding-right: 0;
}
.cs-info-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.1em;
}
.cs-info-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 6px;
}
.cs-info-value {
  font-family: 'Sora',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.cs-info-divider {
  width: 1px;
  background: #D4C9B5;
  flex-shrink: 0;
}
.cs-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.cs-overview.in-view .cs-anim {
  opacity: 1;
  transform: translateY(0);
}
.cs-anim-1 {
  transition-delay: 0.1s;
}
.cs-anim-2 {
  transition-delay: 0.25s;
}
.cs-anim-3 {
  transition-delay: 0.4s;
}
.cs-anim-4 {
  transition-delay: 0.55s;
}
.cs-anim-5 {
  transition-delay: 0.7s;
}
.cs-anim-6 {
  transition-delay: 0.8s;
}
.cs-anim-7 {
  transition-delay: 0.9s;
}
@media(max-width:900px) {
  .cs-main {
    flex-direction: column;
    padding: 80px 32px 0;
    gap: 32px;
  }
  .cs-left,.cs-right {
    width: 100%;
  }
  .cs-project-title {
    font-size: clamp(28px,6vw,42px);
  }
  .cs-hero-video {
    max-width: 100%;
  }
  .cs-demo-card {
    max-width: 100%;
  }
  .cs-info-bar {
    flex-wrap: wrap;
    padding: 0 32px 24px;
  }
  .cs-info-item {
    flex: 1 1 50%;
    padding: 8px 16px;
  }
  .cs-info-divider {
    display: none;
  }
  .cs-top-title {
    left: 32px;
    top: 32px;
  }
}
.dbg-section {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.dbg-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 60px, #A63A2B 60px, #A63A2B 61px), radial-gradient(circle at 80% 80%, #A63A2B 0%, transparent 10%);
}
.dbg-top {
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 3;
}
.dbg-top-en {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dbg-top-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
.dbg-main {
  flex: 1;
  display: flex;
  padding: 100px 60px 0;
  position: relative;
  z-index: 2;
  gap: 50px;
}
.dbg-left {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.dbg-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(166,58,43,0.1);
}
.dbg-image-label {
  margin-top: 24px;
  text-align: center;
}
.dbg-image-label-en {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #666666;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dbg-image-label-sub {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.dbg-right {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-right: 20px;
}
.dbg-module {
  position: relative;
  padding-left: 0;
}
.dbg-module-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.1em;
}
.dbg-module-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.dbg-module-title-en {
  font-family: 'Sora',sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.dbg-module-title-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.1em;
}
.dbg-module-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #444444;
  line-height: 1.8;
  margin-top: 8px;
  max-width: 480px;
}
.dbg-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.dbg-flow-step {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  color: #666666;
  padding: 4px 12px;
  border: 1px solid #D4C9B5;
  border-radius: 2px;
  white-space: nowrap;
}
.dbg-flow-arrow {
  color: #A63A2B;
  font-size: 14px;
  font-weight: 600;
}
.dbg-keywords {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}
.dbg-keyword {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(166,58,43,0.3);
  border-radius: 2px;
}
.dbg-divider {
  width: 100%;
  height: 1px;
  background: #D4C9B5;
  opacity: 0.6;
}
.dbg-summary {
  text-align: center;
  padding: 0 60px 40px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.dbg-summary-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.15em;
}
.dbg-summary-line {
  width: 40px;
  height: 1px;
  background: #A63A2B;
  margin: 0 auto 16px;
}
.dbg-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dbg-section.in-view .dbg-anim {
  opacity: 1;
  transform: translateY(0);
}
.dbg-anim-1 {
  transition-delay: 0.1s;
}
.dbg-anim-2 {
  transition-delay: 0.25s;
}
.dbg-anim-3 {
  transition-delay: 0.4s;
}
.dbg-anim-4 {
  transition-delay: 0.55s;
}
.dbg-anim-5 {
  transition-delay: 0.7s;
}
@media(max-width:900px) {
  .dbg-main {
    flex-direction: column;
    padding: 80px 32px 0;
    gap: 32px;
  }
  .dbg-left,.dbg-right {
    width: 100%;
  }
  .dbg-image {
    max-width: 100%;
  }
  .dbg-flow {
    flex-wrap: wrap;
  }
  .dbg-top {
    left: 32px;
    top: 32px;
  }
  .dbg-summary {
    padding: 0 32px 24px;
  }
}
.dcp-section {
  background: #F3EBDD;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.dcp-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: repeating-linear-gradient(135deg,transparent,transparent 80px,#A63A2B 80px,#A63A2B 81px), radial-gradient(circle at 20% 30%,#A63A2B 0%,transparent 8%), radial-gradient(circle at 85% 70%,#A63A2B 0%,transparent 6%);
}
.dcp-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(rgba(166,58,43,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(166,58,43,0.03) 1px,transparent 1px);
  background-size: 80px 80px;
}
.dcp-top {
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 3;
}
.dcp-top-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.2em;
}
.dcp-top-en {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 6px;
}
.dcp-top-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
.dcp-hero {
  width: min(1460px,calc(100% - 120px));
  margin: 0 auto;
  padding: clamp(132px,14vh,164px) 0 0;
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(280px,1fr);
  grid-template-areas: 'title description' 'subtitle description';
  column-gap: clamp(48px,6vw,96px);
  row-gap: 12px;
  align-items: end;
  text-align: left;
  position: relative;
  z-index: 2;
}
.dcp-hero-title {
  grid-area: title;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(56px,6vw,96px);
  font-weight: 800;
  color: #171717;
  letter-spacing: 0.04em;
  line-height: 0.98;
  margin: 0;
}
.dcp-hero-subtitle {
  grid-area: subtitle;
  font-family: 'Sora',sans-serif;
  font-size: clamp(11px,1vw,13px);
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 0;
}
.dcp-hero-desc {
  grid-area: description;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #6E675E;
  line-height: 1.9;
  max-width: 32em;
  margin: 0 0 4px;
}
.dcp-logic {
  width: min(1460px,calc(100% - 120px));
  margin: 0 auto;
  padding: 54px 0 0;
  position: relative;
  z-index: 2;
}
.dcp-logic-label {
  position: static;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dcp-logic-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);
  align-items: center;
  width: 100%;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(166,58,43,0.18);
  border-bottom: 1px solid rgba(166,58,43,0.18);
}
.dcp-logic-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 0 0 auto;
  width: auto;
  text-align: left;
}
.dcp-logic-num {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.15em;
}
.dcp-logic-en {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dcp-logic-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.08em;
}
.dcp-logic-keyword {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #B8896B;
  letter-spacing: 0.1em;
}
.dcp-logic-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A63A2B;
  margin-top: 4px;
}
.dcp-logic-connector {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: none;
  margin: 0 10px;
}
.dcp-logic-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,transparent,#A63A2B,transparent);
}
.dcp-logic-arrow {
  color: #A63A2B;
  font-size: 9px;
  font-weight: 300;
  margin: 0 2px;
  flex-shrink: 0;
}
.dcp-core-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
  position: relative;
  z-index: 2;
}
.dcp-core-label-line {
  width: 40px;
  height: 1px;
  background: #D4C9B5;
}
.dcp-core-label-en {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.dcp-core-label-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
}
.dcp-visual {
  width: min(1460px,calc(100% - 120px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) 112px minmax(0,1fr);
  align-items: end;
  gap: clamp(22px,2.6vw,42px);
  padding: 24px 0 0;
  position: relative;
  z-index: 2;
}
.dcp-visual-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: none;
}
.dcp-visual-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 10px;
}
.dcp-visual-tag-en {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dcp-visual-tag-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.1em;
}
.dcp-visual-tag-sub {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1px;
}
.dcp-visual-image {
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(82,55,36,0.16);
}
.dcp-visual-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  width: 112px;
  padding: 0;
  align-self: center;
}
.dcp-mirror {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(166,58,43,0.35);
  background: radial-gradient(circle,rgba(166,58,43,0.08) 0%,rgba(166,58,43,0.02) 60%,transparent 100%);
  box-shadow: 0 0 20px 4px rgba(166,58,43,0.08), 0 0 40px 8px rgba(166,58,43,0.04), inset 0 0 12px 2px rgba(166,58,43,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dcp-mirror::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(166,58,43,0.15);
}
.dcp-mirror-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A63A2B;
  box-shadow: 0 0 8px 2px rgba(166,58,43,0.3);
}
.dcp-visual-mid-en {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 2px;
}
.dcp-visual-mid-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.12em;
}
.dcp-visual-mid-arrow {
  color: #A63A2B;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}
.dcp-visual-mid-reveal {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.dcp-modules {
  width: min(1460px,calc(100% - 120px));
  margin: 52px auto 88px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  padding: 0;
  border-top: 1px solid #D4C9B5;
  border-bottom: 1px solid #D4C9B5;
  position: relative;
  z-index: 2;
}
.dcp-module {
  max-width: none;
  padding: 22px clamp(22px,2.5vw,40px) 28px;
  position: relative;
}
.dcp-module + .dcp-module {
  border-left: 1px solid #D4C9B5;
}
.dcp-module::before {
  content: none;
}
.dcp-module-num {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
  padding-top: 0;
}
.dcp-module-en {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 6px;
}
.dcp-module-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.dcp-module-keyword {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #B8896B;
  letter-spacing: 0.1em;
  margin-top: 2px;
  line-height: 1.8;
  max-width: 31em;
}
.dcp-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dcp-section.in-view .dcp-anim {
  opacity: 1;
  transform: translateY(0);
}
.dcp-anim-1 {
  transition-delay: 0.1s;
}
.dcp-anim-2 {
  transition-delay: 0.25s;
}
.dcp-anim-3 {
  transition-delay: 0.4s;
}
.dcp-anim-4 {
  transition-delay: 0.55s;
}
.dcp-anim-5 {
  transition-delay: 0.7s;
}
.dcp-anim-6 {
  transition-delay: 0.85s;
}
/* Desktop concept sheet: fit the reading sequence, never crop the artwork. */
@media(min-width:901px) {
  .dcp-section { padding: 108px 0 28px; }
  .dcp-section .case-nav {
    position: relative; top: auto; left: auto;
    width: min(1460px,calc(100% - 120px)); margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
  }
  .dcp-section .case-nav-num { font-size: 24px; }
  .dcp-section .case-nav-en, .dcp-section .case-nav-cn { margin-top: 0; }
  .dcp-hero { padding-top: 16px; row-gap: 8px; }
  .dcp-hero-title { font-size: clamp(48px,4.5vw,72px); }
  .dcp-logic { padding-top: 20px; }
  .dcp-logic-flow { margin-top: 8px; padding: 10px 0; }
  .dcp-logic-node { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
  .dcp-logic-num { grid-row: 1 / 3; }
  .dcp-logic-cn { grid-column: 2; }
  .dcp-logic-keyword { grid-column: 2; }
  .dcp-logic-dot { display: none; }
  .dcp-core-label { margin-top: 18px; }
  .dcp-visual {
    --dcp-image-height: clamp(170px,calc(100svh - 600px),360px);
    max-width: calc(var(--dcp-image-height) * 3.555556 + 128px);
    grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr);
    gap: 24px; padding-top: 12px;
  }
  .dcp-visual-tag { flex-direction: row; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .dcp-visual-mid { width: 80px; gap: 6px; text-align: center; }
  .dcp-mirror { width: 40px; height: 40px; }
  .dcp-modules { margin: 24px auto 0; }
  .dcp-module { padding: 12px 24px 16px; }
  .dcp-module-en { margin-top: 4px; font-size: 9px; }
  .dcp-module-cn { font-size: 16px; }
  .dcp-module-keyword { font-size: 12px; line-height: 1.65; }
}
@media(max-width:900px) {
  .dcp-section {
    min-height: auto;
    padding-bottom: 72px;
  }
  .dcp-section .case-nav {
    top: 96px;
    left: 22px;
  }
  .dcp-hero {
    width: auto;
    margin: 0 22px;
    padding: 180px 0 0;
    grid-template-columns: 1fr;
    grid-template-areas: 'title' 'subtitle' 'description';
    gap: 10px;
  }
  .dcp-hero-title {
    font-size: clamp(48px,14vw,68px);
    line-height: 1.02;
  }
  .dcp-hero-desc {
    margin-top: 20px;
    font-size: 14px;
  }
  .dcp-logic {
    width: auto;
    margin: 0 22px;
    padding: 48px 0 0;
  }
  .dcp-logic-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
  }
  .dcp-logic-node {
    width: 100%;
  }
  .dcp-logic-connector {
    max-width: none;
    width: 28px;
    height: 42px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .dcp-logic-line {
    width: 1px;
    min-height: 12px;
    background: linear-gradient(180deg,transparent,#A63A2B,transparent);
  }
  .dcp-logic-arrow {
    transform: rotate(90deg);
  }
  .dcp-core-label {
    margin-top: 40px;
  }
  .dcp-visual {
    width: auto;
    margin: 0 22px;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 22px 0 0;
  }
  .dcp-visual-image {
    max-width: 100%;
  }
  .dcp-visual-mid {
    flex-direction: row;
    min-width: 0;
    width: 100%;
    padding: 4px 0;
  }
  .dcp-modules {
    width: auto;
    margin: 44px 22px 0;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .dcp-module {
    padding: 22px 0 26px;
  }
  .dcp-module + .dcp-module {
    border-left: 0;
    border-top: 1px solid #D4C9B5;
  }
  .dcp-top {
    left: 32px;
    top: 32px;
  }
}
.dss-section {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.dss-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: repeating-linear-gradient(135deg,transparent,transparent 80px,#A63A2B 80px,#A63A2B 81px), radial-gradient(circle at 20% 30%,#A63A2B 0%,transparent 8%), radial-gradient(circle at 85% 70%,#A63A2B 0%,transparent 6%);
}
.dss-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(rgba(166,58,43,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(166,58,43,0.03) 1px,transparent 1px);
  background-size: 80px 80px;
}
.dss-top {
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 3;
}
.dss-top-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.2em;
}
.dss-top-en {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 6px;
}
.dss-top-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
.dss-hero {
  text-align: center;
  padding: 80px 60px 0;
  position: relative;
  z-index: 2;
}
.dss-hero-title {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(48px,6vw,72px);
  font-weight: 800;
  color: #171717;
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin: 0;
}
.dss-hero-subtitle {
  font-family: 'Sora',sans-serif;
  font-size: clamp(11px,1vw,13px);
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 10px;
}
.dss-hero-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #888888;
  line-height: 1.7;
  max-width: 480px;
  margin: 10px auto 0;
}
.dss-timeline {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 60px 0;
  position: relative;
  z-index: 2;
}
.dss-timeline-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dss-timeline-flow {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
}
.dss-timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  width: 160px;
  text-align: center;
}
.dss-timeline-num {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #B8896B;
  letter-spacing: 0.15em;
}
.dss-timeline-node.major .dss-timeline-num {
  color: #A63A2B;
}
.dss-timeline-en {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dss-timeline-node.major .dss-timeline-en {
  color: #A63A2B;
}
.dss-timeline-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.08em;
}
.dss-timeline-node.major .dss-timeline-cn {
  color: #171717;
  font-weight: 600;
}
.dss-timeline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4C9B5;
  border: 2px solid #F3EBDD;
  box-shadow: 0 0 0 1px #D4C9B5;
  margin-top: 4px;
}
.dss-timeline-node.major .dss-timeline-dot {
  background: #A63A2B;
  box-shadow: 0 0 0 1px #A63A2B,0 0 6px 2px rgba(166,58,43,0.2);
}
.dss-timeline-connector {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 40px;
  margin-top: 20px;
}
.dss-timeline-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,#D4C9B5,#A63A2B,transparent);
}
.dss-timeline-arrow {
  color: #A63A2B;
  font-size: 9px;
  font-weight: 300;
  flex-shrink: 0;
}
.dss-scenes {
  padding: 20px 60px 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dss-scene {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.dss-scene-left {
  flex: 0 0 auto;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-right: 1px solid #D4C9B5;
  padding-right: 18px;
}
.dss-scene-num {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.15em;
}
.dss-scene-en {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 2px;
}
.dss-scene-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.dss-scene-role {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #B8896B;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.dss-scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dss-scene-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #D4C9B5;
  border-radius: 2px;
  background: rgba(166,58,43,0.02);
}
.dss-scene-tag-en {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dss-scene-tag-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.08em;
}
.dss-scene-right {
  flex: 1;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dss-scene-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dss-scene-img {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(166,58,43,0.12);
}
.dss-scene-img-tall {
  max-width: 260px;
}
.dss-scene-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
  max-width: 520px;
}
.dss-scene-major {
  padding: 4px 0;
}
.dss-scene-major .dss-scene-cn {
  font-size: 16px;
}
.dss-scene-major .dss-scene-right {
  gap: 12px;
}
.dss-mirror-scene {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dss-mirror-comparison {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}
.dss-mirror-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 380px;
}
.dss-mirror-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.dss-mirror-tag-en {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dss-mirror-tag-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.1em;
}
.dss-mirror-tag-sub {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dss-mirror-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 28px rgba(166,58,43,0.15);
}
.dss-mirror-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: 90px;
  padding: 0 8px;
}
.dss-mirror-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(166,58,43,0.35);
  background: radial-gradient(circle,rgba(166,58,43,0.08) 0%,rgba(166,58,43,0.02) 60%,transparent 100%);
  box-shadow: 0 0 16px 3px rgba(166,58,43,0.08),0 0 32px 6px rgba(166,58,43,0.04),inset 0 0 10px 2px rgba(166,58,43,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dss-mirror-circle::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(166,58,43,0.15);
}
.dss-mirror-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A63A2B;
  box-shadow: 0 0 6px 2px rgba(166,58,43,0.3);
}
.dss-mirror-mid-en {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 2px;
}
.dss-mirror-mid-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999999;
  letter-spacing: 0.12em;
}
.dss-mirror-mid-arrow {
  color: #A63A2B;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
}
.dss-mirror-mid-reveal {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.dss-mirror-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.dss-experience {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 60px 32px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.dss-experience-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #B8896B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.dss-experience-flow {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
}
.dss-experience-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  width: 130px;
  text-align: center;
}
.dss-experience-en {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.dss-experience-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  letter-spacing: 0.08em;
}
.dss-experience-emotion {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #B8896B;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
.dss-experience-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A63A2B;
  margin-top: 3px;
}
.dss-experience-connector {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 50px;
  margin-top: 18px;
}
.dss-experience-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,transparent,#A63A2B,transparent);
}
.dss-experience-arrow {
  color: #A63A2B;
  font-size: 9px;
  font-weight: 300;
  flex-shrink: 0;
}
.dss-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.dss-section.in-view .dss-anim {
  opacity: 1;
  transform: translateY(0);
}
.dss-anim-1 {
  transition-delay: 0.1s;
}
.dss-anim-2 {
  transition-delay: 0.25s;
}
.dss-anim-3 {
  transition-delay: 0.4s;
}
.dss-anim-4 {
  transition-delay: 0.55s;
}
.dss-anim-5 {
  transition-delay: 0.7s;
}
.dss-anim-6 {
  transition-delay: 0.85s;
}
.dss-anim-7 {
  transition-delay: 1s;
}
.dss-anim-8 {
  transition-delay: 1.15s;
}
@media(max-width:900px) {
  .dss-hero {
    padding: 80px 32px 0;
  }
  .dss-timeline {
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 24px 32px 0;
  }
  .dss-timeline-flow {
    flex-direction: column;
    gap: 14px;
  }
  .dss-timeline-connector {
    max-width: none;
    width: 1px;
    height: 20px;
    margin: 0 auto;
  }
  .dss-timeline-line {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg,#D4C9B5,#A63A2B,transparent);
  }
  .dss-scenes {
    padding: 20px 32px 0;
    gap: 20px;
  }
  .dss-scene {
    flex-direction: column;
    gap: 12px;
  }
  .dss-scene-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #D4C9B5;
    padding-right: 0;
    padding-bottom: 12px;
  }
  .dss-scene-right {
    padding-left: 0;
  }
  .dss-scene-images {
    flex-direction: column;
  }
  .dss-scene-img {
    max-width: 100%;
  }
  .dss-mirror-comparison {
    flex-direction: column;
    gap: 20px;
  }
  .dss-mirror-img {
    max-width: 100%;
  }
  .dss-mirror-mid {
    flex-direction: row;
    min-width: 0;
    width: auto;
    padding: 8px 0;
  }
  .dss-experience {
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 20px 32px 24px;
  }
  .dss-experience-flow {
    flex-direction: column;
    gap: 14px;
  }
  .dss-experience-connector {
    max-width: none;
    width: 1px;
    height: 20px;
    margin: 0 auto;
  }
  .dss-experience-line {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg,transparent,#A63A2B,transparent);
  }
  .dss-top {
    left: 32px;
    top: 32px;
  }
}
.dpi-section {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.dpi-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(166,58,43,0.5) 80px,rgba(166,58,43,0.5) 81px), repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(166,58,43,0.5) 80px,rgba(166,58,43,0.5) 81px);
}
.dpi-header {
  padding: 140px 60px 0;
  position: relative;
  z-index: 2;
}
.dpi-header-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
}
.dpi-header-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 3px;
}
.dpi-header-title {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #171717;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.dpi-header-subtitle {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #A63A2B;
  letter-spacing: 0.2em;
  margin-top: 2px;
}
.dpi-header-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  color: #666;
  line-height: 1.7;
  max-width: 520px;
  margin-top: 8px;
}
.dpi-divider {
  width: calc(100% - 120px);
  height: 1px;
  background: rgba(166,58,43,0.12);
  margin: 10px 60px 0;
}
.dpi-modules {
  display: flex;
  gap: 0;
  flex: 1;
  padding: 14px 60px 0;
  position: relative;
  z-index: 2;
  align-items: flex-start;
}
.dpi-mod {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 18px;
}
.dpi-mod:not(:last-child) {
  border-right: 1px solid rgba(166,58,43,0.08);
}
.dpi-mod-core {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
  border: 1px solid rgba(166,58,43,0.3);
  padding: 1px 6px;
  border-radius: 1px;
  align-self: flex-start;
  margin-bottom: 6px;
}
.dpi-mod-num {
  font-family: 'Sora',sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: rgba(166,58,43,0.5);
  line-height: 1;
}
.dpi-mod-title {
  font-family: 'Sora',sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #171717;
  margin-top: 4px;
}
.dpi-mod-subtitle {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.1em;
  margin-top: 2px;
  margin-bottom: 10px;
}
.dpi-mod-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(166,58,43,0.08);
}
.dpi-mod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dpi-mod-img-compact {
  width: 72%;
  margin: 0 auto 10px;
}
.dpi-mirror-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.dpi-mirror-item {
  position: relative;
}
.dpi-mirror-label {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
  margin-bottom: 3px;
}
.dpi-mirror-img {
  width: 100%;
  height: 112px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(166,58,43,0.08);
}
.dpi-mirror-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dpi-mirror-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0;
  background: rgba(166,58,43,0.04);
  border-radius: 2px;
  margin: 1px 0;
}
.dpi-mirror-flow-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dpi-mirror-flow-step {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.14em;
}
.dpi-mirror-flow-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
  color: #666;
}
.dpi-mirror-flow-arrow {
  font-size: 10px;
  color: rgba(166,58,43,0.35);
  line-height: 1;
  margin: 1px 0;
}
.dpi-mod-info {
  margin-bottom: 10px;
}
.dpi-mod-info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.dpi-mod-info-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dpi-mod-info-value {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  color: #333;
  line-height: 1.5;
}
.dpi-mod-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dpi-mod-tag {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #666;
  background: rgba(166,58,43,0.04);
  border: 1px solid rgba(166,58,43,0.15);
  padding: 2px 7px;
  border-radius: 1px;
}
.dpi-mod-tag-accent {
  color: #A63A2B;
  border-color: rgba(166,58,43,0.4);
  background: rgba(166,58,43,0.08);
}
.dpi-loop {
  padding: 20px 60px 28px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(166,58,43,0.1);
  margin: 16px 60px 0;
}
.dpi-loop-title {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #8B6F47;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dpi-loop-summary {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 14px;
}
.dpi-loop-nodes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.dpi-loop-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.dpi-loop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #A63A2B;
  background: #F3EBDD;
}
.dpi-loop-label {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #171717;
  letter-spacing: 0.08em;
  margin-top: 5px;
}
.dpi-loop-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  color: #666;
  margin-top: 1px;
}
.dpi-loop-line {
  flex: 1;
  height: 1px;
  background: rgba(166,58,43,0.25);
  margin: 4px 12px 0;
}
.dpi-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.dpi-section.in-view .dpi-anim {
  opacity: 1;
  transform: translateY(0);
}
.dpi-anim-1 {
  transition-delay: 0.1s;
}
.dpi-anim-2 {
  transition-delay: 0.2s;
}
.dpi-anim-3 {
  transition-delay: 0.35s;
}
.dpi-anim-4 {
  transition-delay: 0.5s;
}
.dpi-anim-5 {
  transition-delay: 0.6s;
}
.dpi-anim-6 {
  transition-delay: 0.7s;
}
.dpi-anim-7 {
  transition-delay: 0.8s;
}
.dpi-anim-8 {
  transition-delay: 0.9s;
}
.dpi-anim-9 {
  transition-delay: 1.0s;
}
@media(max-width:900px) {
  .dpi-modules {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    padding: 20px 32px 0;
  }
  .dpi-mod {
    max-width: 100%;
    flex: none;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid rgba(166,58,43,0.08);
    padding-bottom: 32px;
  }
  .dpi-mod:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .dpi-header {
    padding: 120px 32px 0;
  }
  .dpi-divider {
    width: calc(100% - 64px);
    margin: 10px 32px 0;
  }
  .dpi-loop {
    padding: 16px 32px 24px;
    margin: 16px 32px 0;
  }
  .dpi-loop-nodes {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .dpi-loop-line {
    display: none;
  }
}
.case-nav {
  position: absolute;
  top: 60px;
  left: 80px;
  z-index: 5;
}
.case-nav-num {
  font-family: 'Sora',sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: rgba(0,0,0,0.12);
  line-height: 1;
  letter-spacing: 0.02em;
}
.case-nav-en {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #999;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
}
.case-nav-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.12em;
  margin-top: 2px;
}
@media(max-width:900px) {
  .case-nav {
    top: 40px;
    left: 32px;
  }
  .case-nav-num {
    font-size: 28px;
  }
}
.iev-section {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.iev-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 40px, #A63A2B 40px, #A63A2B 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, #A63A2B 40px, #A63A2B 41px);
}
.iev-header {
  padding: 140px 60px 0;
  position: relative;
  z-index: 2;
}
.iev-main-title {
  font-family: 'Sora',sans-serif;
  font-size: clamp(28px,3vw,42px);
  font-weight: 700;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 24px;
}
.iev-main-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.1em;
  margin-top: 12px;
}
.iev-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-top: 20px;
  max-width: 520px;
}
.iev-accent {
  color: #A63A2B;
  font-weight: 600;
}
.iev-modules {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 60px 0;
  position: relative;
  z-index: 2;
  gap: 32px;
}
.iev-top-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  align-items: start;
}
.iev-video-module {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iev-video-module-core {
}
.iev-mod-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.iev-mod-num {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.1em;
}
.iev-mod-title {
  font-family: 'Sora',sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #171717;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.iev-mod-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.iev-core-badge {
  display: inline-block;
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid rgba(166,58,43,0.3);
  border-radius: 4px;
  margin-left: 8px;
}
.iev-video-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  background: #1a1a1a;
  position: relative;
}
.iev-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.iev-mod-info {
  display: flex;
  gap: 16px;
  padding: 12px 0 0;
}
.iev-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.iev-info-label {
  font-family: 'Sora',sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.iev-info-text {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
}
.iev-info-div {
  width: 1px;
  background: #D4C9B5;
  flex-shrink: 0;
  align-self: stretch;
}
.iev-summary {
  padding: 40px 60px 48px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.iev-flow {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.iev-flow-step {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.iev-flow-step.accent {
  color: #A63A2B;
}
.iev-flow-arrow {
  color: #CCC;
  font-size: 14px;
}
.iev-flow-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.05em;
  margin-top: 10px;
}
.iev-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.iev-section.in-view .iev-anim {
  opacity: 1;
  transform: translateY(0);
}
.iev-anim-1 {
  transition-delay: 0.1s;
}
.iev-anim-2 {
  transition-delay: 0.2s;
}
.iev-anim-3 {
  transition-delay: 0.35s;
}
.iev-anim-4 {
  transition-delay: 0.5s;
}
.iev-anim-5 {
  transition-delay: 0.65s;
}
.iev-anim-6 {
  transition-delay: 0.8s;
}
@media(max-width:900px) {
  .iev-header {
    padding: 100px 32px 0;
  }
  .iev-modules {
    padding: 32px 32px 0;
  }
  .iev-top-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .iev-mod-info {
    flex-direction: column;
    gap: 8px;
  }
  .iev-info-div {
    display: none;
  }
  .iev-summary {
    padding: 32px;
  }
  .iev-flow {
    gap: 12px;
  }
}
.pe-section {
  background: #F3EBDD;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.pe-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 40px, #A63A2B 40px, #A63A2B 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, #A63A2B 40px, #A63A2B 41px);
}
.pe-header {
  padding: 140px 60px 0;
  position: relative;
  z-index: 2;
}
.pe-main-title {
  font-family: 'Sora',sans-serif;
  font-size: clamp(28px,3vw,42px);
  font-weight: 700;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 24px;
}
.pe-main-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.1em;
  margin-top: 12px;
}
.pe-subtitle {
  font-family: 'Sora',sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-top: 16px;
}
.pe-subtitle-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.02em;
  margin-top: 6px;
}
.pe-main {
  flex: 1;
  display: flex;
  padding: 48px 60px 0;
  position: relative;
  z-index: 2;
  gap: 40px;
}
.pe-left {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pe-video-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pe-video-label-en {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pe-video-label-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.08em;
}
.pe-video-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  background: #1a1a1a;
  position: relative;
  aspect-ratio: 16/9;
}
.pe-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pe-right {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding-top: 8px;
}
.pe-demo-card {
  border: 1px solid rgba(166,58,43,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.pe-demo-card:hover {
  border-color: rgba(166,58,43,0.3);
  background: rgba(255,255,255,0.7);
  box-shadow: 0 4px 24px rgba(166,58,43,0.06);
}
.pe-demo-en-label {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.pe-demo-en-sub {
  font-family: 'Sora',sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #171717;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.pe-demo-qr {
  width: 120px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(166,58,43,0.1);
}
.pe-demo-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-demo-type {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.1em;
}
.pe-demo-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.05em;
}
.pe-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.3);
}
.pe-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pe-info-label {
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  min-width: 72px;
  flex-shrink: 0;
}
.pe-info-value {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.02em;
}
.pe-highlights {
  padding: 40px 60px 48px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.pe-highlights-title {
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #A63A2B;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pe-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.pe-highlight-card {
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.pe-highlight-card:hover {
  border-color: rgba(166,58,43,0.15);
  background: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.pe-hl-num {
  font-family: 'Sora',sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #A63A2B;
  letter-spacing: 0.15em;
}
.pe-hl-title {
  font-family: 'Sora',sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #171717;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 8px;
}
.pe-hl-cn {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.pe-hl-desc {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-top: 10px;
}
.pe-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),transform 1s cubic-bezier(0.22,1,0.36,1);
}
.pe-section.in-view .pe-anim {
  opacity: 1;
  transform: translateY(0);
}
.pe-anim-1 {
  transition-delay: 0.1s;
}
.pe-anim-2 {
  transition-delay: 0.2s;
}
.pe-anim-3 {
  transition-delay: 0.35s;
}
.pe-anim-4 {
  transition-delay: 0.5s;
}
.pe-anim-5 {
  transition-delay: 0.65s;
}
.pe-anim-6 {
  transition-delay: 0.8s;
}
@media(max-width:900px) {
  .pe-header {
    padding: 100px 32px 0;
  }
  .pe-main {
    flex-direction: column;
    padding: 32px 32px 0;
    gap: 32px;
  }
  .pe-left,.pe-right {
    width: 100%;
  }
  .pe-highlights {
    padding: 32px;
  }
  .pe-highlights-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pe-info-list {
    padding: 16px;
  }
}
/* PORTFOLIO POLISH 2026-08-11
   Scoped refinement for Chapters 01-02: readable motion, continuous narrative,
   stable navigation contrast, accessible controls, and mobile-first hierarchy. */

html {
  scroll-snap-type: none!important;
  overflow-x: hidden!important;
}

header .liquid-glass,
body.dd-active header .liquid-glass,
body.dc-active header .liquid-glass,
body.ia-active header .liquid-glass,
body.ds-active header .liquid-glass {
  background: rgba(10,10,10,0.86)!important;
  border-color: rgba(255,255,255,0.18)!important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12)!important;
  backdrop-filter: blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter: blur(18px) saturate(130%)!important;
}
header .text-white,
body.dd-active header .text-white,
body.dc-active header .text-white,
body.ia-active header .text-white,
body.ds-active header .text-white {
  color: #f7f5f0!important;
}
header .text-white\/70,
body.dd-active header .text-white\/70,
body.dc-active header .text-white\/70,
body.ia-active header .text-white\/70,
body.ds-active header .text-white\/70 {
  color: rgba(247,245,240,0.78)!important;
}
header .text-white\/40,
body.dd-active header .text-white\/40,
body.dc-active header .text-white\/40,
body.ia-active header .text-white\/40,
body.ds-active header .text-white\/40 {
  color: rgba(247,245,240,0.58)!important;
}
.mobile-menu-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #f7f5f0;
  font-family: 'Sora',sans-serif;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease,border-color 0.2s ease;
}
.mobile-menu-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.36);
}
.mobile-menu-btn:focus-visible,
.mp-thumb:focus-visible {
  outline: 2px solid #CFE3B6;
  outline-offset: 3px;
}

.cs-overview.snap-slide,
.dbg-section.snap-slide,
.dcp-section.snap-slide,
.dss-section.snap-slide,
.dpi-section.snap-slide,
.iev-section.snap-slide,
.pe-section.snap-slide,
.mp-showcase.snap-slide,
.dd-section.snap-slide,
.dc-section.snap-slide,
.ia-section.snap-slide,
.ds-section.snap-slide {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.dd-section {
  min-height: auto;
  padding-top: 72px;
  padding-bottom: 72px;
}
.dd-meta-row {
  margin-bottom: 30px;
}
.dd-title-block {
  margin-bottom: 22px;
}
.dd-divider {
  margin: 26px 0 32px;
}
.dd-manifesto-wrap {
  margin-bottom: 34px;
}
.dd-manifesto {
  font-size: clamp(28px,3.2vw,48px);
  line-height: 1.52;
}
.dd-keywords {
  margin-bottom: 38px;
}
.dd-keyword-desc,
.dd-principle-desc,
.dc-keyword-desc,
.dc-body-text {
  color: #565650;
}

.mp-thumb {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.mp-intro-desc {
  color: rgba(255,255,255,0.68);
  font-size: 15px;
}
.mp-filmstrip-label,
.mp-hint {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}
.mp-showcase-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
}

.ds-section {
  min-height: auto;
  overflow: visible;
  padding: 64px 5% 72px;
}
.ds-main {
  gap: 34px;
}
.ds-principle-desc,
.ds-color-name,
.ds-color-use,
.ds-font-cn,
.ds-font-use,
.ds-font-sample,
.ds-font-zh,
.ds-scale-body,
.ds-scale-use,
.ds-demo-nav-item,
.ds-demo-btn,
.ds-demo-card-designer,
.ds-demo-input-text,
.ds-demo-modal-body {
  font-size: 11px;
}
.ds-sub-label,
.ds-color-hex,
.ds-sp-px,
.ds-sp-use,
.ds-sp-grid-note,
.ds-scale-label,
.ds-scale-px,
.ds-grid-label,
.ds-comp-label {
  font-size: 10px;
  color: #6f6f68;
}

.mp-result-section {
  min-height: 100dvh;
  padding: 104px 7% 72px;
  display: grid;
  grid-template-columns: minmax(280px,0.72fr) minmax(560px,1.28fr);
  gap: clamp(48px,7vw,108px);
  align-items: center;
  background: #071008;
  color: #f4f6ee;
  position: relative;
  overflow: hidden;
}
.mp-result-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 42%,rgba(145,165,111,0.18),transparent 42%);
}
.mp-result-copy,
.mp-result-screens {
  position: relative;
  z-index: 1;
}
.mp-result-kicker {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  color: #a9bd87;
  letter-spacing: 0.24em;
}
.mp-result-title {
  margin-top: 18px;
  max-width: 620px;
  font-family: 'Sora',sans-serif;
  font-size: clamp(42px,5.5vw,78px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.mp-result-title-cn {
  margin-top: 22px;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 20px;
  color: rgba(244,246,238,0.74);
  letter-spacing: 0.12em;
}
.mp-result-desc {
  margin-top: 48px;
  max-width: 34em;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(244,246,238,0.68);
}
.mp-result-flow {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mp-result-flow-step {
  font-family: 'Sora',sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #dbe6c8;
}
.mp-result-flow-arrow {
  color: #6b8a5a;
}
.mp-result-screens {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  align-items: center;
}
.mp-result-screen {
  margin: 0;
  transform: translateY(20px);
}
.mp-result-screen-2 {
  transform: translateY(-26px);
}
.mp-result-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.36);
}
.mp-result-screen figcaption {
  margin-top: 12px;
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  color: rgba(244,246,238,0.5);
  letter-spacing: 0.08em;
}

/* Game UI case study — extracted from the real interactive prototype. */
.gui-case {
  min-height: 100vh;
  padding: clamp(116px,13vh,148px) clamp(32px,6vw,100px) clamp(96px,11vh,132px);
  position: relative;
  overflow: hidden;
  background: #070806;
  color: #f4f2ea;
  font-family: 'Sora','Noto Sans SC',sans-serif;
}
.gui-case::before {
  content: none;
}
.gui-case__inner {
  width: min(1480px,100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.gui-case__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(244,242,234,0.1);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: rgba(244,242,234,0.48);
}
.gui-case__head {
  margin-top: clamp(34px,4.8vh,52px);
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(360px,0.82fr);
  gap: clamp(56px,7vw,116px);
  align-items: end;
}
.gui-case__title {
  margin: 0;
  max-width: 10em;
  font-size: clamp(52px,6.2vw,92px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.gui-case__title-cn {
  display: block;
  margin-top: 20px;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(17px,1.65vw,23px);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: #b8ca83;
}
.gui-case__project-name {
  margin: 0 0 18px;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(24px,2.3vw,36px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
.gui-case__project-name span {
  display: block;
  margin-top: 7px;
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(244,242,234,0.44);
}
.gui-case__intro {
  margin: 0;
  max-width: 37em;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(235,235,225,0.7);
}
.gui-case__tags {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.gui-case__tags li {
  padding: 0 16px;
  border-left: 1px solid rgba(184,202,131,0.48);
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244,242,234,0.78);
}
.gui-case__tags li:first-child { padding-left: 0; border-left: 0; }
.gui-case__hero {
  margin: clamp(28px,3.8vh,42px) 0 0;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.08);
  background: #070806;
}
.gui-case__hero img,
.gui-case__analysis-visual img,
.gui-case__video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.gui-case__hero::after,
.gui-case__analysis-visual::after,
.gui-case__video-frame::after {
  content: none;
}
.gui-case__hero-label {
  display: none;
}
.gui-case--cover {
  padding-bottom: clamp(100px,12vh,144px);
}
.gui-case--analysis,
.gui-case--motion {
  display: flex;
  align-items: center;
}
.gui-case--analysis {
  padding-top: clamp(120px,14vh,156px);
  padding-bottom: clamp(112px,13vh,148px);
}
.gui-case--motion {
  padding-top: clamp(106px,12vh,132px);
  padding-bottom: clamp(84px,9vh,112px);
}
.gui-case__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(32px,4.6vh,50px);
}
.gui-case__section-head h2 {
  margin: 0;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(38px,4.15vw,64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.02em;
}
.gui-case__section-head h2 span {
  display: block;
  margin-top: 10px;
  font-family: 'Sora',sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #b8ca83;
}
.gui-case__section-index {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(244,242,234,0.38);
}
.gui-case__analysis-grid {
  margin-top: clamp(38px,5.2vh,58px);
  display: grid;
  grid-template-columns: minmax(0,1.62fr) minmax(320px,0.58fr);
  gap: clamp(56px,6vw,92px);
  align-items: center;
}
.gui-case__analysis-visual {
  margin: 0;
  min-height: 0;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.08);
  background: #070806;
}
.gui-case__modules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gui-case__module {
  padding: 26px 0 28px;
  border-top: 1px solid rgba(244,242,234,0.09);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 18px;
  align-content: center;
}
.gui-case__module:last-child { border-bottom: 1px solid rgba(244,242,234,0.09); }
.gui-case__module-num {
  padding-top: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #a8bf67;
}
.gui-case__module h3 {
  margin: 0;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.gui-case__module h3 span {
  display: block;
  margin-top: 6px;
  font-family: 'Sora',sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(244,242,234,0.4);
}
.gui-case__module p {
  margin: 15px 0 0;
  max-width: 31em;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(235,235,225,0.68);
}
.gui-case--motion .gui-case__section-head {
  margin-top: clamp(24px,3.2vh,34px);
  align-items: end;
}
.gui-case__motion-note {
  width: min(36em,100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.gui-case__motion-note strong {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #b8ca83;
}
.gui-case__motion-note span {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(235,235,225,0.68);
}
.gui-case__video-frame {
  width: min(1080px,100%);
  margin: clamp(24px,3.4vh,36px) auto 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #000;
}
.gui-case__video { background: #000; }
.gui-case__flow {
  width: min(1080px,100%);
  margin: 24px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(244,242,234,0.1);
  display: grid;
  grid-template-columns: repeat(7,auto);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.gui-case__flow-step {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(244,242,234,0.78);
}
.gui-case__flow-arrow {
  font-size: 14px;
  color: #a8bf67;
}
.gui-case__reset-evidence {
  width: min(1080px,100%);
  margin: clamp(42px,5.4vh,64px) auto 0;
  padding-top: clamp(26px,3.4vh,38px);
  border-top: 1px solid rgba(244,242,234,0.1);
}
.gui-case__reset-head {
  display: grid;
  grid-template-columns: minmax(230px,0.62fr) minmax(0,1fr);
  gap: clamp(36px,6vw,88px);
  align-items: end;
}
.gui-case__reset-label {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: #b8ca83;
}
.gui-case__reset-head h3 {
  margin: 0;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: clamp(25px,2.5vw,36px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.08em;
}
.gui-case__reset-head p {
  margin: 0;
  max-width: 37em;
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(235,235,225,0.68);
}
.gui-case__reset-visual {
  margin: clamp(24px,3.2vh,34px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #000;
}
.gui-case__reset-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.gui-case__reset-visual figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px 14px;
  border-top: 1px solid rgba(244,242,234,0.08);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: rgba(244,242,234,0.42);
}
.gui-case__reset-visual figcaption span:last-child {
  font-family: 'Noto Sans SC',sans-serif;
  letter-spacing: 0.08em;
}
.gui-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s cubic-bezier(0.22,1,0.36,1),transform 0.72s cubic-bezier(0.22,1,0.36,1);
}
.gui-case.in-view .gui-anim {
  opacity: 1;
  transform: translateY(0);
}
.gui-case.in-view .gui-anim-2 { transition-delay: 0.14s; }
.gui-case.in-view .gui-anim-3 { transition-delay: 0.28s; }

/* ---------- 率土之滨 · Game UI case study ---------- */
.stu-case {
  --stu-paper: #ebe5d8;
  --stu-ink: #171815;
  --stu-muted: rgba(23,24,21,0.62);
  --stu-line: rgba(23,24,21,0.16);
  --stu-cinnabar: #a52b22;
  --stu-bronze: #98713b;
  min-height: 100vh;
  padding: clamp(112px,12vh,138px) clamp(32px,6vw,100px) clamp(112px,13vh,156px);
  position: relative;
  overflow: hidden;
  background: var(--stu-paper);
  color: var(--stu-ink);
  font-family: 'Noto Sans SC','Inter',sans-serif;
}
.stu-case--cover {
  padding-top: clamp(92px,10vh,112px);
}
.stu-case--structure {
  padding-top: clamp(132px,15vh,164px);
}
.stu-case--visual {
  min-height: auto;
  padding-top: clamp(132px,15vh,164px);
  overflow: visible;
}
.stu-case__inner {
  width: min(1480px,100%);
  margin: 0 auto;
  position: relative;
}
.stu-case__topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stu-line);
  font-family: 'Inter',sans-serif;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: rgba(23,24,21,0.48);
}
.stu-case__cover-head {
  margin-top: clamp(24px,3.4vh,40px);
  display: grid;
  grid-template-columns: minmax(300px,0.78fr) minmax(380px,1.22fr);
  gap: clamp(48px,8vw,128px);
  align-items: end;
}
.stu-case__title {
  margin: 0;
  font-size: clamp(52px,5.7vw,84px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.stu-case__subtitle {
  display: block;
  margin-top: 14px;
  font-size: clamp(18px,1.6vw,24px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.12em;
}
.stu-case__en-label {
  display: block;
  margin-top: 9px;
  font-family: 'Inter',sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--stu-cinnabar);
}
.stu-case__intro {
  margin: 0;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(23,24,21,0.7);
}
.stu-case__keywords {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.stu-case__keywords li {
  padding: 0 18px;
  border-left: 1px solid rgba(165,43,34,0.36);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.stu-case__keywords li:first-child { padding-left: 0; border-left: 0; }
.stu-case__keywords small {
  display: block;
  margin-top: 5px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  letter-spacing: 0.13em;
  color: rgba(23,24,21,0.42);
}
.stu-case__hero {
  margin: clamp(20px,2.8vh,30px) 0 0;
  border: 1px solid rgba(23,24,21,0.14);
  background: #0b0d0e;
  overflow: hidden;
}
.stu-case__hero img,
.stu-case__annotated img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2340 / 1080;
  object-fit: contain;
}
.stu-case__section-head {
  margin-top: clamp(44px,5.5vh,64px);
  max-width: 820px;
  scroll-margin-top: 124px;
}
.stu-case__section-index {
  display: block;
  margin-bottom: 14px;
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: var(--stu-cinnabar);
}
.stu-case__section-head h2 {
  margin: 0;
  font-size: clamp(40px,4.8vw,72px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.stu-case__section-head p {
  margin: 20px 0 0;
  max-width: 48em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--stu-muted);
}
.stu-case__annotated {
  margin: clamp(38px,5vh,58px) 0 0;
  position: relative;
  border: 1px solid rgba(23,24,21,0.14);
  background: #0b0d0e;
}
.stu-case__marker {
  width: 28px;
  height: 28px;
  position: absolute;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(235,229,216,0.82);
  border-radius: 50%;
  background: rgba(165,43,34,0.92);
  color: #f1eadb;
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  box-shadow: 0 4px 14px rgba(7,8,7,0.24);
}
.stu-case__marker--1 { left: 26%; top: 55%; }
.stu-case__marker--2 { left: 73%; top: 13%; }
.stu-case__marker--3 { left: 73%; top: 39%; }
.stu-case__marker--4 { left: 71%; top: 63%; }
.stu-case__marker--5 { left: 76%; top: 92%; }
.stu-case__marker--6 { left: 4.4%; top: 57%; }
.stu-case__structure-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--stu-line);
  border-bottom: 1px solid var(--stu-line);
}
.stu-case__structure-item {
  min-width: 0;
  padding: 22px 24px 23px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 12px;
  border-left: 1px solid var(--stu-line);
}
.stu-case__structure-item:nth-child(3n+1) {
  padding-left: 0;
  border-left: 0;
}
.stu-case__structure-item:nth-child(-n+3) {
  border-bottom: 1px solid var(--stu-line);
}
.stu-case__structure-num {
  display: block;
  padding-top: 2px;
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--stu-cinnabar);
}
.stu-case__structure-item h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.stu-case__structure-meta {
  display: block;
  margin-top: 5px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.13em;
  color: rgba(23,24,21,0.42);
}
.stu-case__structure-item p {
  margin: 10px 0 0;
  max-width: 30em;
  font-size: 11.5px;
  line-height: 1.72;
  color: var(--stu-muted);
}
.stu-case__module-head {
  margin-top: clamp(106px,13vh,150px);
  padding: 0 0 20px;
  border-bottom: 1px solid var(--stu-line);
  scroll-margin-top: 124px;
}
.stu-case__module-head .stu-case__section-index {
  margin-bottom: 12px;
}
.stu-case__module-head h3 {
  margin: 0;
  font-size: clamp(34px,3.6vw,54px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stu-case__module-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 42px 30px;
}
.stu-case__module {
  margin: 0;
  min-width: 0;
}
.stu-case__module--attributes { grid-column: span 5; }
.stu-case__module--skills { grid-column: span 7; }
.stu-case__module--identity { grid-column: 2 / span 10; }
.stu-case__module-visual {
  height: clamp(250px,22vw,330px);
  overflow: hidden;
  border: 1px solid rgba(23,24,21,0.14);
  background: #0b0d0e;
}
.stu-case__module--attributes .stu-case__module-visual {
  height: clamp(225px,20vw,300px);
}
.stu-case__module--identity .stu-case__module-visual {
  height: clamp(220px,18vw,270px);
}
.stu-case__module img {
  width: 220%;
  max-width: none;
  height: auto;
  display: block;
  object-fit: contain;
}
.stu-case__module--attributes img { transform: translate(-53%,-12%); }
.stu-case__module--skills img { transform: translate(-53%,-43%); }
.stu-case__module--identity img {
  width: 160%;
  transform: translate(-2%,-22%);
}
.stu-case__module figcaption {
  display: grid;
  grid-template-columns: 34px minmax(120px,0.36fr) minmax(0,1fr);
  gap: 16px;
  align-items: start;
  padding-top: 15px;
  border-top: 1px solid var(--stu-line);
}
.stu-case__module-num {
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  line-height: 1.8;
  color: var(--stu-cinnabar);
}
.stu-case__module-name strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}
.stu-case__module-name span {
  display: block;
  margin-top: 5px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: rgba(23,24,21,0.42);
}
.stu-case__module-copy p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--stu-muted);
}
.stu-case__module-copy small {
  display: block;
  margin-top: 10px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.55;
  letter-spacing: 0.15em;
  color: var(--stu-cinnabar);
}
.stu-case__block-title {
  margin: 0;
  font-size: clamp(30px,3.2vw,46px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.stu-case__visual-head {
  margin-top: clamp(44px,5.5vh,64px);
  display: grid;
  grid-template-columns: minmax(320px,0.72fr) minmax(360px,1.28fr);
  column-gap: clamp(54px,9vw,136px);
  row-gap: 12px;
  align-items: end;
  scroll-margin-top: 124px;
}
.stu-case__visual-head .stu-case__section-index {
  grid-column: 1 / -1;
  margin-bottom: -18px;
}
.stu-case__visual-head h2 {
  margin: 0;
  font-size: clamp(48px,5.4vw,78px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.stu-case__visual-head p {
  margin: 0;
  max-width: 42em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--stu-muted);
}
.stu-case__visual-block {
  margin-top: clamp(108px,13vh,154px);
  padding-top: 38px;
  border-top: 1px solid var(--stu-line);
  scroll-margin-top: 124px;
}
#game-ui-shuaitu-color,
#game-ui-shuaitu-type,
#game-ui-shuaitu-state {
  scroll-margin-top: 124px;
}
#game-ui-shuaitu-visual { scroll-margin-top: 0; }
.stu-case__visual-block-head {
  display: grid;
  grid-template-columns: minmax(280px,0.7fr) minmax(360px,1.3fr);
  gap: clamp(54px,9vw,136px);
  align-items: end;
}
.stu-case__visual-block-head .stu-case__section-index { margin-bottom: 12px; }
.stu-case__visual-block-head h3 {
  margin: 0;
  font-size: clamp(32px,3.3vw,48px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.stu-case__block-meta {
  display: block;
  margin-top: 10px;
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.17em;
  color: rgba(23,24,21,0.42);
}
.stu-case__visual-block-head p {
  margin: 0;
  max-width: 42em;
  font-size: 12.5px;
  line-height: 1.82;
  color: var(--stu-muted);
}
.stu-case__palette {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  border-top: 1px solid var(--stu-line);
  border-bottom: 1px solid var(--stu-line);
}
.stu-case__palette-item {
  min-width: 0;
  padding: 12px 12px 16px;
  border-left: 1px solid var(--stu-line);
}
.stu-case__palette-item:first-child { padding-left: 0; border-left: 0; }
.stu-case__palette-swatch {
  display: block;
  height: clamp(72px,7vw,104px);
  border: 1px solid rgba(23,24,21,0.1);
}
.stu-case__palette-copy { display: block; padding-top: 12px; }
.stu-case__palette-copy strong {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
}
.stu-case__palette-copy span {
  display: block;
  margin-top: 4px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: var(--stu-cinnabar);
}
.stu-case__palette-copy small {
  display: block;
  margin-top: 9px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--stu-muted);
}
.stu-case__type-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--stu-line);
  border-bottom: 1px solid var(--stu-line);
}
.stu-case__type-row {
  display: grid;
  grid-template-columns: minmax(0,1.16fr) minmax(320px,0.84fr);
  border-top: 1px solid var(--stu-line);
}
.stu-case__type-row:first-child { border-top: 0; }
.stu-case__type-sample {
  min-height: 110px;
  padding: 24px clamp(24px,3vw,46px);
  display: flex;
  align-items: center;
  background: #0b0d0e;
  overflow: hidden;
}
.stu-case__type-sample span { display: block; }
.stu-case__type-row--tab .stu-case__type-sample span {
  font-family: 'Inter',sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: #e8dfc9;
}
.stu-case__type-row--module .stu-case__type-sample span {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  color: #d6a84a;
  background: linear-gradient(90deg,#f5c966 0%,#d6a84a 55%,#9e6b29 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stu-case__type-row--skill .stu-case__type-sample span {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #f2e9d6;
}
.stu-case__type-row--value .stu-case__type-sample span {
  font-family: 'Inter',sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: #d2c6aa;
}
.stu-case__type-row--body .stu-case__type-sample span {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  color: #c5bdaa;
}
.stu-case__type-info {
  padding: 24px clamp(20px,2.5vw,38px);
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 12px;
  align-content: center;
}
.stu-case__type-num {
  padding-top: 2px;
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  line-height: 1.5;
  color: var(--stu-cinnabar);
}
.stu-case__type-info strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.stu-case__type-info p,
.stu-case__type-info small {
  font-family: 'Inter',sans-serif;
  text-transform: uppercase;
}
.stu-case__type-info p {
  margin: 7px 0 0;
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: rgba(23,24,21,0.7);
}
.stu-case__type-info small {
  display: block;
  margin-top: 5px;
  font-size: 7.5px;
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: rgba(23,24,21,0.42);
}
.stu-case__state-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 30px;
}
.stu-case__state { margin: 0; min-width: 0; }
.stu-case__state--tabs { grid-column: span 4; }
.stu-case__state--core { grid-column: span 4; }
.stu-case__state--rarity { grid-column: span 4; }
.stu-case__state-visual {
  height: clamp(210px,17vw,260px);
  overflow: hidden;
  border: 1px solid rgba(23,24,21,0.14);
  background: #0b0d0e;
}
.stu-case__state img {
  display: block;
  width: 260%;
  max-width: none;
  height: auto;
}
.stu-case__state--tabs img { transform: translate(-57%,-4%); }
.stu-case__state--core img {
  width: 390%;
  transform: translate(-54%,-54%);
}
.stu-case__state--rarity img { transform: translate(-58%,-58%); }
.stu-case__state figcaption {
  padding-top: 15px;
  border-top: 1px solid var(--stu-line);
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 12px;
}
.stu-case__state-num {
  font-family: 'Inter',sans-serif;
  font-size: 9px;
  line-height: 1.7;
  color: var(--stu-cinnabar);
}
.stu-case__state strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}
.stu-case__state small {
  display: block;
  margin-top: 4px;
  font-family: 'Inter',sans-serif;
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: rgba(23,24,21,0.42);
}
.stu-case__state p {
  margin: 10px 0 0;
  max-width: 30em;
  font-size: 11.5px;
  line-height: 1.72;
  color: var(--stu-muted);
}
.stu-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s cubic-bezier(0.22,1,0.36,1),transform 0.68s cubic-bezier(0.22,1,0.36,1);
}
.stu-case.in-view .stu-anim { opacity: 1; transform: translateY(0); }
.stu-case.in-view .stu-anim-2 { transition-delay: 0.12s; }
.stu-case.in-view .stu-anim-3 { transition-delay: 0.24s; }

/* Rain archive: two exhibition pages, scoped to the existing Game UI chapter. */
.rain-case {
  --rain-ink: #e8e2d4;
  --rain-muted: #a7a296;
  --rain-gold: #b19a72;
  --rain-line: rgba(232,226,212,.16);
  background: #161715;
  color: var(--rain-ink);
  font-family: 'Noto Sans SC','Inter',sans-serif;
  padding: 120px clamp(32px,6vw,100px) 112px;
  scroll-margin-top: 0;
  overflow: hidden;
}
.rain-case__inner { width: min(1480px,100%); margin: 0 auto; }
.rain-case__topline {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rain-line);
  font: 10px/1.6 'Inter',sans-serif; letter-spacing: .15em; color: var(--rain-muted);
}
.rain-case__head {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px,6vw,90px);
  align-items: end; margin: 30px 0 32px;
}
.rain-case__head h2 { margin: 0; font-size: clamp(36px,4vw,62px); font-weight: 300; line-height: 1.25; letter-spacing: .02em; }
.rain-case__label { display: block; margin-top: 12px; color: var(--rain-gold); font: 10px/1.6 'Inter',sans-serif; letter-spacing: .17em; }
.rain-case__subtitle { margin: 9px 0 0; font-size: 15px; color: var(--rain-muted); }
.rain-case__intro { margin: 0; max-width: 43em; font-size: 13px; line-height: 1.95; color: var(--rain-muted); }
.rain-case__metadata { display: block; margin-top: 15px; font: 9px/1.8 'Inter',sans-serif; letter-spacing: .12em; color: var(--rain-gold); }
.rain-case__hero { margin: 0; }
.rain-case__hero img { width: 100%; height: auto; aspect-ratio: 2592 / 1080; object-fit: contain; display: block; }
.rain-case__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; padding-top: 14px; color: var(--rain-muted); font-size: 10px; line-height: 1.6; }
.rain-case__caption span b { color: var(--rain-gold); margin-right: 8px; font-weight: 400; }
.rain-case__module { margin-top: 76px; }
.rain-case__module-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding-top: 22px; border-top: 1px solid var(--rain-line); }
.rain-case__module-head h3 { margin: 0; font-size: 23px; font-weight: 400; letter-spacing: .04em; }
.rain-case__module-head p { margin: 0; max-width: 43em; color: var(--rain-muted); font-size: 12px; line-height: 1.9; }
.rain-case__levels { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1.06fr; gap: 24px; margin-top: 34px; align-items: end; }
.rain-case__detail { margin: 0; min-width: 0; }
.rain-case__crop { position: relative; overflow: hidden; }
.rain-case__crop img { position: absolute; max-width: none; height: auto; display: block; }
.rain-case__detail figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rain-line); }
.rain-case__detail strong { display: block; font-size: 15px; font-weight: 400; line-height: 1.6; }
.rain-case__detail small { display: block; margin-top: 7px; font: 9px/1.7 'Inter',sans-serif; letter-spacing: .12em; color: var(--rain-gold); }
.rain-case__detail p { font-size: 12px; line-height: 1.85; color: var(--rain-muted); margin: 9px 0 0; }
.rain-case__types { margin-top: 25px; display: flex; gap: 40px; color: var(--rain-muted); font-size: 11px; }
.rain-case__types b { color: var(--rain-gold); font: 9px/1.8 'Inter',sans-serif; letter-spacing: .12em; margin-right: 12px; }
.rain-case--collection { padding-top: 120px; border-top: 1px solid var(--rain-line); }
.rain-case--collection .rain-case__head h2 { font-size: clamp(30px,3.2vw,48px); }
.rain-case__details { display: grid; grid-template-columns: 2.5fr 4.5fr 5fr; gap: 34px; align-items: start; margin-top: 34px; }
.rain-case__details .rain-case__detail:first-child { padding-top: 32px; }
.rain-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--rain-delay,0ms); }
.rain-reveal.in-view { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .rain-case { padding: 112px 28px 80px; }
  .rain-case__head { grid-template-columns: 1fr; gap: 22px; }
  .rain-case__module-head { align-items: start; flex-direction: column; gap: 18px; }
  .rain-case__levels { grid-template-columns: 1fr 1fr; align-items: end; gap: 30px 24px; }
  .rain-case__details { grid-template-columns: 1fr 1fr; gap: 30px; }
  .rain-case__details .rain-case__detail:first-child { grid-column: 1 / -1; max-width: 260px; padding-top: 0; }
  .rain-case__types { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 560px) {
  .rain-case { padding: 104px 20px 64px; }
  .rain-case__topline { font-size: 8px; letter-spacing: .07em; gap: 12px; }
  .rain-case__head { margin-top: 24px; }
  .rain-case__intro { font-size: 14px; line-height: 1.85; }
  .rain-case__metadata { font-size: 8px; letter-spacing: .07em; }
  .rain-case__caption { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 9px; }
  .rain-case__module { margin-top: 48px; }
  .rain-case__module-head h3 { font-size: 22px; }
  .rain-case__module-head p, .rain-case__detail p { font-size: 13px; }
  .rain-case__details { grid-template-columns: 1fr; }
  .rain-case__details .rain-case__detail { width: min(100%,380px); margin: 0 auto; }
  .rain-case__details .rain-case__detail:first-child { max-width: 220px; margin-left: 0; }
  .rain-case__levels { gap: 28px 16px; }
  .rain-case__detail strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rain-reveal { opacity: 1; transform: none; transition: none; }
}

/* One-page portrait GUI exhibition, following the Game UI chapter. */
.warehouse-case {
  background: #eee9de; color: #182022;
  font-family: 'Noto Sans SC','Inter',sans-serif;
  padding: 112px clamp(28px,6vw,100px) 40px;
  min-height: 100svh; scroll-margin-top: 0;
}
.warehouse-case__inner { width: min(1120px,100%); margin: auto; }
.warehouse-case__topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(24,32,34,.18); color: #626863; font: 10px/1.6 'Inter',sans-serif; letter-spacing: .13em; }
.warehouse-case__layout { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(48px,7vw,100px); align-items: center; margin-top: 24px; }
.warehouse-case__copy h2 { margin: 0; font-size: clamp(28px,2.6vw,38px); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.warehouse-case__copy .warehouse-case__subtitle { margin: 12px 0 0; color: #182022; font-size: 15px; line-height: 1.65; }
.warehouse-case__copy .warehouse-case__intro { margin: 16px 0 0; max-width: 38em; color: #59615e; font-size: 13px; line-height: 1.9; }
.warehouse-case__copy .warehouse-case__metadata { margin: 12px 0 0; color: #626863; font: 9px/1.8 'Inter',sans-serif; letter-spacing: .09em; }
.warehouse-case__hero { margin: 0; justify-self: center; }
.warehouse-case__hero img { display: block; width: auto; height: clamp(520px,calc(100svh - 210px),760px); max-width: 100%; aspect-ratio: 720 / 1560; object-fit: contain; }
.warehouse-case__details { min-width: 0; }
.warehouse-case__details h3 { margin: 0; font-size: 18px; font-weight: 400; }
.warehouse-case__details p { margin: 10px 0 16px; color: #59615e; font-size: 12px; line-height: 1.8; }
.warehouse-case__reward-row { display: grid; grid-template-columns: minmax(0,280px) minmax(0,1fr); gap: 28px; align-items: center; margin-top: 24px; }
.warehouse-case__reward { position: relative; overflow: hidden; aspect-ratio: 680 / 635; margin: 0; }
.warehouse-case__reward img { display: block; position: absolute; height: auto; max-width: none; width: 105.882353%; left: -2.941176%; top: -140.472441%; }
.warehouse-case__icons { margin-top: 25px; padding-top: 18px; border-top: 1px solid rgba(24,32,34,.18); }
.warehouse-case__icon-row { display: flex; gap: clamp(12px,1.7vw,24px); align-items: end; margin-top: 16px; }
.warehouse-case__icon-row figure { margin: 0; flex: 1; min-width: 0; }
.warehouse-case__icon-row img { display: block; width: min(100%,76px); height: auto; aspect-ratio: 1; object-fit: contain; }
.warehouse-case__icon-row figure:last-child img { width: min(100%,96px); }
.warehouse-case__icon-row figcaption { margin-top: 8px; font-size: 10px; color: #59615e; }
@media(max-width:1050px) {
  .warehouse-case__layout { column-gap: 40px; }
  .warehouse-case__copy h2 { font-size: 28px; }
  .warehouse-case__hero img { height: clamp(520px,calc(100svh - 210px),650px); }
}
@media(max-width:760px) {
  .warehouse-case { padding: 108px 20px 56px; }
  .warehouse-case__topline { font-size: 8px; letter-spacing: .08em; }
  .warehouse-case__layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .warehouse-case__copy h2 { font-size: 28px; }
  .warehouse-case__copy .warehouse-case__intro { font-size: 14px; }
  .warehouse-case__hero { justify-self: center; width: min(100%,340px); }
  .warehouse-case__hero img { width: 100%; height: auto; }
  .warehouse-case__details { width: min(100%,420px); margin: auto; }
  .warehouse-case__details p { font-size: 13px; }
  .warehouse-case__reward-row { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .warehouse-case__icon-row img { width: 76px; max-width: 100%; }
  .warehouse-case__icon-row figure:last-child img { width: 96px; }
}

/* Two compact landscape GUI exhibitions, with the original artwork leading. */
.horizontal-gui-case {
  --hgui-ink: #203b36;
  --hgui-muted: #596862;
  --hgui-line: rgba(32,59,54,.22);
  background: #eee9de;
  color: var(--hgui-ink);
  font-family: 'Noto Sans SC','Inter',sans-serif;
  padding: 112px clamp(28px,6vw,100px) clamp(96px,10vw,150px);
  min-height: 136svh;
  scroll-margin-top: 0;
}
.horizontal-gui-case--gala {
  --hgui-ink: #ece5e7;
  --hgui-muted: #b8aeb8;
  --hgui-line: rgba(236,229,231,.21);
  background: #211b24;
}
.horizontal-gui-case__inner { width: min(1380px,100%); margin: 0 auto; }
.horizontal-gui-case__topline {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 13px; border-bottom: 1px solid var(--hgui-line);
  color: var(--hgui-muted); font: 10px/1.6 'Inter',sans-serif; letter-spacing: .13em;
}
.horizontal-gui-case__head { margin: 32px 0 30px; }
.horizontal-gui-case__head h2 { margin: 0; font-size: clamp(36px,3.5vw,52px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.horizontal-gui-case__subtitle { margin: 7px 0 0; font-size: 17px; line-height: 1.6; }
.horizontal-gui-case__intro { margin: 17px 0 0; max-width: 65ch; color: var(--hgui-muted); font-size: 13px; line-height: 1.85; }
.horizontal-gui-case__visual { margin: 0; }
.horizontal-gui-case__visual img { display: block; width: 100%; height: auto; aspect-ratio: 1334 / 750; object-fit: contain; }
.horizontal-gui-case__notes {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(32px,8vw,120px);
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--hgui-line);
}
.horizontal-gui-case__note h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.55; }
.horizontal-gui-case__note p { margin: 8px 0 0; max-width: 48ch; color: var(--hgui-muted); font-size: 12px; line-height: 1.85; }
@media(max-width:760px) {
  .horizontal-gui-case { min-height: 0; padding: 104px 20px 72px; }
  .horizontal-gui-case__topline { font-size: 8px; letter-spacing: .07em; }
  .horizontal-gui-case__head { margin: 26px 0 24px; }
  .horizontal-gui-case__head h2 { font-size: 34px; }
  .horizontal-gui-case__subtitle { font-size: 15px; }
  .horizontal-gui-case__intro { font-size: 13px; }
  .horizontal-gui-case__notes { grid-template-columns: minmax(0,1fr); gap: 25px; margin-top: 24px; }
  .horizontal-gui-case__note p { font-size: 13px; }
}


@media(min-width:901px) and (max-height:800px) {
  .stu-case--cover { padding-top: 64px; }
  .stu-case--cover .stu-case__cover-head { margin-top: 14px; }
  .stu-case--cover .stu-case__title { font-size: clamp(48px,5vw,68px); }
  .stu-case--cover .stu-case__subtitle { margin-top: 10px; }
  .stu-case--cover .stu-case__en-label { margin-top: 6px; }
  .stu-case--cover .stu-case__keywords { margin-top: 12px; }
  .stu-case--cover .stu-case__hero {
    width: min(1080px,100%);
    margin: 14px auto 0;
  }
}

@media(max-width:900px) {
  .cc-nav {
    display: none;
  }
  .cs-overview {
    overflow: visible;
  }
  .cs-top-title {
    top: 88px;
    left: 28px;
  }
  .cs-main {
    padding: 154px 28px 0;
    gap: 28px;
  }
  .cs-project-title {
    font-size: clamp(31px,9vw,42px);
    line-height: 1.04;
  }
  .cs-project-cn {
    margin-top: 20px;
    font-size: 20px;
  }
  .cs-intro {
    margin-top: 32px;
  }
  .cs-intro-label,
  .cs-preview-label,
  .cs-demo-en-label,
  .cs-info-label {
    font-size: 11px;
  }
  .cs-intro-text {
    font-size: 15px;
    line-height: 1.85;
  }
  .cs-info-value {
    font-size: 14px;
  }
  .dd-section {
    padding: 92px 7% 56px;
  }
  .dd-meta-row {
    margin-bottom: 24px;
  }
  .dd-divider {
    margin: 22px 0 28px;
  }
  .dd-manifesto {
    font-size: clamp(24px,7vw,34px);
  }
  .dd-keywords {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .dd-keyword {
    padding-top: 18px;
  }
  .dd-principle {
    grid-template-columns: 88px 1fr;
  }
  .ds-main {
    grid-template-columns: 1fr;
  }
  .mp-result-section {
    min-height: auto;
    padding: 104px 22px 72px;
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .mp-result-title {
    font-size: clamp(40px,13vw,58px);
  }
  .mp-result-screens {
    gap: 10px;
  }
  .mp-result-screen,
  .mp-result-screen-2 {
    transform: none;
  }
  .mp-result-screen img {
    border-radius: 10px;
  }
  .mp-result-screen figcaption {
    font-size: 9px;
  }
  .gui-case {
    min-height: auto;
    padding: 108px 20px 76px;
    overflow: visible;
  }
  .gui-case--analysis,
  .gui-case--motion {
    display: block;
  }
  .gui-case__eyebrow {
    font-size: 8px;
  }
  .gui-case__head,
  .gui-case__analysis-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gui-case__title {
    font-size: clamp(43px,14.5vw,68px);
  }
  .gui-case__intro {
    font-size: 14px;
  }
  .gui-case__hero,
  .gui-case__analysis-visual,
  .gui-case__video-frame {
    width: 100%;
  }
  .gui-case__hero-label {
    left: 10px;
    bottom: 10px;
  }
  .gui-case__section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .gui-case--motion .gui-case__section-head {
    align-items: flex-start;
  }
  .gui-case__analysis-grid {
    margin-top: 32px;
  }
  .gui-case__modules {
    grid-template-rows: none;
  }
  .gui-case__module {
    padding: 24px 0 26px;
  }
  .gui-case__module p {
    font-size: 14px;
    line-height: 1.8;
  }
  .gui-case__motion-note {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .gui-case__motion-note span {
    font-size: 14px;
  }
  .gui-case__flow {
    margin-top: 22px;
    padding-top: 18px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 20px;
    overflow: visible;
    justify-content: stretch;
  }
  .gui-case__flow-step {
    min-height: 42px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(244,242,234,0.09);
    font-size: 13px;
  }
  .gui-case__flow-arrow {
    display: none;
  }
  .gui-case__reset-evidence {
    margin-top: 42px;
    padding-top: 28px;
  }
  .gui-case__reset-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gui-case__reset-head p {
    font-size: 14px;
    line-height: 1.8;
  }
  .gui-case__reset-visual figcaption {
    flex-direction: column;
    gap: 3px;
  }
  .stu-case {
    min-height: auto;
    padding: 108px 20px 78px;
    overflow: visible;
  }
  .stu-case--structure,
  .stu-case--visual { padding-top: 120px; }
  .stu-case__topline { font-size: 8px; }
  .stu-case__section-head,
  .stu-case__module-head,
  .stu-case__visual-head,
  .stu-case__visual-block,
  #game-ui-shuaitu-color,
  #game-ui-shuaitu-type,
  #game-ui-shuaitu-state { scroll-margin-top: 132px; }
  .stu-case__cover-head,
  .stu-case__visual-head,
  .stu-case__visual-block-head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #game-ui-shuaitu-visual { scroll-margin-top: 0; }
  .stu-case__visual-head .stu-case__section-index { margin-bottom: -12px; }
  .stu-case__title { font-size: clamp(46px,14vw,68px); }
  .stu-case__structure-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stu-case__structure-item { padding: 18px; }
  .stu-case__structure-item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .stu-case__module-grid { grid-template-columns: 1fr; gap: 34px; }
  .stu-case__module--attributes,
  .stu-case__module--skills,
  .stu-case__module--identity { grid-column: auto; }
  .stu-case__module-visual { height: clamp(250px,48vw,350px); }
  .stu-case__module--attributes .stu-case__module-visual { height: clamp(230px,43vw,310px); }
  .stu-case__module--identity .stu-case__module-visual { height: clamp(220px,38vw,280px); }
  .stu-case__palette { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .stu-case__palette-item:nth-child(5) { padding-left: 0; border-left: 0; }
  .stu-case__type-row { grid-template-columns: 1fr; }
  .stu-case__type-sample { min-height: 98px; }
  .stu-case__state--tabs,
  .stu-case__state--core { grid-column: span 6; }
  .stu-case__state--rarity { grid-column: 3 / span 8; }
}

@media(max-width:520px) {
  .gui-case__reset-visual {
    position: relative;
  }
  .gui-case__reset-visual img {
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    transform: none;
  }
  .gui-case__reset-visual-picture {
    position: relative;
    display: block;
    aspect-ratio: 1.15 / 1;
    overflow: hidden;
  }
  .gui-case__reset-visual-picture img {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
  }
  .stu-case__cover-head { gap: 28px; }
  .stu-case__intro { font-size: 14px; }
  .stu-case__keywords { display: grid; grid-template-columns: repeat(3,1fr); }
  .stu-case__keywords li { padding: 0 10px; }
  .stu-case__structure-list { grid-template-columns: 1fr; }
  .stu-case__structure-item,
  .stu-case__structure-item:nth-child(3n+1) { padding: 15px 0 16px; border-left: 0; border-bottom: 1px solid var(--stu-line); }
  .stu-case__structure-item:last-child { border-bottom: 0; }
  .stu-case__marker { width: 22px; height: 22px; font-size: 8px; }
  .stu-case__module figcaption { grid-template-columns: 24px 1fr; }
  .stu-case__module-copy { grid-column: 2; }
  .stu-case__module-name span { margin-top: 3px; }
  .stu-case__module-copy p { margin-top: 3px; font-size: 13px; }
  .stu-case__structure-item p,
  .stu-case__visual-block-head p,
  .stu-case__state p { font-size: 13px; }
  .stu-case__visual-head h2 { font-size: clamp(42px,13vw,58px); }
  .stu-case__visual-block { margin-top: 88px; padding-top: 28px; }
  .stu-case__visual-block-head { gap: 20px; }
  .stu-case__palette { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stu-case__palette-item,
  .stu-case__palette-item:nth-child(5) { padding: 10px 10px 14px; border-left: 1px solid var(--stu-line); }
  .stu-case__palette-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stu-case__palette-item:last-child { grid-column: 1 / -1; }
  .stu-case__palette-swatch { height: 70px; }
  .stu-case__type-sample { min-height: 86px; padding: 20px; }
  .stu-case__type-info { padding: 18px 0; grid-template-columns: 26px minmax(0,1fr); }
  .stu-case__state-grid { grid-template-columns: 1fr; gap: 32px; }
  .stu-case__state--tabs,
  .stu-case__state--core,
  .stu-case__state--rarity { grid-column: auto; }
  .stu-case__state-visual { height: clamp(210px,61vw,290px); }
}

@media(prefers-reduced-motion:reduce) {
  .cc-anim,
  .cs-anim,
  .dbg-anim,
  .dcp-anim,
  .dss-anim,
  .dpi-anim,
  .iev-anim,
  .pe-anim,
  .dd-anim,
  .dd-p-anim,
  .dc-anim,
  .ia-anim,
  .ds-anim,
  .gui-anim {
    opacity: 1!important;
    transform: none!important;
    filter: none!important;
  }
  .stu-anim {
    opacity: 1!important;
    transform: none!important;
    transition: none!important;
  }
  .mp-filmstrip {
    animation: none!important;
    transform: none!important;
  }
  .mp-thumb,
  .mobile-menu-btn,
  .mp-result-screen {
    transition: none!important;
    transform: none!important;
  }
}

/* Hallmark · genre: editorial · macrostructure: Photographic · tone: Editorial Motion · anchor hue: tea-green · scope: Packaging only */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* ---------- Visual Design · Packaging editorial case ---------- */
.pkg-case {
  --pkg-paper: #ebe5d8;
  --pkg-ink: #171815;
  --pkg-muted: rgba(23,24,21,0.62);
  --pkg-line: rgba(23,24,21,0.16);
  --pkg-meta: rgba(23,24,21,0.48);
  --pkg-copy: rgba(23,24,21,0.72);
  --pkg-line-soft: rgba(23,24,21,0.14);
  --pkg-green: #315d3c;
  --pkg-green-line: rgba(49,93,60,0.36);
  --pkg-pink: #9d465f;
  --pkg-green-field: #d5e7c8;
  --pkg-pink-field: #f0cbd1;
  --pkg-system-green: #e3eadc;
  --pkg-system-pink: #efe0e3;
  --pkg-wash-26: rgba(255,255,255,0.26);
  --pkg-wash-28: rgba(255,255,255,0.28);
  --pkg-wash-30: rgba(255,255,255,0.30);
  --pkg-wash-34: rgba(255,255,255,0.34);
  --pkg-wash-35: rgba(255,255,255,0.35);
  --pkg-wash-38: rgba(255,255,255,0.38);
  --pkg-final: #23241f;
  --pkg-final-accent: #b9c89e;
  --pkg-final-line: rgba(235,229,216,0.18);
  --pkg-final-copy: rgba(235,229,216,0.66);
  --pkg-final-meta: rgba(235,229,216,0.48);
  --pkg-font-display: 'Noto Sans SC','Sora',sans-serif;
  --pkg-font-body: 'Noto Sans SC','Sora',sans-serif;
  --pkg-font-meta: 'JetBrains Mono','Sora',monospace;
  --pkg-ease-out: cubic-bezier(0.16,1,0.3,1);
  --pkg-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  min-height: 100vh;
  padding: clamp(112px,12vh,140px) clamp(32px,6vw,100px) clamp(104px,12vh,148px);
  position: relative;
  overflow: hidden;
  background: var(--pkg-paper);
  color: var(--pkg-ink);
  font-family: var(--pkg-font-body);
}
.pkg-case--system,
.pkg-case--application,
.pkg-case--final,
.pkg-case--visual {
  min-height: auto;
  overflow: visible;
}
.pkg-case--system {
  background: var(--pkg-system-green);
  transition: background-color 0.9s var(--pkg-ease-in-out);
}
.pkg-case--system.pkg-flavor-pink { background: var(--pkg-system-pink); }
.pkg-case--visual { padding-top: 112px; padding-bottom: 100px; }
.pkg-case--system { padding-top: 112px; padding-bottom: 100px; }
.pkg-case--application {
  padding-top: 112px;
  padding-bottom: 0;
  overflow-x: clip;
}
.pkg-case--final {
  padding-top: 112px;
  padding-bottom: 0;
  overflow-x: clip;
}
.pkg-case__inner {
  width: min(1480px,100%);
  margin: 0 auto;
  position: relative;
}
.pkg-case__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pkg-line);
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: var(--pkg-meta);
}
.pkg-case__hero-head {
  margin-top: clamp(28px,4vh,46px);
  display: grid;
  grid-template-columns: minmax(340px,0.9fr) minmax(360px,1.1fr);
  gap: clamp(44px,8vw,128px);
  align-items: end;
}
.pkg-case__title,
.pkg-case__section-title {
  margin: 0;
  font-family: var(--pkg-font-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.pkg-case__title {
  max-width: 9em;
  font-size: clamp(48px,5.25vw,78px);
  line-height: 1.04;
}
.pkg-case__title-en,
.pkg-case__section-en {
  display: block;
  font-family: var(--pkg-font-meta);
  color: var(--pkg-green);
}
.pkg-case__title-en {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.pkg-case__title-sub {
  display: block;
  margin-top: 16px;
  font-size: clamp(15px,1.45vw,20px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.pkg-case__intro {
  margin: 0;
  max-width: 39em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pkg-copy);
}
.pkg-case__keywords {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.pkg-case__keywords li {
  padding: 0 18px;
  border-left: 1px solid var(--pkg-green-line);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.pkg-case__keywords li:first-child { padding-left: 0; border-left: 0; }
.pkg-case__hero-grid {
  margin-top: clamp(28px,4vh,44px);
  display: block;
  width: min(68%,620px);
  margin-left: auto;
}
.pkg-case__figure {
  margin: 0;
  min-width: 0;
}
.pkg-case figure { margin: 0; }
.pkg-case figure.pkg-case__hero-grid { margin-left: auto; margin-right: 0; }
.pkg-case__hero-media {
  height: clamp(390px,53vh,610px);
  overflow: hidden;
  background: var(--pkg-wash-35);
}
.pkg-case__hero-media img,
.pkg-case__image img,
.pkg-case__pattern img,
.pkg-case__dieline img,
.pkg-case__viz img,
.pkg-case__final-duo img {
  display: block;
  width: 100%;
  height: 100%;
}
.pkg-case__hero-media img { object-fit: cover; }
.pkg-case__hero-media--green img { object-position: center; }
.pkg-case__hero-media--pink img { object-position: center; }
.pkg-case__matchcut {
  position: relative;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pkg-green-field);
  transition: background-color 0.9s var(--pkg-ease-in-out);
}
.pkg-case__matchcut.is-pink { background: var(--pkg-pink-field); }
.pkg-case__matchcut-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.72s var(--pkg-ease-in-out), transform 0.72s var(--pkg-ease-in-out);
  pointer-events: none;
}
.pkg-case__matchcut-frame.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.pkg-case__matchcut-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pkg-case__matchcut-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
}
.pkg-case.pkg-motion-ready .pkg-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.96s var(--pkg-ease-out);
  transition-delay: var(--pkg-delay,0ms);
  will-change: clip-path;
}
.pkg-case.pkg-motion-ready .pkg-reveal.pkg-reveal--vertical {
  clip-path: inset(0 0 100% 0);
}
.pkg-case.pkg-motion-ready .pkg-reveal.pkg-reveal--center {
  clip-path: inset(0 50% 0 50%);
}
.pkg-case.pkg-motion-ready .pkg-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
  will-change: auto;
}
.pkg-case.pkg-motion-ready .pkg-reveal .pkg-reveal-image {
  transform: scale(1.045);
  transition: transform 1.06s var(--pkg-ease-out);
}
.pkg-case.pkg-motion-ready .pkg-reveal.is-revealed .pkg-reveal-image {
  transform: scale(1);
}
.pkg-case.pkg-motion-ready .pkg-scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.72s var(--pkg-ease-out), transform 0.72s var(--pkg-ease-out);
  transition-delay: var(--pkg-delay,0ms);
}
.pkg-case.pkg-motion-ready .pkg-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.pkg-breathe-frame.is-live .pkg-breathe {
  animation: pkgVisualBreathe 10s var(--pkg-ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes pkgVisualBreathe {
  from { transform: scale(1.002) translateX(0); }
  to { transform: scale(1.028) translateX(-0.5%); }
}
.pkg-case__caption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 11px;
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--pkg-meta);
}
.pkg-case__section-head {
  max-width: 720px;
  scroll-margin-top: 120px;
}
.pkg-case__section-title {
  font-size: clamp(42px,5vw,72px);
  line-height: 1.06;
}
.pkg-case__section-en {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.pkg-case__section-note {
  margin: 20px 0 0;
  max-width: 45em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--pkg-muted);
}
.pkg-case__system-grid {
  margin-top: clamp(34px,4vw,52px);
  display: grid;
  grid-template-columns: minmax(340px,0.78fr) minmax(0,1.22fr);
  gap: clamp(24px,3.6vw,58px);
  align-items: start;
}
.pkg-case__c-stage {
  position: sticky;
  top: 112px;
  min-height: 480px;
  overflow: hidden;
  background: var(--pkg-green-field);
  transition: background-color 0.9s var(--pkg-ease-in-out);
}
.pkg-case__c-stage.is-pink {
  background: var(--pkg-pink-field);
}
.pkg-case__c-item {
  position: absolute;
  inset: 0;
  padding: clamp(34px,4vw,64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: scale(0.98) rotate(-1deg);
  transition: opacity 0.92s var(--pkg-ease-in-out), transform 0.92s var(--pkg-ease-in-out);
  pointer-events: none;
}
.pkg-case__c-item.is-active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}
.pkg-case__c-item img {
  width: 100%;
  height: min(310px,38vw);
  object-fit: contain;
}
.pkg-case__asset-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--pkg-line-soft);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.pkg-case__asset-label span:last-child {
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--pkg-meta);
}
.pkg-case__system-side {
  display: grid;
  gap: clamp(18px,2vw,28px);
  align-content: start;
}
.pkg-case__wordmark {
  padding: clamp(22px,2.4vw,32px);
  background: var(--pkg-wash-34);
}
.pkg-case__wordmark img {
  display: block;
  width: min(100%,490px);
  height: auto;
  margin: 0 auto;
}
.pkg-case__illustrations {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
}
.pkg-case__image {
  min-height: 0;
  overflow: hidden;
  background: var(--pkg-wash-28);
}
.pkg-case__image img { object-fit: contain; }
.pkg-case__illustrations .pkg-case__image { aspect-ratio: 4 / 3; }
.pkg-case__image--plum img {
  transform: scale(1.08);
  transform-origin: 62% 60%;
}
.pkg-case__patterns {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(180px,0.5fr);
  gap: clamp(16px,2vw,28px);
  align-items: end;
  background: transparent;
}
.pkg-case__pattern {
  height: 200px;
  min-height: 0;
  padding: clamp(18px,2vw,28px);
  background: var(--pkg-paper);
  overflow: hidden;
  border-top: 1px solid var(--pkg-line);
}
.pkg-case__pattern--secondary { height: 160px; }
.pkg-case__pattern img {
  object-fit: contain;
}
.pkg-case__logic {
  margin-top: clamp(34px,4.5vw,58px);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(28px,4vw,64px);
}
.pkg-case__logic-item {
  padding-top: 18px;
  border-top: 1px solid var(--pkg-line);
}
.pkg-case__logic-item strong {
  display: block;
  margin-bottom: 9px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.pkg-case__logic-item span {
  display: block;
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--pkg-green);
}
.pkg-case__logic-item p {
  margin: 14px 0 0;
  max-width: 28em;
  font-size: 14px;
  line-height: 1.78;
  color: var(--pkg-muted);
}
.pkg-case__sequence {
  margin-top: clamp(34px,4vw,56px);
  padding: 17px 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  border-top: 1px solid var(--pkg-line);
  border-bottom: 1px solid var(--pkg-line);
  font-size: 11px;
  letter-spacing: 0.09em;
}
.pkg-case__sequence span {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pkg-case__sequence small {
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--pkg-green);
}
.pkg-case__section-block {
  margin-top: 42px;
}
.pkg-case__subhead {
  max-width: 620px;
  margin-bottom: 24px;
}
.pkg-case__subhead h3 {
  margin: 0;
  font-family: var(--pkg-font-display);
  font-size: clamp(24px,2.3vw,34px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.pkg-case__subhead span {
  display: block;
  margin-top: 8px;
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--pkg-green);
}
.pkg-case__subhead p {
  margin: 16px 0 0;
  max-width: 39em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pkg-muted);
}
.pkg-case__package-family {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,0.55fr);
  gap: clamp(18px,2.5vw,38px);
  align-items: end;
}
.pkg-case__package-visual,
.pkg-case__dieline-canvas,
.pkg-case__final-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pkg-wash-34);
}
.pkg-case__package-visual--primary { height: clamp(360px,38vw,420px); }
.pkg-case__package-visual--secondary { height: clamp(270px,29vw,330px); }
.pkg-case__package-visual img,
.pkg-case__dieline-canvas img,
.pkg-case__final-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pkg-case__dieline-layout {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(280px,0.6fr);
  gap: clamp(18px,2.5vw,38px);
  align-items: start;
}
.pkg-case__dieline-side {
  display: grid;
  gap: clamp(18px,2vw,28px);
}
.pkg-case__dieline-canvas { padding: clamp(18px,2.2vw,32px); }
.pkg-case__dieline-canvas--primary { height: clamp(450px,44vw,500px); }
.pkg-case__dieline-canvas--secondary { height: clamp(300px,33vw,370px); }
.pkg-case__dieline-canvas--detail { height: clamp(170px,18vw,190px); }
.pkg-case__dieline-matchcut {
  margin-top: clamp(28px,3.6vw,52px);
  display: grid;
  grid-template-columns: minmax(132px,2fr) minmax(0,10fr);
  gap: clamp(24px,4vw,64px);
  align-items: start;
}
.pkg-case__dieline-sequence {
  position: sticky;
  top: 126px;
  display: grid;
  gap: 7px;
  padding-top: 2px;
  font-family: var(--pkg-font-meta);
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: var(--pkg-muted);
}
.pkg-case__dieline-sequence-group {
  display: grid;
  gap: 7px;
}
.pkg-case__dieline-sequence-group span {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: baseline;
  gap: 8px;
}
.pkg-case__dieline-sequence b {
  font-weight: 500;
  color: var(--pkg-green);
}
.pkg-case__dieline-sequence .is-pink b { color: var(--pkg-pink); }
.pkg-case__dieline-sequence-group span:not(:last-child)::after {
  content: '↓';
  grid-column: 1;
  margin: 5px 0 -2px 15px;
  color: var(--pkg-faint);
}
.pkg-case__dieline-sequence em {
  display: block;
  margin: 5px 0;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--pkg-ink);
}
.pkg-case__dieline-pairs {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: clamp(22px,2.7vw,40px);
  align-items: end;
}
.pkg-case__dieline-pair {
  margin: 0;
  min-width: 0;
}
.pkg-case__dieline-pair--01 { grid-column: 1 / span 7; }
.pkg-case__dieline-pair--02 { grid-column: 8 / span 5; }
.pkg-case__dieline-pair--03 { grid-column: 1 / span 4; align-self: start; }
.pkg-case__dieline-pair--04 { grid-column: 5 / span 8; }
.pkg-case__dieline-pair-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pair-ratio);
  overflow: hidden;
  background: var(--pkg-wash-34);
  border-top: 1px solid var(--pkg-line);
}
.pkg-case__dieline-pair-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: opacity 0.78s var(--pkg-ease-in-out);
  pointer-events: none;
}
.pkg-case__dieline-pair-layer.is-active {
  opacity: 1;
}
.pkg-case__dieline-pair-layer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pkg-case__dieline-pair-caption {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--pkg-line);
  font-family: var(--pkg-font-meta);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--pkg-muted);
}
.pkg-case__dieline-pair-caption b {
  font-weight: 500;
  color: var(--pkg-ink);
}
.pkg-case__dieline-pair-caption span:last-child {
  color: var(--pkg-green);
  transition: color 0.5s ease;
}
.pkg-case__dieline-pair.is-pink .pkg-case__dieline-pair-caption span:last-child { color: var(--pkg-pink); }
.pkg-case__final-gallery {
  margin-top: 42px;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(260px,0.55fr);
  gap: clamp(18px,2.5vw,38px);
  align-items: end;
}
.pkg-case__final-visual--primary { height: clamp(380px,40vw,440px); }
.pkg-case__final-visual--secondary { height: clamp(280px,31vw,340px); }
.pkg-case--final .pkg-case__final-stage { margin-top: 60px; }
.pkg-case--final .pkg-case__final-inner { padding-top: 50px; padding-bottom: 50px; }
.pkg-case--final .pkg-case__final-head { margin-bottom: 32px; padding-bottom: 14px; }
.pkg-case--final .pkg-case__final-head h3 { font-size: clamp(38px,4vw,56px); }
.pkg-case--final .pkg-case__final-duo { height: 420px; min-height: 0; }
.pkg-case__application-lead {
  margin-top: clamp(42px,5vw,72px);
  display: block;
}
.pkg-case__application-copy {
  position: static;
  max-width: 580px;
  padding-top: 0;
}
.pkg-case__application-copy h3,
.pkg-case__viz-head h3 {
  margin: 0;
  font-family: var(--pkg-font-display);
  font-size: clamp(24px,2.3vw,34px);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.pkg-case__application-copy span,
.pkg-case__viz-head span {
  display: block;
  margin-top: 8px;
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--pkg-green);
}
.pkg-case__application-copy p {
  margin: 20px 0 0;
  max-width: 27em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pkg-muted);
}
.pkg-case__core-spread {
  margin-top: clamp(34px,4.5vw,62px);
  display: grid;
  grid-template-columns: minmax(210px,0.56fr) minmax(0,1fr) minmax(0,1fr);
  gap: clamp(18px,2.4vw,36px);
  align-items: stretch;
}
.pkg-case__core-front,
.pkg-case__dieline {
  background: var(--pkg-wash-38);
  overflow: hidden;
}
.pkg-case__core-front {
  min-height: clamp(500px,43vw,620px);
  padding: clamp(28px,3.2vw,50px);
}
.pkg-case__core-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pkg-case__dielines {
  display: contents;
}
.pkg-case__dieline {
  min-height: clamp(500px,43vw,620px);
  padding: clamp(18px,2.4vw,34px);
}
.pkg-case__dieline img { object-fit: contain; }
.pkg-case__detail-strip {
  margin-top: clamp(34px,4.5vw,62px);
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,0.88fr);
  gap: clamp(18px,2.4vw,36px);
}
.pkg-case__detail-strip .pkg-case__dieline {
  min-height: clamp(320px,39vw,560px);
}
.pkg-case__viz-block {
  margin-top: clamp(76px,9vw,126px);
  padding-top: clamp(34px,4vw,52px);
  border-top: 1px solid var(--pkg-line);
}
.pkg-case__viz-head {
  max-width: 680px;
}
.pkg-case__viz-head p {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pkg-muted);
}
.pkg-case__viz-grid {
  margin-top: clamp(34px,4.5vw,58px);
  display: grid;
  grid-template-columns: minmax(0,1.36fr) minmax(280px,0.64fr);
  gap: clamp(18px,2.4vw,34px);
  align-items: stretch;
}
.pkg-case__viz-stack {
  display: grid;
  gap: clamp(18px,2.4vw,34px);
  align-content: start;
}
.pkg-case__viz {
  min-height: clamp(390px,48vw,650px);
  overflow: hidden;
  background: var(--pkg-wash-30);
}
.pkg-breathe-frame { overflow: hidden; }
.pkg-case__viz-stack .pkg-case__viz {
  min-height: 0;
  aspect-ratio: 3 / 4;
}
.pkg-case__viz img { object-fit: contain; }
.pkg-case__viz--green img { object-position: center; }
.pkg-case__viz--pink img { object-position: center; }
.pkg-case__final-duo {
  display: grid;
  grid-template-columns: minmax(0,1.14fr) minmax(0,0.86fr);
  gap: 1px;
  min-height: clamp(430px,55vw,760px);
  overflow: hidden;
  background: var(--pkg-final-line);
}
.pkg-case__final-duo figure {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.pkg-case__final-duo img { object-fit: contain; }
.pkg-case__final-stage {
  margin: clamp(112px,12vw,176px) calc(50% - 50vw) 0;
  background: var(--pkg-final);
  color: var(--pkg-paper);
}
.pkg-case__final-inner {
  width: min(1480px,100%);
  margin: 0 auto;
  padding: clamp(76px,8vw,124px) clamp(32px,6vw,100px) clamp(72px,8vw,116px);
}
.pkg-case__final-head {
  display: block;
  max-width: 760px;
  margin-bottom: clamp(32px,4.5vw,62px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pkg-final-line);
}
.pkg-case__final-head h3 {
  margin: 0;
  font-family: var(--pkg-font-display);
  font-size: clamp(38px,4.5vw,66px);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.pkg-case__final-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--pkg-font-meta);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--pkg-final-accent);
}
.pkg-case__final-lede {
  margin: 20px 0 0;
  max-width: 45em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pkg-final-copy);
}
.pkg-case__closing {
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--pkg-final-line);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--pkg-final-meta);
}
.pkg-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.68s var(--pkg-ease-out), transform 0.68s var(--pkg-ease-out);
}
.pkg-case.in-view .pkg-anim {
  opacity: 1;
  transform: translateY(0);
}
.pkg-case.in-view .pkg-anim-2 { transition-delay: 0.1s; }
.pkg-case.in-view .pkg-anim-3 { transition-delay: 0.2s; }
.pkg-case.in-view .pkg-anim-4 { transition-delay: 0.3s; }

@media (hover:hover) and (pointer:fine) {
  .pkg-hover-frame { overflow: hidden; }
  .pkg-hover-image { transition: transform 0.52s var(--pkg-ease-out); }
  .pkg-hover-frame:hover .pkg-hover-image { transform: scale(1.012); }
  .pkg-case__figure:hover .pkg-case__caption { color: var(--pkg-copy); }
}

@media (max-width: 900px) {
  .pkg-case { min-height: auto; padding: 108px 20px 82px; overflow: visible; }
  .pkg-case--application,
  .pkg-case--final { padding-bottom: 0; }
  .pkg-case__hero-head,
  .pkg-case__system-grid,
  .pkg-case__application-lead,
  .pkg-case__core-spread {
    grid-template-columns: minmax(0,1fr);
  }
  .pkg-case__hero-head { gap: 28px; }
  .pkg-case__title { max-width: 11em; font-size: clamp(42px,11vw,66px); }
  .pkg-case__hero-grid { grid-template-columns: minmax(0,1fr); }
  .pkg-case__hero-grid { width: 100%; margin-left: 0; }
  .pkg-case figure.pkg-case__hero-grid { margin-left: 0; }
  .pkg-case__matchcut { min-height: 0; aspect-ratio: 4 / 3; }
  .pkg-case__hero-media { height: auto; aspect-ratio: 4 / 3; }
  .pkg-case__hero-media--pink { aspect-ratio: 1 / 1; }
  .pkg-case__c-stage { position: relative; top: auto; min-height: 560px; }
  .pkg-case__c-item { padding: 28px 20px; }
  .pkg-case__c-item img { height: min(42vw,320px); }
  .pkg-case__logic { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .pkg-case__sequence { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .pkg-case__application-copy { position: static; }
  .pkg-case__dielines { display: grid; gap: 18px; }
  .pkg-case__dieline { min-height: 315px; }
  .pkg-case__core-front { min-height: 560px; }
  .pkg-case__detail-strip { grid-template-columns: minmax(0,1fr); }
  .pkg-case__viz-grid { grid-template-columns: minmax(0,1fr); }
  .pkg-case__viz { min-height: 0; aspect-ratio: 4 / 3; }
  .pkg-case__viz-stack .pkg-case__viz { aspect-ratio: 4 / 3; }
  .pkg-case__final-duo { min-height: 0; }
  .pkg-case--final .pkg-case__final-duo { height: auto; min-height: 0; }
  .pkg-case__final-stage { margin-top: 96px; }
  .pkg-case__final-inner { padding: 112px 20px 68px; }
  .pkg-case__pattern--secondary { width: 72%; margin-left: auto; }
  .pkg-case__package-family,
  .pkg-case__dieline-layout,
  .pkg-case__final-gallery { grid-template-columns: minmax(0,1fr); }
  .pkg-case__package-visual--primary { height: min(126vw,560px); }
  .pkg-case__package-visual--secondary { width: 78%; height: min(94vw,430px); margin-left: auto; }
  .pkg-case__dieline-canvas--primary { height: min(132vw,620px); }
  .pkg-case__dieline-side { width: 82%; margin-left: auto; }
  .pkg-case__dieline-canvas--secondary { height: min(108vw,510px); }
  .pkg-case__dieline-canvas--detail { height: min(76vw,330px); }
  .pkg-case__dieline-matchcut { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .pkg-case__dieline-sequence {
    position: static;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    overflow: hidden;
  }
  .pkg-case__dieline-sequence-group { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .pkg-case__dieline-sequence-group span { display: block; text-align: center; }
  .pkg-case__dieline-sequence-group span small { display: none; }
  .pkg-case__dieline-sequence-group span:not(:last-child)::after {
    content: '→';
    display: inline;
    margin: 0 0 0 4px;
  }
  .pkg-case__dieline-sequence em { margin: 0; white-space: nowrap; }
  .pkg-case__final-visual--primary { height: min(126vw,590px); }
  .pkg-case__final-visual--secondary { width: 74%; height: min(98vw,460px); margin-left: auto; }
}

@media (max-width: 620px) {
  .pkg-case__topline { align-items: flex-start; }
  .pkg-case__keywords li { padding: 0 12px; font-size: 11px; }
  .pkg-case__hero-media { aspect-ratio: 1 / 1; }
  .pkg-case__matchcut { aspect-ratio: 1 / 1; }
  .pkg-case__caption { flex-direction: column; gap: 2px; }
  .pkg-case__section-title { font-size: clamp(38px,11vw,54px); }
  .pkg-case__c-stage { min-height: min(122vw,520px); }
  .pkg-case__c-item img { height: min(74vw,340px); }
  .pkg-case__illustrations { grid-template-columns: minmax(0,1fr); }
  .pkg-case__image { aspect-ratio: 1 / 1; }
  .pkg-case__patterns { grid-template-columns: minmax(0,1fr); }
  .pkg-case__pattern { min-height: 180px; }
  .pkg-case__core-front { min-height: 460px; }
  .pkg-case__dieline { min-height: 250px; padding: 14px; }
  .pkg-case__detail-strip .pkg-case__dieline { min-height: 300px; }
  .pkg-case__final-duo { grid-template-columns: minmax(0,1fr); }
  .pkg-case__final-duo figure { aspect-ratio: 1 / 1; }
  .pkg-case__closing { flex-direction: column; gap: 6px; }
  .pkg-case__package-visual--primary { height: min(122vw,480px); }
  .pkg-case__package-visual--secondary { width: 82%; height: min(98vw,390px); }
  .pkg-case__dieline-canvas--primary { height: min(136vw,540px); padding: 12px; }
  .pkg-case__dieline-side { width: 86%; }
  .pkg-case__dieline-canvas--secondary { height: min(112vw,450px); padding: 12px; }
  .pkg-case__dieline-pairs { gap: 22px 12px; }
  .pkg-case__dieline-pair--01 { grid-column: 1 / -1; }
  .pkg-case__dieline-pair--02 { grid-column: 1 / -1; }
  .pkg-case__dieline-pair--03 { grid-column: 1 / span 5; }
  .pkg-case__dieline-pair--04 { grid-column: 6 / -1; }
  .pkg-case__dieline-pair-caption {
    grid-template-columns: auto minmax(0,1fr);
    gap: 8px;
    font-size: 8px;
  }
  .pkg-case__dieline-pair-caption span:last-child { grid-column: 2; }
  .pkg-case__dieline-sequence { font-size: 8px; letter-spacing: 0.08em; }
  .pkg-case__dieline-sequence em { font-size: 7px; letter-spacing: 0.1em; }
  .pkg-case__final-visual--primary { height: min(122vw,500px); }
  .pkg-case__final-visual--secondary { width: 80%; height: min(102vw,410px); }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pkg-case .pkg-reveal { clip-path: none !important; transition: none !important; }
  .pkg-case .pkg-breathe { animation: none !important; transform: none !important; }
  .pkg-case .pkg-scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pkg-case__matchcut-frame,
  .pkg-case__dieline-pair-layer,
  .pkg-case__c-item,
  .pkg-case--system,
  .pkg-case__matchcut,
  .pkg-case__c-stage { transition: none !important; }
}

/* Hallmark · genre: editorial · macrostructure: Split Studio · tone: Editorial Motion · anchor: tea-green · scope: Packaging v2 only */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 · contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34,49–57) */
/* PSD/PDF 决定构图，HTML 决定时间。 */
.pkg2-section {
  --pkg2-paper: oklch(92.4% 0.018 83);
  --pkg2-paper-warm: oklch(91.7% 0.025 74);
  --pkg2-paper-pink: oklch(92% 0.024 40);
  --pkg2-ink: oklch(22% 0.015 86);
  --pkg2-copy: oklch(36% 0.012 82);
  --pkg2-muted: oklch(46% 0.012 80);
  --pkg2-rule: oklch(73% 0.018 82);
  --pkg2-green: oklch(42% 0.085 145);
  --pkg2-pink: oklch(51% 0.105 5);
  --pkg2-dark: oklch(16% 0.012 73);
  --pkg2-dark-2: oklch(19% 0.015 56);
  --pkg2-dark-rule: oklch(70% 0.012 75 / 0.2);
  --pkg2-light: oklch(91% 0.012 80);
  --pkg2-light-muted: oklch(72% 0.012 75);
  --pkg2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pkg2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pkg2-pad: clamp(1.25rem, 5.4vw, 6.25rem);
  --pkg2-max: 106.25rem;
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: clip;
  scroll-margin-top: 7.5rem;
  scroll-snap-align: none;
  background: var(--pkg2-paper);
  color: var(--pkg2-ink);
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
}

.pkg2-inner {
  width: min(100%, var(--pkg2-max));
  margin-inline: auto;
  padding-inline: var(--pkg2-pad);
}

.pkg2-kicker,
.pkg2-meta,
.pkg2-caption,
.pkg2-index,
.pkg2-keywords,
.pkg2-match-source {
  font-variant-numeric: tabular-nums;
}

.pkg2-kicker,
.pkg2-meta,
.pkg2-caption,
.pkg2-match-source {
  font-size: clamp(0.625rem, 0.72vw, 0.75rem);
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pkg2-kicker,
.pkg2-meta,
.pkg2-caption { color: var(--pkg2-muted); }

.pkg2-heading {
  margin: 0;
  font-family: var(--font-display, "Noto Serif SC", serif);
  font-size: clamp(2.35rem, 4.6vw, 5.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.pkg2-copy {
  max-width: 37rem;
  margin: 0;
  color: var(--pkg2-copy);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.8;
}

.pkg2-rule {
  width: 100%;
  height: 1px;
  background: var(--pkg2-rule);
}

.pkg2-figure { margin: 0; min-width: 0; }
.pkg2-figure img { display: block; width: 100%; height: auto; }
.pkg2-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.8rem;
}

.pkg2-reveal { opacity: 1; transform: none; }
.pkg2-motion-ready .pkg2-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 700ms var(--pkg2-ease-out), transform 700ms var(--pkg2-ease-out);
  transition-delay: var(--pkg2-delay, 0ms);
}
.pkg2-motion-ready .pkg2-reveal.is-visible { opacity: 1; transform: none; }

.pkg2-motion-ready .pkg2-mask-left,
.pkg2-motion-ready .pkg2-mask-right,
.pkg2-motion-ready .pkg2-mask-down {
  opacity: 1;
  transform: none;
  transition: clip-path 1000ms var(--pkg2-ease-out);
  transition-delay: var(--pkg2-delay, 0ms);
}
.pkg2-motion-ready .pkg2-mask-left { clip-path: inset(0 100% 0 0); }
.pkg2-motion-ready .pkg2-mask-right { clip-path: inset(0 0 0 100%); }
.pkg2-motion-ready .pkg2-mask-down { clip-path: inset(0 0 100% 0); }
.pkg2-motion-ready .pkg2-mask-left.is-visible,
.pkg2-motion-ready .pkg2-mask-right.is-visible,
.pkg2-motion-ready .pkg2-mask-down.is-visible { clip-path: inset(0); }

/* 01 · Project visual */
.pkg2-hero { padding-block: clamp(8.5rem, 11vw, 11.5rem) clamp(7.5rem, 11vw, 11rem); }
.pkg2-hero-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: clamp(2rem, 4.2vw, 4.5rem);
  border-block-end: 1px solid var(--pkg2-rule);
}
.pkg2-hero-grid { display: grid; gap: clamp(3rem, 7vw, 7.5rem); padding-block-start: clamp(3rem, 5vw, 5.5rem); }
.pkg2-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pkg2-hero-copy .pkg2-kicker { margin-block-end: 1.5rem; }
.pkg2-hero-subtitle {
  display: block;
  margin-block-start: 0.9rem;
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: clamp(1.15rem, 1.75vw, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.pkg2-hero-copy .pkg2-copy { margin-block-start: clamp(2rem, 3.6vw, 3.5rem); }
.pkg2-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin: clamp(2.1rem, 4vw, 4rem) 0 0;
  padding: 1rem 0 0;
  border-block-start: 1px solid var(--pkg2-rule);
  color: var(--pkg2-copy);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  list-style: none;
}
.pkg2-hero-art { position: relative; min-width: 0; padding-block-end: clamp(2rem, 5vw, 5rem); }
.pkg2-hero-green { width: min(100%, 65rem); margin-inline-start: auto; }
.pkg2-hero-pink { width: clamp(9.5rem, 29%, 21rem); margin: clamp(-3rem, -4vw, -1.25rem) 0 0 auto; position: relative; z-index: 2; }
.pkg2-hero-green img,
.pkg2-hero-pink img { object-fit: contain; }
.pkg2-hero-breathe { transform-origin: 58% 48%; }
.pkg2-hero-breathe.is-live { animation: pkg2-hero-breathe 7s var(--pkg2-ease-in-out) both; }
@keyframes pkg2-hero-breathe { from { transform: scale(0.99); } to { transform: scale(1); } }

/* Shared section heads */
.pkg2-section-head {
  display: grid;
  gap: 1.25rem;
  padding-block-end: clamp(3rem, 6vw, 6rem);
}
.pkg2-section-head .pkg2-copy { max-width: 34rem; }

/* 02 · Dual visual language */
.pkg2-language {
  padding-block: clamp(8rem, 12vw, 12rem) clamp(7rem, 10vw, 10rem);
  background: var(--pkg2-paper-warm);
  transition: background-color 1200ms var(--pkg2-ease-in-out);
}
.pkg2-language.is-pink { background: var(--pkg2-paper-pink); }
.pkg2-language-grid { display: grid; gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.pkg2-source-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 1.25rem; align-items: end; }
.pkg2-source-stack figure:first-child { margin-block-end: clamp(2rem, 6vw, 6rem); }
.pkg2-source-stack img { max-height: 25rem; object-fit: contain; }
.pkg2-c-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 65vw, 45rem);
  isolation: isolate;
}
.pkg2-c-layer { grid-area: 1 / 1; width: min(100%, 43rem); opacity: 0; clip-path: inset(0 100% 0 0); transform-origin: 50% 50%; transition: opacity 1100ms var(--pkg2-ease-in-out), clip-path 1200ms var(--pkg2-ease-in-out); }
.pkg2-c-layer img { width: 100%; max-height: 44rem; object-fit: contain; }
.pkg2-c-layer.is-active { opacity: 1; clip-path: inset(0); }
.pkg2-c-label {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--pkg2-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 03 · Wordmark & pattern */
.pkg2-wordpattern { padding-block: clamp(7rem, 10vw, 10rem) clamp(9rem, 14vw, 14rem); }
.pkg2-wordpattern-grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.pkg2-wordmark-visual { overflow: hidden; padding-block: clamp(2rem, 4vw, 4rem); border-block: 1px solid var(--pkg2-rule); }
.pkg2-wordmark-visual img { width: 118%; max-width: none; transform: translateX(-4%); }
.pkg2-pattern-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr); gap: clamp(1rem, 2.6vw, 2.75rem); align-items: end; }
.pkg2-pattern-stack figure:last-child { margin-block-end: clamp(-2rem, -2vw, -0.75rem); }
.pkg2-pattern-stack img { object-fit: contain; }

/* 04 · Green dieline */
.pkg2-green-dieline { padding-block: clamp(8rem, 12vw, 12rem) clamp(7rem, 11vw, 11rem); }
.pkg2-dieline-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem) clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.pkg2-dieline-grid .pkg2-dieline-item { grid-column: 1 / -1; }
.pkg2-dieline-item img { width: 100%; max-height: 44rem; object-fit: contain; }
.pkg2-dieline-item--01 { max-width: 42rem; }
.pkg2-dieline-item--02 { max-width: 35rem; margin-inline-start: auto; }
.pkg2-dieline-item--03 { max-width: 68rem; margin-inline: auto; }
.pkg2-dieline-label { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 0.7rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--pkg2-rule); }

/* 05 · Three locked match cuts */
.pkg2-matchcut { padding-block: clamp(6rem, 9vw, 9rem) clamp(10rem, 15vw, 15rem); }
.pkg2-match-intro { padding-block-end: clamp(4rem, 8vw, 8rem); border-block-end: 1px solid var(--pkg2-rule); }
.pkg2-match-list { display: grid; gap: clamp(6rem, 11vw, 11rem); padding-block-start: clamp(5rem, 8vw, 8rem); }
.pkg2-match-row { display: grid; gap: 1.5rem; }
.pkg2-match-copy { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-block-end: 0.85rem; border-block-end: 1px solid var(--pkg2-rule); }
.pkg2-match-copy h3 { margin: 0; font-family: var(--font-display, "Noto Serif SC", serif); font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight: 500; }
.pkg2-match-stage {
  --green-normalize: 1;
  --pink-normalize: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(25rem, 72vw, 47rem);
  overflow: hidden;
  isolation: isolate;
}
.pkg2-match-stage--01 { height: clamp(29rem, 78vw, 52rem); --green-normalize: 1.2; --pink-normalize: 1; }
.pkg2-match-stage--02 { height: clamp(31rem, 84vw, 54rem); --green-normalize: 0.97; --pink-normalize: 1; }
.pkg2-match-stage--03 { height: clamp(21rem, 55vw, 36rem); --green-normalize: 1; --pink-normalize: 1; }
.pkg2-match-layer {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transition: opacity 1000ms var(--pkg2-ease-in-out), clip-path 1100ms var(--pkg2-ease-in-out);
}
.pkg2-match-layer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform-origin: 50% 50%; }
.pkg2-match-layer--green img { transform: scale(var(--green-normalize)); }
.pkg2-match-layer--pink img { transform: scale(var(--pink-normalize)); }
.pkg2-match-stage:not(.is-pink) .pkg2-match-layer--green,
.pkg2-match-stage.is-pink .pkg2-match-layer--pink { opacity: 1; clip-path: inset(0); }
.pkg2-match-state { display: flex; justify-content: space-between; gap: 1rem; padding-block-start: 0.8rem; color: var(--pkg2-muted); }
.pkg2-match-state span:last-child { color: var(--pkg2-pink); }

/* 06 · Final visuals */
.pkg2-final {
  padding-block: clamp(8rem, 12vw, 12rem) clamp(9rem, 14vw, 14rem);
  background: var(--pkg2-dark);
  color: var(--pkg2-light);
}
.pkg2-final.is-pink { background: var(--pkg2-dark-2); }
.pkg2-final .pkg2-kicker,
.pkg2-final .pkg2-meta,
.pkg2-final .pkg2-caption { color: var(--pkg2-light-muted); }
.pkg2-final .pkg2-copy { color: var(--pkg2-light-muted); }
.pkg2-final .pkg2-section-head { border-block-end: 1px solid var(--pkg2-dark-rule); }
.pkg2-diptych-list { display: grid; gap: clamp(7rem, 12vw, 12rem); padding-block-start: clamp(5rem, 8vw, 8rem); }
.pkg2-diptych-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block-end: 1.25rem; }
.pkg2-diptych-head h3 { margin: 0; font-family: var(--font-display, "Noto Serif SC", serif); font-size: clamp(1.55rem, 2.8vw, 3rem); font-weight: 500; }
.pkg2-diptych { display: grid; gap: clamp(1rem, 2vw, 2rem); align-items: stretch; }
.pkg2-diptych figure { min-width: 0; overflow: hidden; }
.pkg2-diptych img { width: 100%; height: 100%; min-height: 18rem; max-height: 47rem; object-fit: contain; }
.pkg2-final-close { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: clamp(6rem, 10vw, 10rem); padding-block-start: 1.25rem; border-block-start: 1px solid var(--pkg2-dark-rule); color: var(--pkg2-light-muted); }

@media (min-width: 40rem) {
  .pkg2-section-head { grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.62fr); align-items: end; }
  .pkg2-section-head .pkg2-copy { justify-self: end; }
  .pkg2-dieline-grid .pkg2-dieline-item--01 { grid-column: 1 / span 6; }
  .pkg2-dieline-grid .pkg2-dieline-item--02 { grid-column: 8 / -1; margin-block-start: 6rem; }
  .pkg2-dieline-grid .pkg2-dieline-item--03 { grid-column: 3 / span 9; margin-block-start: 4rem; }
  .pkg2-match-row:nth-child(even) .pkg2-match-stage { width: 82%; margin-inline-start: auto; }
  .pkg2-diptych { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .pkg2-diptych--pink { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
}

@media (min-width: 60rem) {
  .pkg2-hero-grid { grid-template-columns: minmax(17rem, 4fr) minmax(0, 8fr); align-items: start; }
  .pkg2-hero-copy { position: sticky; top: 8.5rem; }
  .pkg2-language-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pkg2-wordpattern-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pkg2-match-row { grid-template-columns: minmax(10rem, 2.2fr) minmax(0, 9.8fr); align-items: start; }
  .pkg2-match-copy { display: grid; align-content: start; border-block-end: 0; border-inline-end: 1px solid var(--pkg2-rule); padding: 1rem 1.5rem 1rem 0; }
  .pkg2-match-state { grid-column: 2; }
}

@media (min-width: 90rem) {
  .pkg2-hero-pink { margin-inline-end: 4%; }
  .pkg2-source-stack { padding-inline-start: 8%; }
  .pkg2-diptych-list { padding-inline: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg2-motion-ready .pkg2-reveal,
  .pkg2-motion-ready .pkg2-mask-left,
  .pkg2-motion-ready .pkg2-mask-right,
  .pkg2-motion-ready .pkg2-mask-down {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: opacity 150ms linear !important;
  }
  .pkg2-hero-breathe.is-live { animation: none !important; }
  .pkg2-c-layer,
  .pkg2-match-layer,
  .pkg2-language,
  .pkg2-final { transition: opacity 150ms linear !important; }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* 《作品集4》定稿复刻：画板决定构图，HTML 只负责时间与观看顺序。 */
.pkg4-section {
  --pkg4-dark-green: #002806;
  --pkg4-white: #ffffff;
  --pkg4-ink: #111111;
  --pkg4-copy: rgba(255,255,255,0.92);
  --pkg4-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pkg4-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pkg4-enter-duration: 720ms;
  --pkg4-mask-duration: 980ms;
  position: relative;
  width: 100%;
  overflow: hidden;
  scroll-margin-top: 5.5rem;
  background: var(--pkg4-white);
}

.pkg4-board {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.pkg4-board img {
  display: block;
  max-width: none;
}

/* Packaging 专属动效：默认内容可见，仅在 JS 就绪后进入一次性时间编排。 */
.pkg4-section.pkg2-motion-ready .pkg2-reveal {
  transform: translate3d(0, 1rem, 0);
  transition-duration: var(--pkg4-enter-duration);
  transition-timing-function: var(--pkg4-ease-out);
}

.pkg4-section.pkg2-motion-ready .pkg2-reveal.is-visible {
  transform: translate3d(0, 0, 0);
}

.pkg4-section.pkg2-motion-ready .pkg2-mask-left,
.pkg4-section.pkg2-motion-ready .pkg2-mask-right,
.pkg4-section.pkg2-motion-ready .pkg2-mask-down {
  opacity: 0.001;
  transform: translate3d(0, 0.75rem, 0) scale(0.995);
  transition-property: clip-path, opacity, transform;
  transition-duration: var(--pkg4-mask-duration), 560ms, var(--pkg4-mask-duration);
  transition-timing-function: var(--pkg4-ease-out);
}

.pkg4-section.pkg2-motion-ready .pkg2-mask-left.is-visible,
.pkg4-section.pkg2-motion-ready .pkg2-mask-right.is-visible,
.pkg4-section.pkg2-motion-ready .pkg2-mask-down.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 画板 2 / 3：49:51 深绿与白色对分。 */
.pkg4-overview {
  background: linear-gradient(90deg, var(--pkg4-dark-green) 0 49.01%, #fff 49.01% 100%);
}

.pkg4-overview-copy {
  position: absolute;
  z-index: 20;
  left: 5.21%;
  top: 28.52%;
  width: 36.67%;
  color: var(--pkg4-copy);
}

.pkg4-overview-copy h2 {
  margin: 0 0 clamp(1.8rem, 3.12vw, 3.75rem);
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display, "Noto Serif SC", serif);
  font-size: clamp(1.5rem, 2.08vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.pkg4-overview-cn,
.pkg4-overview-en {
  margin: 0;
  margin-inline-start: 0.63vw;
  max-width: 43rem;
}

.pkg4-overview-cn {
  margin-block-end: clamp(1.75rem, 2.6vw, 3.1rem);
  font-family: var(--font-display, "Noto Serif SC", serif);
  font-size: clamp(0.82rem, 1.08vw, 1.3rem);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: 0.075em;
}

.pkg4-overview-en {
  color: rgba(255,255,255,0.68);
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: clamp(0.7rem, 0.72vw, 0.85rem);
  font-weight: 300;
  line-height: 1.52;
  letter-spacing: 0.1em;
}

.pkg4-collage-item {
  position: absolute;
  z-index: 5;
  margin: 0;
}

.pkg4-collage-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 绿色以“正面锚点 → 刀版 → 应用视觉”展开；粉色保持同构位置并柔和接续。 */
.pkg4-section.pkg2-motion-ready.pkg4-green .pkg4-collage-item {
  transform-origin: 50% 62%;
}

.pkg4-section.pkg2-motion-ready.pkg4-pink .pkg4-flavour-crossfade {
  clip-path: inset(0) !important;
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0) scale(0.992);
  transform-origin: 50% 50%;
  transition-property: opacity, transform;
  transition-duration: 820ms, 920ms;
  transition-timing-function: var(--pkg4-ease-in-out), var(--pkg4-ease-out);
}

.pkg4-section.pkg2-motion-ready.pkg4-pink .pkg4-flavour-crossfade.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.pkg4-green .pkg4-collage-01 { left: 71.82%; top: 66.76%; width: 27.66%; height: 32.96%; }
.pkg4-green .pkg4-collage-02 { left: 52.08%; top: 66.76%; width: 18.54%; height: 32.96%; }
.pkg4-green .pkg4-collage-03 { left: 64.38%; top: 28.61%; width: 15.05%; height: 37.50%; }
.pkg4-green .pkg4-collage-04 { left: 79.43%; top: 21.30%; width: 20.31%; height: 29.63%; }
.pkg4-green .pkg4-collage-05 { left: 79.79%; top: 50.93%; width: 19.95%; height: 15.19%; }
.pkg4-green .pkg4-collage-06 { left: 44.90%; top: 44.26%; width: 19.11%; height: 20.93%; z-index: 12; }

.pkg4-pink .pkg4-collage-01 { left: 79.48%; top: 63.98%; width: 19.90%; height: 35.37%; }
.pkg4-pink .pkg4-collage-02 { left: 57.45%; top: 62.78%; width: 20.94%; height: 37.22%; }
.pkg4-pink .pkg4-collage-03 { left: 64.11%; top: 24.35%; width: 14.79%; height: 38.06%; }
.pkg4-pink .pkg4-collage-04 { left: 50.00%; top: 23.98%; width: 13.59%; height: 38.61%; }
.pkg4-pink .pkg4-collage-05 { left: 79.38%; top: 46.02%; width: 20.00%; height: 16.57%; }
.pkg4-pink .pkg4-collage-06 { left: 79.01%; top: 16.94%; width: 20.78%; height: 30.83%; }

/* 画板 4：字标、双色体系与四个视觉来源。 */
.pkg4-system { background: #fff; color: var(--pkg4-ink); }
.pkg4-system-wordmark {
  position: absolute;
  left: 0.05%;
  top: 8.45%;
  width: 38.91%;
  height: 51.11%;
  margin: 0;
}
.pkg4-system-wordmark img { width: 100%; height: 100%; object-fit: contain; }
.pkg4-section.pkg2-motion-ready .pkg4-system-wordmark {
  transform-origin: 0 50%;
}
.pkg4-system-visual {
  position: absolute;
  margin: 0;
}
.pkg4-system-visual img { width: 100%; height: 100%; object-fit: contain; }
.pkg4-system-visual--tea { left: 53.54%; top: 12.87%; width: 20.36%; height: 31.20%; }
.pkg4-system-visual--pink-c { left: 76.67%; top: 11.39%; width: 18.39%; height: 33.61%; }
.pkg4-system-visual--plum { left: 54.69%; top: 52.50%; width: 18.39%; height: 32.13%; }
.pkg4-system-visual--green-c { left: 77.66%; top: 51.57%; width: 18.18%; height: 33.24%; }

.pkg4-section.pkg2-motion-ready .pkg4-system-visual {
  transform-origin: 50% 70%;
}
.pkg4-section.pkg2-motion-ready .pkg4-system-visual--pink-c,
.pkg4-section.pkg2-motion-ready .pkg4-system-visual--green-c {
  transform-origin: 62% 50%;
}

.pkg4-palette {
  position: absolute;
  left: 0;
  bottom: 1.76%;
  width: 49.11%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.pkg4-swatch {
  position: relative;
  aspect-ratio: 239 / 176;
  display: grid;
  place-items: center;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(0.65rem, 1.42vw, 1.7rem);
  font-weight: 300;
}
.pkg4-section.pkg2-motion-ready .pkg4-palette-reveal {
  transform: scaleX(0.965);
  transform-origin: 0 50%;
  transition-duration: 520ms;
}
.pkg4-section.pkg2-motion-ready .pkg4-palette-reveal.is-visible {
  transform: scaleX(1);
}
.pkg4-chip-row {
  position: absolute;
  left: 55.57%;
  right: 4.27%;
  display: flex;
  justify-content: space-between;
}
.pkg4-chip-row--top { top: 8.35%; }
.pkg4-chip-row--bottom { bottom: 6.48%; }
.pkg4-chip { width: 1.93%; min-width: 0.75rem; aspect-ratio: 1; }

/* 画板 5：标题、双语说明与纹样推导保持 PSD 坐标关系。 */
.pkg4-pattern { background: #fff; color: #111; }
.pkg4-pattern-title {
  position: absolute;
  left: 7.45%;
  top: 9.45%;
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-family: var(--font-display, "Noto Serif SC", serif);
  font-weight: 500;
}
.pkg4-pattern-title span { display: block; }
.pkg4-pattern-title span:first-child { font-size: clamp(1rem, 1.72vw, 2.05rem); line-height: 1.1; }
.pkg4-pattern-title span:last-child { margin-top: 0.6rem; font-size: clamp(1rem, 1.67vw, 2rem); line-height: 1.1; }
.pkg4-pattern-copy {
  position: absolute;
  top: 17.87%;
  margin: 0;
  color: #222;
}
.pkg4-pattern-copy--cn {
  left: 7.55%;
  width: 43.70%;
  font-family: var(--font-display, "Noto Serif SC", serif);
  font-size: clamp(0.78rem, 1.22vw, 1.46rem);
  line-height: 1.48;
  letter-spacing: 0.06em;
}
.pkg4-pattern-copy--en {
  left: 54.53%;
  width: 39.58%;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(0.7rem, 0.72vw, 0.85rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.1em;
}
.pkg4-pattern-asset { position: absolute; margin: 0; }
.pkg4-pattern-process { position: absolute; inset: 0; }
.pkg4-pattern-asset img { width: 100%; height: 100%; object-fit: contain; }
.pkg4-pattern-asset--source-a { left: 8.28%; top: 52.22%; width: 7.92%; height: 14.07%; }
.pkg4-pattern-asset--source-b { left: 8.23%; top: 70.65%; width: 8.02%; height: 14.44%; }
.pkg4-pattern-asset--red { left: 18.49%; top: 52.31%; width: 9.38%; height: 27.78%; }
.pkg4-pattern-asset--green { left: 31.04%; top: 52.31%; width: 9.17%; height: 16.30%; }
.pkg4-pattern-asset--circle { left: 31.61%; top: 70.83%; width: 8.02%; height: 13.89%; }
.pkg4-pattern-asset--arrow { left: 40.94%; top: 58.98%; width: 5.73%; height: 4.35%; }
.pkg4-pattern-asset--final-green { left: 47.55%; top: 53.33%; width: 17.19%; height: 29.81%; }
.pkg4-pattern-asset--final-pink { left: 66.72%; top: 52.41%; width: 27.45%; height: 30.83%; }

.pkg4-section.pkg2-motion-ready .pkg4-process-source {
  transform-origin: 50% 50%;
}
.pkg4-section.pkg2-motion-ready .pkg4-process-transform {
  transform-origin: 42% 50%;
}
.pkg4-section.pkg2-motion-ready .pkg4-process-result {
  transform-origin: 0 50%;
}
.pkg4-keep-exploring {
  position: absolute;
  right: 7.29%;
  bottom: 6.94%;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(0.9rem, 1.62vw, 1.95rem);
  line-height: 0.9;
  text-align: right;
  text-transform: uppercase;
}

/* 画板 6 / 7：保留原双联比例，左右遮罩入场后完全静止。 */
.pkg4-final-board {
  display: grid;
  grid-template-columns: 48% 52%;
  width: 100%;
  aspect-ratio: 1920 / 1185;
  background: #07170d;
}
.pkg4-final-board--pink { grid-template-columns: 48.96% 51.04%; background: #f5c9d5; }
.pkg4-final-panel { min-width: 0; min-height: 0; overflow: hidden; margin: 0; }
.pkg4-final-panel img { width: 100%; height: 100%; object-fit: cover; }
.pkg4-section.pkg2-motion-ready .pkg4-final-panel {
  transform: scale(0.993);
}
.pkg4-section.pkg2-motion-ready .pkg4-final-panel:first-child { transform-origin: 100% 50%; }
.pkg4-section.pkg2-motion-ready .pkg4-final-panel:last-child { transform-origin: 0 50%; }
.pkg4-section.pkg2-motion-ready .pkg4-final-panel.is-visible { transform: scale(1); }

@media (max-width: 55rem) {
  .pkg4-board { aspect-ratio: auto; }
  .pkg4-overview {
    min-height: 0;
    background: #fff;
  }
  .pkg4-overview-copy {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 6.5rem 1.25rem 3rem;
    background: var(--pkg4-dark-green);
  }
  .pkg4-overview-copy h2 { margin-bottom: 2rem; font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .pkg4-overview-cn { margin-bottom: 1.75rem; font-size: 0.95rem; }
  .pkg4-overview-cn,
  .pkg4-overview-en { margin-inline-start: 0; }
  .pkg4-overview-en { font-size: 0.84rem; }
  .pkg4-overview::after {
    content: "";
    display: block;
    height: 118vw;
    background: #fff;
  }
  .pkg4-green .pkg4-collage-01 { left: 43%; top: auto; bottom: 1%; width: 55%; height: 34vw; }
  .pkg4-green .pkg4-collage-02 { left: 4%; top: auto; bottom: 1%; width: 36%; height: 34vw; }
  .pkg4-green .pkg4-collage-03 { left: 35%; top: auto; bottom: 37vw; width: 27%; height: 47vw; }
  .pkg4-green .pkg4-collage-04 { left: 62%; top: auto; bottom: 58vw; width: 36%; height: 36vw; }
  .pkg4-green .pkg4-collage-05 { left: 62%; top: auto; bottom: 39vw; width: 36%; height: 18vw; }
  .pkg4-green .pkg4-collage-06 { left: 2%; top: auto; bottom: 67vw; width: 35%; height: 25vw; }
  .pkg4-pink .pkg4-collage-01 { left: 61%; top: auto; bottom: 1%; width: 37%; height: 37vw; }
  .pkg4-pink .pkg4-collage-02 { left: 21%; top: auto; bottom: 1%; width: 39%; height: 39vw; }
  .pkg4-pink .pkg4-collage-03 { left: 34%; top: auto; bottom: 42vw; width: 28%; height: 43vw; }
  .pkg4-pink .pkg4-collage-04 { left: 3%; top: auto; bottom: 42vw; width: 29%; height: 45vw; }
  .pkg4-pink .pkg4-collage-05 { left: 61%; top: auto; bottom: 43vw; width: 37%; height: 18vw; }
  .pkg4-pink .pkg4-collage-06 { left: 60%; top: auto; bottom: 63vw; width: 38%; height: 34vw; }

  .pkg4-system { aspect-ratio: 4 / 5; }
  .pkg4-system-wordmark { left: -7%; top: 5%; width: 58%; height: 34%; }
  .pkg4-system-visual--tea { left: 49%; top: 6%; width: 22%; height: 23%; }
  .pkg4-system-visual--pink-c { left: 73%; top: 5%; width: 24%; height: 25%; }
  .pkg4-system-visual--plum { left: 49%; top: 34%; width: 22%; height: 23%; }
  .pkg4-system-visual--green-c { left: 73%; top: 33%; width: 24%; height: 25%; }
  .pkg4-palette { left: 0; right: 0; bottom: 0; width: 100%; }
  .pkg4-chip-row { display: none; }
  .pkg4-swatch { font-size: 0.66rem; }

  .pkg4-pattern {
    min-height: 72rem;
    padding: 6rem 1.25rem 3rem;
  }
  .pkg4-pattern-title,
  .pkg4-pattern-copy,
  .pkg4-pattern-asset,
  .pkg4-keep-exploring { position: static; }
  .pkg4-pattern-title { margin-bottom: 2rem; }
  .pkg4-pattern-copy { width: 100%; margin-bottom: 1.5rem; font-size: 0.9rem; }
  .pkg4-pattern-copy--en { color: #666; }
  .pkg4-pattern-process {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
    align-items: center;
    margin-top: 3rem;
  }
  .pkg4-pattern-process .pkg4-pattern-asset { width: 100%; height: auto; }
  .pkg4-pattern-process .pkg4-pattern-asset img { width: 100%; height: auto; }
  .pkg4-pattern-asset--arrow { display: none; }
  .pkg4-pattern-asset--final-green,
  .pkg4-pattern-asset--final-pink { grid-column: 1 / -1; }
  .pkg4-keep-exploring { margin-top: 3rem; }

  .pkg4-final-board,
  .pkg4-final-board--pink {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
  }
  .pkg4-final-panel { aspect-ratio: 0.76; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg4-section .pkg2-reveal,
  .pkg4-section .pkg2-mask-left,
  .pkg4-section .pkg2-mask-right,
  .pkg4-section .pkg2-mask-down {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ================================================================
   VISUAL DESIGN / POSTER — editorial exhibition sequence
   Scoped to the Poster chapter so completed case studies stay intact.
   ================================================================ */
.poster-case {
  --poster-bg: #0a0a0a;
  --poster-fg: #f1eee8;
  --poster-copy: rgba(241, 238, 232, 0.66);
  --poster-meta: rgba(241, 238, 232, 0.4);
  --poster-line: rgba(255, 255, 255, 0.11);
  --poster-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: clip;
  background: var(--poster-bg);
  color: var(--poster-fg);
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

.poster-case__inner {
  width: min(100%, 1800px);
  margin: 0 auto;
  padding: clamp(8rem, 12vw, 13rem) clamp(1.5rem, 5vw, 6rem);
}

.poster-case__copy {
  width: min(100%, 38rem);
  margin-bottom: clamp(3rem, 6vw, 6.5rem);
}

.poster-case--offset .poster-case__copy {
  margin-left: auto;
  margin-right: clamp(0rem, 7vw, 8rem);
}

.poster-case__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.25rem;
  color: var(--poster-meta);
  font-family: 'Sora', sans-serif;
  font-size: clamp(0.62rem, 0.65vw, 0.74rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.poster-case__meta::after {
  content: '';
  width: clamp(3rem, 7vw, 7rem);
  height: 1px;
  background: var(--poster-line);
}

.poster-case__title {
  margin: 0;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.035em;
}

.poster-case__description {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--poster-copy);
  font-size: clamp(0.92rem, 1vw, 1.08rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: 0.025em;
}

.poster-case__triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.35rem, 0.65vw, 0.85rem);
  width: min(100%, 1680px);
  margin: 0 auto;
}

.poster-case--offset .poster-case__triptych {
  width: min(93%, 1600px);
  margin-right: 0;
}

.poster-case--closing .poster-case__triptych {
  width: min(96%, 1640px);
  margin-left: 0;
}

.poster-case__work {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #070707;
}

.poster-case__work img,
.poster-case__work video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.poster-case__work video {
  background: #070707;
}

/* Content is readable without JS; motion state is enabled only after mount. */
.poster-case__reveal {
  opacity: 1;
  transform: none;
}

.poster-case.poster-motion-ready .poster-case__reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s var(--poster-ease) var(--poster-delay, 0ms),
    transform 0.75s var(--poster-ease) var(--poster-delay, 0ms);
}

.poster-case.poster-motion-ready .poster-case__work.poster-case__reveal {
  clip-path: inset(0 0 8% 0);
  transform: translateY(28px);
  transition:
    opacity 0.82s var(--poster-ease) var(--poster-delay, 0ms),
    transform 0.82s var(--poster-ease) var(--poster-delay, 0ms),
    clip-path 0.9s var(--poster-ease) var(--poster-delay, 0ms);
}

.poster-case.poster-motion-ready .poster-case__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.poster-case.poster-motion-ready .poster-case__work.poster-case__reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 760px) {
  .poster-case__inner {
    padding: 7.25rem 1.25rem 8.5rem;
  }

  .poster-case__copy,
  .poster-case--offset .poster-case__copy {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2.75rem;
  }

  .poster-case__title {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  .poster-case__description {
    font-size: 0.94rem;
    line-height: 1.85;
  }

  .poster-case__triptych,
  .poster-case--offset .poster-case__triptych,
  .poster-case--closing .poster-case__triptych {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    width: 100%;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-case.poster-motion-ready .poster-case__reveal,
  .poster-case.poster-motion-ready .poster-case__work.poster-case__reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Short GUI cases: preserve artwork, consolidate repeated analysis. */
.stu-case--compact { padding-top: 112px; padding-bottom: 64px; }
.stu-case--compact .stu-case__inner { max-width: 1240px; }
.stu-case__compact-head { margin: 28px 0 32px; }
.stu-case__compact-head h2 { margin: 0; font-size: clamp(28px,3vw,44px); font-weight: 300; line-height: 1.3; }
.stu-case__compact-head p { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: var(--stu-muted); }
.stu-case__compact-details { display: grid; grid-template-columns: 5fr 6fr; gap: 32px; align-items: start; }
.stu-case__compact-details figure { margin: 0; min-width: 0; }
.stu-case__detail-crop { position: relative; overflow: hidden; background: #0b0d0e; }
.stu-case__detail-crop img { position: absolute; display: block; max-width: none; height: auto; }
.stu-case__compact-details figcaption { padding-top: 16px; }
.stu-case__compact-details h3, .stu-case__compact-colors h3 { margin: 0; font-size: 17px; font-weight: 400; }
.stu-case__compact-details p, .stu-case__compact-colors p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: var(--stu-muted); }
.stu-case__compact-colors { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--stu-line); scroll-margin-top: 112px; }
.stu-case__compact-colors ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.stu-case__compact-colors li { font-size: 11px; }
.stu-case__compact-colors small { display: block; margin-top: 4px; font-size: 9px; color: var(--stu-muted); }
.stu-case__compact-swatch { display: block; height: 24px; margin-bottom: 8px; }
@media(max-width:760px) {
  .stu-case--compact { padding: 108px 20px 56px; }
  .stu-case__compact-details, .stu-case__compact-colors { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .stu-case__compact-colors ul { gap: 8px; }
}

/* Reserve chapter scroll space until its script arrives, preserving anchor positions. */
.chapter-load-sentinel { display: block; height: 0; visibility: hidden; }
.chapter-await { display: flex; align-items: flex-start; justify-content: center; background: #101010; }
.chapter-await button { margin-top: 18vh; padding: 10px 16px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; }

/* Content distillation: retained artwork, shorter supporting explanations. */
.chapter-anchor-alias { position: absolute; top: 0; pointer-events: none; scroll-margin-top: 112px; }
.dcp-cultural {
  position: relative;
  z-index: 2;
  width: min(1460px, calc(100% - 120px));
  margin: 32px auto 0;
  padding-block: 18px;
  border-block: 1px solid rgba(166,58,43,0.15);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 0.65fr);
  gap: 32px;
  align-items: center;
}
.dcp-cultural-title { margin: 0 0 8px; font-size: 16px; color: #171717; }
.dcp-cultural-text { margin: 0; font-size: 14px; line-height: 1.8; color: #6e675e; }
.dcp-cultural-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.dcp-cultural-figure { margin: 0; min-width: 0; }
.dcp-cultural-image { display: block; width: 100%; height: auto; max-height: 100px; object-fit: contain; }
.iev-section { padding-bottom: 64px; }
.iev-stills { border-top: 1px solid rgba(166,58,43,0.2); color: #6e675e; }
.iev-stills summary { cursor: pointer; padding: 14px 0; font-size: 13px; line-height: 1.5; }
.iev-stills summary:focus-visible { outline: 2px solid #a63a2b; outline-offset: 3px; }
.iev-still-figure { margin: 12px 0 20px; }
.iev-still-image { display: block; width: 100%; height: auto; object-fit: contain; }
.iev-still-caption { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.mp-distilled { min-height: auto; padding: 96px 8% 72px; scroll-margin-top: 100px; }
.mp-distilled .dd-principles { margin-top: 32px; }
.mp-distilled .dd-title-block { margin-bottom: 24px; }
.mp-distilled .dd-divider { margin-block: 24px; }
.mp-design-objective { max-width: 52em; margin: 0 0 32px; font-size: 16px; line-height: 1.9; color: #565650; }
.ds-section.mp-distilled .ds-main { grid-template-columns: minmax(260px,0.85fr) minmax(0,1.15fr); }
.ds-interface-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; align-items: start; }
.ds-interface-example { margin: 0; min-width: 0; }
.ds-interface-example img { display: block; width: 100%; max-width: 210px; height: auto; margin-inline: auto; object-fit: contain; }
.ds-interface-title { margin: 20px 0 8px; font-size: 16px; font-weight: 500; color: #263426; }
.ds-interface-caption, .ds-interface-note { margin: 0; font-size: 14px; line-height: 1.8; color: #565650; }
.ds-interface-note { margin-bottom: 24px; }
@media(max-width:900px) {
  .ds-section.mp-distilled .ds-main { grid-template-columns: minmax(0,1fr); }
  .mp-distilled { padding-inline: 6%; }
}
@media(max-width:640px) {
  .dcp-cultural { width: calc(100% - 48px); grid-template-columns: minmax(0,1fr); gap: 18px; }
  .dcp-cultural-images { max-width: 360px; }
  .mp-distilled { padding: 88px 24px 56px; }
  .mp-design-objective { font-size: 14px; }
  .ds-interface-examples { gap: 18px; }
  .ds-interface-example img { max-width: 180px; }
  .ds-interface-caption { font-size: 13px; }
}