:root {
--sys-bg:                    var(--color-white);
--sys-color-surface:         var(--color-diagram-light-1);
--sys-color-surface-2:       var(--color-diagram-light-2);
--sys-color-ink:             var(--color-logo-black);
--sys-color-ink-soft:        var(--color-gray);
--sys-color-ink-faint:       rgb(1 1 1 / 0.55);
--sys-color-line:            rgb(1 1 1 / 0.12);
--sys-color-accent:          var(--color-blue-light);
--sys-color-accent-ink:      var(--color-diagram-blue);
--sys-color-on-dark:         var(--color-white);
--sys-color-on-dark-soft:    rgb(255 255 255 / 0.82);
--sys-card-panel-bg-alt:     var(--color-diagram-light-3);
--sys-radius-card:           var(--radius-lg);
--sys-radius-visual:         var(--radius-md);
--sys-radius-chip:           var(--radius-pill);
--sys-space-2:               var(--space-2);
--sys-space-3:               var(--space-3);
--sys-space-4:               var(--space-4);
--sys-space-5:               var(--space-5);
--sys-space-6:               var(--space-6);
--sys-space-7:               var(--space-7);
--sys-space-8:               var(--space-8);
--sys-font:                  var(--font-family-base);
--sys-fs-step:               var(--font-size-sm);
--sys-fs-eyebrow:            var(--font-size-sm);
--sys-fs-title:              var(--font-size-xl);
--sys-fs-intro-title:        clamp(2rem, 0.4rem + 3.7vw, 3.75rem);
--sys-fs-desc:               var(--font-size-base);
--sys-fs-point:              var(--font-size-sm);
--sys-fs-visual-label:       var(--font-size-sm);
--sys-lh-tight:              var(--line-height-tight);
--sys-lh-normal:             var(--line-height-base);
--sys-fw-regular:            var(--font-weight-regular);
--sys-fw-medium:             500;
--sys-fw-bold:               var(--font-weight-bold);
--sys-max-width:             75rem;
--sys-card-max-width:        540px;
--sys-card-width:            min(92vw, var(--sys-card-max-width));
--sys-card-height:           70svh;
--sys-card-aspect:           0.8;
--sys-card-pad:              28px 28px 26px;
--sys-card-gap:              14px;
--sys-media-ratio:           58%;
--sys-card-panel-bg:         var(--color-white);
--sys-card-panel-ink:        var(--sys-color-ink);
--sys-header-band:           16svh;
--sys-scale-active:          1;
--sys-scale-prev:            0.96;
--sys-scale-older:           0.92;
--sys-stack-offset:          26px;
--sys-prev-opacity:          0.72;
--sys-blur-prev:             1.5px;
--sys-blur-older:            4px;
--sys-title-scale-start:     1;
--sys-stage-height:          100svh;
--sys-scroll-per-card:       55svh;
--sys-scroll-final-hold:     60svh;
--sys-scroll-intro-hold:     28svh;
--sys-stack-top:             16.25rem;
--sys-stack-peek:            5.75rem;
--sys-stack-gap:             8svh;
--sys-stack-card-w:          min(92vw, 760px);
--sys-stack-img-aspect:      16 / 7;
--sys-stack-card-h:          min(34rem, calc(100svh - 21.75rem));
--sys-stack-end-room:        90svh;
--sys-stack-scroll-per-card: 55svh;
--sys-stack-hold-units:      0.9;
}
.system-story {
position: relative;
background-color: var(--sys-bg);
color: var(--sys-color-ink);
font-family: var(--sys-font);
padding-top: var(--space-9);
}
@media (max-width: 1023.98px) {
.system-story {
padding-top: var(--space-9);
padding-bottom: var(--sys-space-8);
}
.system-story__intro { padding: var(--sys-space-6) var(--sys-space-4) var(--sys-space-4); }
}
.system-story__track { position: relative; }
.system-story__stage { position: relative; width: 100%; }
.system-story__intro {
max-width: var(--sys-max-width);
margin: 0 auto;
padding: var(--sys-space-8) var(--sys-space-6) var(--sys-space-5);
text-align: center;
}
.system-story__eyebrow {
margin: 0 0 var(--sys-space-2);
font-size: var(--sys-fs-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: var(--sys-fw-medium);
color: var(--sys-color-accent-ink);
}
.system-story__intro-title {
margin: 0;
font-size: var(--sys-fs-intro-title);
line-height: var(--sys-lh-tight);
letter-spacing: -0.02em;
font-weight: var(--sys-fw-regular);
color: var(--sys-color-ink);
text-wrap: balance;
}
.system-story__lede {
margin: var(--sys-space-3) 0 0;
font-size: var(--sys-fs-desc);
line-height: var(--sys-lh-normal);
color: var(--sys-color-on-dark-soft);
max-width: 52ch;
}
.system-story__stack {
margin: 0 auto;
padding: var(--sys-space-5) var(--sys-space-6) var(--sys-space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sys-space-6);
}
.system-story__card {
width: var(--sys-card-width);
max-width: var(--sys-card-max-width);
height: var(--sys-card-height);
aspect-ratio: var(--sys-card-aspect);
}
.system-story__card-inner {
position: relative;
height: 100%;
border-radius: 20px;
overflow: hidden;
background: var(--surface-ink);
transition: opacity 0.4s var(--easing-standard, ease), filter 0.4s var(--easing-standard, ease);
}
.system-story__media {
position: absolute;
inset: 0;
}
.system-story__card.is-behind .system-story__card-inner {
opacity: 1;
filter: none;
}
.system-story__card.is-behind .system-story__img {
filter: blur(2px) brightness(0.3) saturate(0.55);
}
.system-story__card.is-behind .system-story__points,
.system-story__card.is-behind .system-story__desc {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--easing-premium, ease), visibility 0s linear 0.4s;
}
.system-story__img {
transition: filter 0.55s var(--easing-premium, ease);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 32%;
}
.system-story__card:nth-child(1) .system-story__img { object-position: 50% 30%; }
.system-story__card:nth-child(2) .system-story__img { object-position: 50% 42%; }
.system-story__card:nth-child(3) .system-story__img { object-position: 50% 34%; }
.system-story__card:nth-child(4) .system-story__img { object-position: 50% 30%; }
.system-story__card:nth-child(5) .system-story__img { object-position: 10% 0%; }
.system-story__card:nth-child(6) .system-story__img { object-position: 50% 36%; }
.system-story__visual-label {
font-size: var(--sys-fs-visual-label);
font-weight: var(--sys-fw-medium);
letter-spacing: 0.02em;
padding: var(--sys-space-2) var(--sys-space-4);
background: rgba(255, 255, 255, 0.82);
border-radius: var(--sys-radius-chip);
}
.system-story__media--flow {
align-items: center;
justify-content: center;
background: var(--sys-color-surface-2);
}
.system-story__flow {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sys-space-2);
align-items: center;
text-align: center;
color: var(--sys-color-ink-soft);
font-size: var(--sys-fs-point);
font-weight: var(--sys-fw-medium);
}
.system-story__flow li:not(:last-child)::after {
content: "\2193";
display: block;
margin-top: var(--sys-space-2);
color: var(--sys-color-accent);
}
.system-story__num {
display: inline;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
color: inherit;
font-variant-numeric: tabular-nums;
}
.system-story__body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--sys-space-6) var(--sys-space-5);
color: var(--text-on-dark-primary);
pointer-events: none;
background:
linear-gradient(to bottom, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.42) 20%, rgb(0 0 0 / 0) 44%),
linear-gradient(to bottom, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / 0.35) 62%, rgb(0 0 0 / 0.78) 100%);
}
.system-story__body::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
background: linear-gradient(
to bottom,
rgb(0 0 0 / 0.86) 0%,
rgb(0 0 0 / 0.7) 45%,
rgb(0 0 0 / 0.62) 100%
);
transition: opacity 0.55s var(--easing-premium, ease);
}
.system-story__card.is-behind .system-story__body::before { opacity: 1; }
.system-story__title {
margin: 0;
font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
line-height: var(--sys-lh-tight);
letter-spacing: -0.01em;
font-weight: var(--sys-fw-medium);
color: var(--text-on-dark-primary);
}
.system-story__desc {
margin: 0;
font-size: var(--sys-fs-point);
line-height: 1.45;
color: rgb(255 255 255 / 0.92);
max-width: 34ch;
-webkit-hyphens: none;
hyphens: none;
}
.system-story__points {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
width: 100%;
opacity: 1;
visibility: visible;
transition: opacity 0.4s var(--easing-premium, ease), visibility 0s linear 0s;
}
.system-story__points li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: var(--sys-fs-point);
line-height: 1.35;
color: rgb(255 255 255 / 0.9);
}
.system-story__points li::before {
content: "";
flex: none;
width: 6px;
height: 6px;
margin-top: 0.45em;
border-radius: 0;
background: var(--sys-color-accent);
}
.system-story__cta {
align-self: flex-start;
margin-top: var(--sys-space-4);
display: inline-flex;
align-items: center;
gap: var(--sys-space-2);
padding: 10px 18px;
font-size: var(--sys-fs-point);
font-weight: var(--sys-fw-medium);
line-height: 1;
color: var(--text-on-dark-primary);
background: var(--sys-color-accent);
border-radius: var(--sys-radius-chip);
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.system-story__cta:hover { background: var(--sys-color-accent-ink); }
.system-story__cta-arrow { transition: transform 0.2s ease; }
.system-story__cta:hover .system-story__cta-arrow { transform: translateX(3px); }
.system-story--enhanced .system-story__track {
height: calc(
100svh
+ var(--sys-scroll-intro-hold)
+ (var(--sys-scroll-per-card) * 6)
+ var(--sys-scroll-final-hold)
);
}
.system-story--enhanced .system-story__stage {
position: sticky;
top: 0;
height: var(--sys-stage-height);
overflow: hidden;
max-width: var(--container-max-width);
margin-inline: auto;
}
.system-story--enhanced .system-story__intro {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: var(--sys-space-3);
max-width: none;
margin: 0;
padding: 5.5rem var(--sys-space-6) var(--sys-space-4);
pointer-events: none;
}
.system-story--enhanced .system-story__eyebrow { margin-bottom: 0; }
.system-story--enhanced .system-story__intro-title {
font-size: clamp(2rem, 0.4rem + 3.7vw, 3.75rem);
line-height: 1.05;
text-align: center;
max-width: 30ch;
text-wrap: balance;
margin-inline: auto;
transform-origin: 50% 50%;
}
.system-story--enhanced .system-story__lede {
max-width: 52ch;
margin-inline: auto;
text-align: center;
}
.system-story--enhanced .system-story__stack {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0;
padding: 0;
display: block;
}
.system-story--enhanced .system-story__card {
position: absolute;
width: 28%;
max-width: none;
height: var(--sys-stack-card-h);
will-change: transform, opacity, filter;
transform-origin: 50% 50%;
backface-visibility: hidden;
}
.system-story--enhanced .system-story__card-inner {
box-shadow:
0 -5px 16px -6px rgba(0, 0, 0, 0.28),
0 24px 60px -26px rgba(0, 0, 0, 0.6);
}
.system-story--enhanced .system-story__media {
flex: 0 0 53%;
aspect-ratio: auto;
min-height: 0;
}
.system-story--enhanced .system-story__body {
padding-top: var(--sys-space-4);
}
.system-story--enhanced .system-story__card:nth-child(1) { left: 6%;  top: calc(var(--sys-stack-top) + 1rem); z-index: 1; }
.system-story--enhanced .system-story__card:nth-child(2) { left: 36%; top: calc(var(--sys-stack-top) + 1rem); z-index: 2; }
.system-story--enhanced .system-story__card:nth-child(3) { left: 66%; top: calc(var(--sys-stack-top) + 1rem); z-index: 3; }
.system-story--enhanced .system-story__card:nth-child(4) { left: 6%;  top: calc(var(--sys-stack-top) + var(--sys-stack-peek)); z-index: 4; }
.system-story--enhanced .system-story__card:nth-child(5) { left: 36%; top: calc(var(--sys-stack-top) + var(--sys-stack-peek)); z-index: 5; }
.system-story--enhanced .system-story__card:nth-child(6) { left: 66%; top: calc(var(--sys-stack-top) + var(--sys-stack-peek)); z-index: 6; }
@media (max-width: 1023.98px) {
.system-story--enhanced .system-story__track { height: auto; }
.system-story--enhanced .system-story__stage {
position: static;
height: auto;
overflow: visible;
}
.system-story--enhanced .system-story__intro {
position: static;
width: auto;
inset: auto;
align-items: center;
text-align: center;
padding: var(--sys-space-8) var(--sys-space-6) var(--sys-space-5);
pointer-events: auto;
}
.system-story--enhanced .system-story__intro-title { text-align: center; }
.system-story--enhanced .system-story__lede { max-width: 52ch; }
.system-story--enhanced .system-story__stack {
position: static;
inset: auto;
left: auto;
right: auto;
margin: 0 auto;
padding: var(--sys-space-5) var(--sys-space-6) var(--sys-space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sys-space-6);
}
.system-story--enhanced .system-story__card {
position: static;
margin-inline: auto;
margin-top: 0;
transform: none !important;
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.system-story--enhanced .system-story__card {
transform: none !important;
opacity: 1 !important;
}
}
@media (max-width: 1023.98px) {
.system-story .system-story__card {
height: auto;
aspect-ratio: auto;
min-height: min(125vw, 60svh);
display: flex;
flex-direction: column;
}
.system-story .system-story__card-inner {
height: auto;
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.system-story .system-story__body {
position: relative;
inset: auto;
flex: 1 1 auto;
}
.system-story .system-story__card-inner {
box-shadow: 0 12px 30px -20px rgb(1 1 1 / 0.55);
}
.system-story .system-story__title {
font-size: clamp(1.1rem, 0.92rem + 0.95vw, 1.4rem);
}
.system-story .system-story__body {
padding: var(--sys-space-5) var(--sys-space-4);
}
.system-story .system-story__points {
gap: 0.35rem;
max-width: 32ch;
}
.system-story .system-story__desc {
max-width: 32ch;
}
.system-story--pinned .system-story__track {
position: relative;
}
.system-story--pinned .system-story__stage {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.system-story--pinned .system-story__stack[data-swipe-carousel] {
overflow-x: auto;
scroll-snap-type: none;
}
.system-story--pinned .system-story__stack {
flex: 1 1 auto;
min-height: 0;
}
.system-story--pinned .system-story__card {
height: 100%;
min-height: 0;
max-height: none;
}
.system-story--pinned .system-story__stage {
justify-content: flex-start;
padding-top: 4.75rem;
}
.system-story--pinned .system-story__intro {
padding-block: var(--sys-space-3) var(--sys-space-3);
}
}