/*
 * YDD Connected System Journey
 * All selectors are intentionally scoped to .ydd-csj to avoid theme conflicts.
 */

.ydd-csj {
	--ydd-csj-bg: #07040f;
	--ydd-csj-bg-soft: #100825;
	--ydd-csj-panel: rgba(24, 15, 49, 0.68);
	--ydd-csj-panel-strong: rgba(17, 10, 37, 0.9);
	--ydd-csj-white: #ffffff;
	--ydd-csj-text: #f6f3ff;
	--ydd-csj-muted: #b9b1cc;
	--ydd-csj-purple: #785bff;
	--ydd-csj-purple-bright: #9b87ff;
	--ydd-csj-cyan: #18edf2;
	--ydd-csj-cyan-soft: #9afcff;
	--ydd-csj-line: rgba(190, 179, 255, 0.18);
	--ydd-csj-progress: 0;
	--ydd-csj-intro-opacity: 1;
	--ydd-csj-guide-opacity: 1;
	--ydd-csj-left-correction: 0px;
	position: relative;
	z-index: 1;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	color: var(--ydd-csj-text);
	background: var(--ydd-csj-bg);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ydd-csj *,
.ydd-csj *::before,
.ydd-csj *::after {
	box-sizing: border-box;
}

.ydd-csj img,
.ydd-csj svg,
.ydd-csj canvas {
	display: block;
}

.ydd-csj__scroll-track {
	position: relative;
	height: 540vh;
	min-height: 3200px;
	background:
		radial-gradient(circle at 50% 26%, rgba(82, 44, 190, 0.16), transparent 38%),
		linear-gradient(180deg, #080411 0%, #090414 48%, #05030b 100%);
}

.ydd-csj__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: #07040f;
}

.ydd-csj__atmosphere,
.ydd-csj__canvas,
.ydd-csj__fallback-system,
.ydd-csj__phase-layer,
.ydd-csj__module-map {
	position: absolute;
	inset: 0;
}

.ydd-csj__atmosphere {
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
	background-size: 84px 84px;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 85%, transparent);
	mask-image: linear-gradient(to bottom, transparent, black 20%, black 85%, transparent);
}

.ydd-csj__atmosphere::before,
.ydd-csj__atmosphere::after {
	content: "";
	position: absolute;
	left: 50%;
	width: min(92vw, 1320px);
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

.ydd-csj__atmosphere::before {
	top: 8%;
	height: 68%;
	border: 1px solid rgba(120, 91, 255, 0.12);
	box-shadow:
		0 0 100px rgba(87, 48, 197, 0.08) inset,
		0 0 160px rgba(24, 237, 242, 0.035);
	transform: translateX(-50%) perspective(800px) rotateX(68deg);
}

.ydd-csj__atmosphere::after {
	bottom: -44%;
	height: 72%;
	background: radial-gradient(circle, rgba(83, 50, 180, 0.22), transparent 66%);
	filter: blur(42px);
}

.ydd-csj__aurora {
	position: absolute;
	width: 58vw;
	height: 58vw;
	border-radius: 999px;
	filter: blur(110px);
	opacity: 0.18;
	will-change: transform;
}

.ydd-csj__aurora--one {
	top: -30%;
	left: -18%;
	background: #6d42ff;
	animation: ydd-csj-aurora-one 16s ease-in-out infinite alternate;
}

.ydd-csj__aurora--two {
	right: -28%;
	bottom: -38%;
	background: #04dce6;
	opacity: 0.1;
	animation: ydd-csj-aurora-two 18s ease-in-out infinite alternate;
}

.ydd-csj__noise {
	position: absolute;
	inset: 0;
	opacity: 0.16;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}

.ydd-csj__canvas {
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	outline: 0;
	pointer-events: none;
	transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ydd-csj--enhanced .ydd-csj__canvas {
	opacity: 1;
}

/* Elegant, dependency-free fallback remains visible until WebGL is ready. */
.ydd-csj__fallback-system {
	z-index: 1;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	width: min(70vw, 980px);
	height: min(58vw, 720px);
	min-width: 700px;
	min-height: 500px;
	transform: translate(-50%, -43%) perspective(1000px) rotateX(4deg);
	transform-style: preserve-3d;
	opacity: 0.92;
	transition: opacity 600ms ease, visibility 600ms ease;
	pointer-events: none;
}

.ydd-csj--enhanced .ydd-csj__fallback-system {
	opacity: 0;
	visibility: hidden;
}

.ydd-csj__fallback-orbit {
	position: absolute;
	inset: 11% 13%;
	border: 1px solid rgba(24, 237, 242, 0.2);
	border-radius: 50%;
	box-shadow: 0 0 48px rgba(24, 237, 242, 0.06);
	transform: rotate(-8deg);
}

.ydd-csj__fallback-browser {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 360px;
	height: 225px;
	padding: 46px 34px 28px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 24px;
	background: linear-gradient(145deg, rgba(31, 20, 62, 0.95), rgba(11, 7, 25, 0.9));
	box-shadow: 0 38px 100px rgba(0, 0, 0, 0.56), 0 0 70px rgba(111, 76, 255, 0.14);
	transform: translate(-50%, -50%) rotateY(-10deg) translateZ(70px);
}

.ydd-csj__fallback-browser-bar {
	position: absolute;
	top: 17px;
	left: 20px;
	right: 20px;
	height: 12px;
	border-radius: 10px;
	background:
		radial-gradient(circle at 6px 6px, #ff7890 0 3px, transparent 3.5px),
		radial-gradient(circle at 19px 6px, #ffd66f 0 3px, transparent 3.5px),
		radial-gradient(circle at 32px 6px, var(--ydd-csj-cyan) 0 3px, transparent 3.5px),
		linear-gradient(90deg, transparent 0 48px, rgba(255, 255, 255, 0.08) 48px);
}

.ydd-csj__fallback-browser-line {
	display: block;
	width: 56%;
	height: 10px;
	margin: 12px 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.15);
}

.ydd-csj__fallback-browser-line--wide {
	width: 88%;
	height: 18px;
	background: rgba(255, 255, 255, 0.85);
}

.ydd-csj__fallback-browser-button {
	display: block;
	width: 94px;
	height: 30px;
	margin-top: 26px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--ydd-csj-cyan), #70fbff);
	box-shadow: 0 0 28px rgba(24, 237, 242, 0.32);
}

.ydd-csj__fallback-core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 94px;
	height: 94px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(24, 237, 242, 0.56);
	border-radius: 30px;
	background: rgba(18, 10, 42, 0.9);
	box-shadow: 0 0 70px rgba(24, 237, 242, 0.2);
	transform: translate(-50%, -50%) translateZ(-5px);
}

.ydd-csj__fallback-core img {
	width: 66px;
	height: 66px;
	border-radius: 19px;
	object-fit: cover;
}

.ydd-csj__fallback-core span {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ydd-csj__fallback-node {
	position: absolute;
	min-width: 140px;
	padding: 12px 15px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 13px;
	color: rgba(255, 255, 255, 0.74);
	background: rgba(21, 13, 43, 0.78);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

.ydd-csj__fallback-node--inquiry { left: 3%; top: 20%; }
.ydd-csj__fallback-node--record { left: 38%; top: 3%; }
.ydd-csj__fallback-node--booking { right: 4%; top: 20%; }
.ydd-csj__fallback-node--payment { right: 0; top: 53%; }
.ydd-csj__fallback-node--access { right: 16%; bottom: 4%; }
.ydd-csj__fallback-node--team { left: 17%; bottom: 3%; }
.ydd-csj__fallback-node--followup { left: 0; top: 56%; }

.ydd-csj__hud {
	position: absolute;
	z-index: 8;
	top: max(28px, calc(env(safe-area-inset-top) + 18px));
	left: clamp(22px, 4vw, 72px);
	right: clamp(22px, 4vw, 72px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	color: rgba(255, 255, 255, 0.56);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}

.ydd-csj__hud-brand,
.ydd-csj__hud-status {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ydd-csj__hud-status strong {
	min-width: 48px;
	color: var(--ydd-csj-cyan-soft);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ydd-csj__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 0 5px rgba(24, 237, 242, 0.09), 0 0 16px rgba(24, 237, 242, 0.72);
	animation: ydd-csj-live 2s ease-in-out infinite;
}

.ydd-csj__intro {
	position: absolute;
	z-index: 7;
	left: 50%;
	top: 50%;
	width: min(88vw, 930px);
	transform: translate(-50%, -54%) translateY(calc((1 - var(--ydd-csj-intro-opacity)) * -28px));
	opacity: var(--ydd-csj-intro-opacity);
	text-align: center;
	pointer-events: none;
	will-change: opacity, transform;
}

.ydd-csj__eyebrow {
	margin: 0 0 18px;
	color: var(--ydd-csj-cyan-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ydd-csj__intro h2,
.ydd-csj__resolution h3,
.ydd-csj__phase h3 {
	margin: 0;
	color: var(--ydd-csj-white);
	font-weight: 650;
	letter-spacing: -0.04em;
}

.ydd-csj__intro h2 {
	font-size: clamp(42px, 6.1vw, 92px);
	line-height: 0.98;
	text-wrap: balance;
}

.ydd-csj__intro h2 > span {
	display: block;
}

.ydd-csj__headline-accent {
	padding-bottom: 0.06em;
	color: transparent;
	background: linear-gradient(98deg, #ffffff 2%, #c9c0ff 42%, #72f9fc 96%);
	-webkit-background-clip: text;
	background-clip: text;
}

.ydd-csj__intro-copy {
	width: min(100%, 690px);
	margin: 27px auto 0;
	color: var(--ydd-csj-muted);
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.7;
	text-wrap: balance;
}

.ydd-csj__scroll-guide {
	position: absolute;
	z-index: 9;
	left: 50%;
	bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px));
	display: grid;
	grid-template-columns: 24px auto 18px;
	align-items: center;
	gap: 15px;
	max-width: calc(100vw - 44px);
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 999px;
	background: rgba(10, 6, 22, 0.72);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(103, 70, 255, 0.07) inset;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	transform: translateX(-50%) translateY(calc((1 - var(--ydd-csj-guide-opacity)) * 18px));
	opacity: var(--ydd-csj-guide-opacity);
	pointer-events: none;
	will-change: opacity, transform;
}

.ydd-csj__mouse {
	position: relative;
	width: 20px;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, 0.48);
	border-radius: 12px;
}

.ydd-csj__mouse span {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 3px;
	height: 6px;
	border-radius: 4px;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 9px rgba(24, 237, 242, 0.7);
	transform: translateX(-50%);
	animation: ydd-csj-wheel 1.6s ease-in-out infinite;
}

.ydd-csj__scroll-guide-copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.ydd-csj__scroll-guide-copy strong {
	grid-area: 1 / 1;
	color: #fff;
	font-size: 12px;
	font-weight: 780;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
	transition: opacity 350ms ease, transform 350ms ease;
}

.ydd-csj__scroll-after {
	opacity: 0;
	transform: translateY(5px);
}

.ydd-csj[data-started="true"] .ydd-csj__scroll-before {
	opacity: 0;
	transform: translateY(-5px);
}

.ydd-csj[data-started="true"] .ydd-csj__scroll-after {
	opacity: 1;
	transform: none;
}

.ydd-csj__scroll-guide-copy span {
	overflow: hidden;
	color: rgba(255, 255, 255, 0.58);
	font-size: 11px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ydd-csj__scroll-arrow {
	display: grid;
	gap: 1px;
}

.ydd-csj__scroll-arrow span {
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--ydd-csj-cyan);
	border-bottom: 1px solid var(--ydd-csj-cyan);
	transform: rotate(45deg);
	animation: ydd-csj-arrow 1.7s ease-in-out infinite;
}

.ydd-csj__scroll-arrow span:nth-child(2) { animation-delay: 110ms; }
.ydd-csj__scroll-arrow span:nth-child(3) { animation-delay: 220ms; }

.ydd-csj__phase-layer {
	z-index: 6;
	pointer-events: none;
}

.ydd-csj__phase {
	--ydd-card-clip: 55%;
	--ydd-phase-opacity: 0;
	position: absolute;
	top: 50%;
	width: min(36vw, 500px);
	padding: 25px 26px 27px;
	border: 1px solid rgba(255, 255, 255, calc(0.04 + var(--ydd-phase-opacity) * 0.12));
	border-radius: 22px;
	background: rgba(10, 6, 23, calc(var(--ydd-phase-opacity) * 0.64));
	box-shadow: 0 30px 80px rgba(0, 0, 0, calc(var(--ydd-phase-opacity) * 0.28));
	-webkit-backdrop-filter: blur(calc(var(--ydd-phase-opacity) * 18px));
	backdrop-filter: blur(calc(var(--ydd-phase-opacity) * 18px));
	opacity: var(--ydd-phase-opacity);
	will-change: opacity, transform;
}

.ydd-csj__phase--left {
	left: clamp(24px, 7vw, 120px);
	transform: translateY(-50%) translateX(calc((1 - var(--ydd-phase-opacity)) * -34px));
}

.ydd-csj__phase--right {
	right: clamp(56px, 9vw, 150px);
	transform: translateY(-50%) translateX(calc((1 - var(--ydd-phase-opacity)) * 34px));
}

.ydd-csj__phase--center {
	left: 50%;
	top: auto;
	bottom: 13%;
	width: min(82vw, 760px);
	text-align: center;
	transform: translateX(-50%) translateY(calc((1 - var(--ydd-phase-opacity)) * 28px));
}

.ydd-csj__phase-index {
	margin: 0 0 13px;
	color: var(--ydd-csj-cyan-soft);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.17em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ydd-csj__phase h3 {
	font-size: clamp(28px, 3.25vw, 52px);
	line-height: 1.06;
	text-wrap: balance;
}

.ydd-csj__phase > p:last-child {
	margin: 16px 0 0;
	color: var(--ydd-csj-muted);
	font-size: clamp(14px, 1.1vw, 17px);
	line-height: 1.68;
}

.ydd-csj__module-map {
	z-index: 5;
	pointer-events: none;
}

.ydd-csj__module-label {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 11px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.66);
	background: rgba(9, 5, 20, 0.7);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 9px;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 500ms ease;
}

.ydd-csj__module-label i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 10px rgba(24, 237, 242, 0.86);
}

.ydd-csj__module-label[data-module="inquiry"] { left: 15%; top: 29%; }
.ydd-csj__module-label[data-module="record"] { left: 39%; top: 18%; }
.ydd-csj__module-label[data-module="booking"] { right: 15%; top: 29%; }
.ydd-csj__module-label[data-module="payment"] { right: 10%; top: 52%; }
.ydd-csj__module-label[data-module="access"] { right: 23%; bottom: 20%; }
.ydd-csj__module-label[data-module="team"] { left: 24%; bottom: 19%; }
.ydd-csj__module-label[data-module="followup"] { left: 10%; top: 55%; }

.ydd-csj[data-active-phase="1"] .ydd-csj__module-label[data-module="inquiry"],
.ydd-csj[data-active-phase="1"] .ydd-csj__module-label[data-module="record"],
.ydd-csj[data-active-phase="2"] .ydd-csj__module-label,
.ydd-csj[data-active-phase="3"] .ydd-csj__module-label,
.ydd-csj[data-active-phase="4"] .ydd-csj__module-label {
	opacity: 1;
	transform: none;
}

.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="payment"],
.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="access"],
.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="team"] {
	color: #fff;
	border-color: rgba(24, 237, 242, 0.25);
}

.ydd-csj__rail {
	position: absolute;
	z-index: 9;
	top: 50%;
	right: clamp(18px, 3vw, 50px);
	display: grid;
	grid-template-rows: repeat(5, 30px);
	gap: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}

.ydd-csj__rail-line {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255, 255, 255, 0.12);
	transform: translateX(-50%);
}

.ydd-csj__rail-line i {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--ydd-csj-purple), var(--ydd-csj-cyan));
	box-shadow: 0 0 12px rgba(24, 237, 242, 0.4);
	transform: scaleY(var(--ydd-csj-progress));
	transform-origin: top;
}

.ydd-csj__rail-point {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.34);
	background: #0b0618;
	font-size: 8px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.ydd-csj__rail-point.is-active,
.ydd-csj__rail-point.is-complete {
	color: #fff;
	border-color: rgba(24, 237, 242, 0.5);
}

.ydd-csj__rail-point.is-active {
	box-shadow: 0 0 0 5px rgba(24, 237, 242, 0.08), 0 0 18px rgba(24, 237, 242, 0.2);
	transform: scale(1.08);
}

.ydd-csj__screen-reader-narrative {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ydd-csj__resolution {
	position: relative;
	min-height: 94vh;
	display: grid;
	align-items: center;
	overflow: hidden;
	padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 96px);
	background:
		radial-gradient(circle at 18% 50%, rgba(111, 76, 255, 0.2), transparent 35%),
		radial-gradient(circle at 86% 26%, rgba(24, 237, 242, 0.08), transparent 26%),
		linear-gradient(155deg, #0b0618 0%, #100828 52%, #07040e 100%);
}

.ydd-csj__resolution::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 150px;
	background: linear-gradient(to bottom, #05030b, transparent);
	pointer-events: none;
}

.ydd-csj__resolution-grid {
	position: absolute;
	inset: 0;
	opacity: 0.24;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 70px 70px;
	-webkit-mask-image: radial-gradient(circle at center, black, transparent 73%);
	mask-image: radial-gradient(circle at center, black, transparent 73%);
}

.ydd-csj__resolution-inner {
	position: relative;
	z-index: 2;
	width: min(100%, 1240px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(280px, 0.7fr) minmax(430px, 1.3fr);
	align-items: center;
	gap: clamp(58px, 8vw, 130px);
}

.ydd-csj__resolution-mark {
	position: relative;
	width: min(31vw, 330px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin: 0 auto;
	border-radius: 34%;
	background: rgba(19, 11, 42, 0.42);
	box-shadow: 0 0 110px rgba(112, 76, 255, 0.16);
}

.ydd-csj__resolution-mark::before,
.ydd-csj__resolution-mark::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 32%;
	transform: rotate(45deg);
}

.ydd-csj__resolution-mark::after {
	inset: -3%;
	border-color: rgba(24, 237, 242, 0.09);
	animation: ydd-csj-mark-spin 20s linear infinite;
}

.ydd-csj__resolution-mark img {
	position: relative;
	z-index: 2;
	width: 42%;
	height: 42%;
	border-radius: 24%;
	object-fit: cover;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34), 0 0 48px rgba(24, 237, 242, 0.15);
}

.ydd-csj__resolution-mark strong {
	position: relative;
	z-index: 2;
	font-size: clamp(28px, 4vw, 52px);
	letter-spacing: -0.04em;
}

.ydd-csj__resolution-ring {
	position: absolute;
	inset: 23%;
	border: 1px solid rgba(24, 237, 242, 0.48);
	border-radius: 50%;
	box-shadow: 0 0 46px rgba(24, 237, 242, 0.12), 0 0 28px rgba(24, 237, 242, 0.08) inset;
	animation: ydd-csj-ring-pulse 3s ease-in-out infinite;
}

.ydd-csj__resolution-copy {
	max-width: 720px;
}

.ydd-csj__resolution h3 {
	font-size: clamp(39px, 5.2vw, 72px);
	line-height: 1.02;
	text-wrap: balance;
}

.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
	max-width: 660px;
	margin: 26px 0 0;
	color: var(--ydd-csj-muted);
	font-size: clamp(16px, 1.45vw, 20px);
	line-height: 1.75;
}

.ydd-csj__trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.ydd-csj__trust-row span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.78);
	background: rgba(255, 255, 255, 0.035);
	font-size: 12px;
	font-weight: 650;
}

.ydd-csj__trust-row i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 9px rgba(24, 237, 242, 0.68);
}

.ydd-csj__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 37px;
}

.ydd-csj__button {
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 13px 20px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 760;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}

.ydd-csj__button svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	transition: transform 240ms ease;
}

.ydd-csj__button--primary,
.ydd-csj__button--primary:visited {
	color: #090414 !important;
	background: linear-gradient(135deg, #ffffff 0%, #d8feff 48%, #77f8fb 100%);
	box-shadow: 0 14px 38px rgba(24, 237, 242, 0.14);
}

.ydd-csj__button--secondary,
.ydd-csj__button--secondary:visited {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.045);
}

.ydd-csj__button:hover,
.ydd-csj__button:focus-visible {
	transform: translateY(-2px);
}

.ydd-csj__button--primary:hover,
.ydd-csj__button--primary:focus-visible {
	color: #07030f !important;
	background: linear-gradient(135deg, #ffffff 0%, #c9feff 44%, #55f2f7 100%);
	box-shadow: 0 18px 50px rgba(24, 237, 242, 0.24);
}

.ydd-csj__button--secondary:hover,
.ydd-csj__button--secondary:focus-visible {
	color: #fff !important;
	border-color: rgba(24, 237, 242, 0.44);
	background: rgba(24, 237, 242, 0.07);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.ydd-csj__button:hover svg,
.ydd-csj__button:focus-visible svg {
	transform: translateX(3px);
}

.ydd-csj__button:focus-visible {
	outline: 3px solid rgba(24, 237, 242, 0.4);
	outline-offset: 4px;
}

.ydd-csj--fallback .ydd-csj__scroll-track {
	height: auto;
	min-height: 0;
}

.ydd-csj--fallback .ydd-csj__sticky {
	position: relative;
	height: auto;
	min-height: 940px;
	padding: 130px 24px 100px;
}

.ydd-csj--fallback .ydd-csj__canvas,
.ydd-csj--fallback .ydd-csj__rail,
.ydd-csj--fallback .ydd-csj__module-map,
.ydd-csj--fallback .ydd-csj__scroll-guide {
	display: none;
}

.ydd-csj--fallback .ydd-csj__intro {
	position: relative;
	left: auto;
	top: auto;
	width: min(100%, 920px);
	margin: 0 auto;
	transform: none;
	opacity: 1;
}

.ydd-csj--fallback .ydd-csj__fallback-system {
	position: relative;
	left: 50%;
	top: auto;
	right: auto;
	bottom: auto;
	margin: 60px 0 20px;
	transform: translateX(-50%) scale(0.84);
	opacity: 1;
	visibility: visible;
}

.ydd-csj--fallback .ydd-csj__phase-layer {
	position: relative;
	inset: auto;
	width: min(100%, 1180px);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 10px auto 0;
}

.ydd-csj--fallback .ydd-csj__phase {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	width: auto;
	padding: 22px;
	border-color: rgba(255, 255, 255, 0.11);
	background: rgba(19, 11, 40, 0.7);
	box-shadow: none;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 1;
	transform: none;
	text-align: left;
}

.ydd-csj--fallback .ydd-csj__phase:last-child {
	grid-column: 1 / -1;
	text-align: center;
}

@keyframes ydd-csj-wheel {
	0% { opacity: 0; transform: translate(-50%, -1px); }
	28% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, 9px); }
}

@keyframes ydd-csj-arrow {
	0%, 100% { opacity: 0.2; transform: translateY(-2px) rotate(45deg); }
	45% { opacity: 1; }
	70% { transform: translateY(2px) rotate(45deg); }
}

@keyframes ydd-csj-live {
	0%, 100% { opacity: 0.55; transform: scale(0.82); }
	50% { opacity: 1; transform: scale(1); }
}

@keyframes ydd-csj-aurora-one {
	from { transform: translate3d(-3%, -3%, 0) scale(0.94); }
	to { transform: translate3d(12%, 8%, 0) scale(1.08); }
}

@keyframes ydd-csj-aurora-two {
	from { transform: translate3d(8%, 8%, 0) scale(0.9); }
	to { transform: translate3d(-12%, -6%, 0) scale(1.08); }
}

@keyframes ydd-csj-mark-spin {
	to { transform: rotate(405deg); }
}

@keyframes ydd-csj-ring-pulse {
	0%, 100% { opacity: 0.55; transform: scale(0.94); }
	50% { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 1100px) {
	.ydd-csj__phase {
		width: min(42vw, 460px);
	}

	.ydd-csj__phase--left { left: clamp(22px, 5vw, 70px); }
	.ydd-csj__phase--right { right: clamp(54px, 7vw, 90px); }

	.ydd-csj__module-label {
		font-size: 8px;
	}

	.ydd-csj__resolution-inner {
		grid-template-columns: minmax(240px, 0.62fr) minmax(400px, 1.38fr);
	}
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 470vh;
		min-height: 2800px;
	}

	.ydd-csj__sticky {
		min-height: 520px;
	}

	.ydd-csj__atmosphere {
		background-size: 54px 54px;
	}

	.ydd-csj__hud {
		top: max(18px, calc(env(safe-area-inset-top) + 12px));
		left: 17px;
		right: 17px;
		font-size: 8px;
		letter-spacing: 0.12em;
	}

	.ydd-csj__hud-status > span {
		display: none;
	}

	.ydd-csj__intro {
		top: 43%;
		width: calc(100% - 34px);
	}

	.ydd-csj__intro h2 {
		font-size: clamp(38px, 12vw, 62px);
		line-height: 1.01;
	}

	.ydd-csj__intro-copy {
		width: min(100%, 540px);
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.62;
	}

	.ydd-csj__eyebrow {
		margin-bottom: 13px;
		font-size: 9px;
		letter-spacing: 0.16em;
	}

	.ydd-csj__scroll-guide {
		bottom: max(23px, calc(env(safe-area-inset-bottom) + 16px));
		grid-template-columns: 20px minmax(0, 1fr) 12px;
		gap: 11px;
		width: calc(100% - 34px);
		max-width: 480px;
		padding: 11px 13px;
		border-radius: 18px;
	}

	.ydd-csj__mouse {
		width: 18px;
		height: 27px;
	}

	.ydd-csj__scroll-guide-copy strong {
		font-size: 10px;
	}

	.ydd-csj__scroll-guide-copy span {
		font-size: 9px;
	}

	.ydd-csj__scroll-arrow span {
		width: 6px;
		height: 6px;
	}

	.ydd-csj__phase {
		left: 50%;
		right: auto;
		top: auto;
		bottom: max(78px, calc(env(safe-area-inset-bottom) + 66px));
		width: calc(100% - 48px);
		max-width: 560px;
		padding: 19px 20px 20px;
		text-align: left;
		transform: translateX(-50%) translateY(calc((1 - var(--ydd-phase-opacity)) * 22px));
	}

	.ydd-csj__phase,
	.ydd-csj__phase--left,
	.ydd-csj__phase--right,
	.ydd-csj__phase--center {
		left: 50%;
		right: auto;
		top: auto;
	}

	.ydd-csj__phase--center {
		bottom: max(78px, calc(env(safe-area-inset-bottom) + 66px));
		text-align: center;
	}

	.ydd-csj__phase-index {
		margin-bottom: 9px;
		font-size: 8px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(25px, 7.3vw, 36px);
		line-height: 1.08;
	}

	.ydd-csj__phase > p:last-child {
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.55;
	}

	.ydd-csj__module-map {
		display: none;
	}

	.ydd-csj__rail {
		top: 50%;
		right: 9px;
		grid-template-rows: repeat(5, 24px);
		gap: 6px;
	}

	.ydd-csj__rail-point {
		width: 24px;
		height: 24px;
		font-size: 7px;
	}

	.ydd-csj__fallback-system {
		min-width: 650px;
		min-height: 470px;
		transform: translate(-50%, -45%) perspective(1000px) rotateX(4deg) scale(0.62);
	}

	.ydd-csj__resolution {
		min-height: 0;
		padding: 110px 22px 92px;
	}

	.ydd-csj__resolution-inner {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.ydd-csj__resolution-mark {
		width: min(64vw, 290px);
	}

	.ydd-csj__resolution-copy {
		max-width: 680px;
		margin: 0 auto;
		text-align: center;
	}

	.ydd-csj__resolution h3 {
		font-size: clamp(38px, 10.8vw, 60px);
	}

	.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
		margin-inline: auto;
		font-size: 16px;
		line-height: 1.68;
	}

	.ydd-csj__trust-row,
	.ydd-csj__actions {
		justify-content: center;
	}

	.ydd-csj__button {
		width: min(100%, 440px);
	}

	.ydd-csj--fallback .ydd-csj__sticky {
		min-height: 0;
		padding: 110px 18px 80px;
	}

	.ydd-csj--fallback .ydd-csj__fallback-system {
		margin-block: 15px -55px;
		transform: translateX(-50%) scale(0.6);
	}

	.ydd-csj--fallback .ydd-csj__phase-layer {
		grid-template-columns: 1fr;
	}

	.ydd-csj--fallback .ydd-csj__phase:last-child {
		grid-column: auto;
	}
}

@media (max-width: 420px) {
	.ydd-csj__intro h2 {
		font-size: clamp(35px, 11.6vw, 49px);
	}

	.ydd-csj__scroll-guide-copy span {
		max-width: 230px;
	}

	.ydd-csj__phase {
		width: calc(100% - 38px);
	}

	.ydd-csj__trust-row span {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj *,
	.ydd-csj *::before,
	.ydd-csj *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media (forced-colors: active) {
	.ydd-csj__canvas,
	.ydd-csj__atmosphere {
		display: none;
	}

	.ydd-csj__button,
	.ydd-csj__phase,
	.ydd-csj__scroll-guide {
		border: 1px solid CanvasText;
	}
}

/*
 * V2 — cinematic system reveal.
 * These rules intentionally sit after the resilient base/fallback layer so the
 * enhanced treatment can evolve without sacrificing broad theme compatibility.
 */
.ydd-csj {
	--ydd-csj-bg: #030207;
	--ydd-csj-bg-soft: #0b0618;
	--ydd-csj-purple: #7654ff;
	--ydd-csj-purple-bright: #ab96ff;
	--ydd-csj-cyan: #49f7fa;
	--ydd-csj-cyan-soft: #b6feff;
	--ydd-csj-muted: #b8b2c7;
	width: 100vw !important;
	max-width: 100vw !important;
	left: calc(-1 * var(--ydd-csj-left-correction));
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	overflow: clip;
	background: #030207;
}

.ydd-csj__scroll-track {
	height: 620vh;
	min-height: 3900px;
	background:
		radial-gradient(circle at 50% 14%, rgba(102, 66, 255, 0.15), transparent 30%),
		radial-gradient(circle at 52% 70%, rgba(30, 234, 244, 0.055), transparent 30%),
		linear-gradient(180deg, #05020b 0%, #070310 44%, #030207 100%);
}

.ydd-csj__sticky {
	min-height: 620px;
	background:
		radial-gradient(circle at 50% 48%, rgba(74, 42, 148, 0.09), transparent 38%),
		#030207;
}

.ydd-csj__atmosphere {
	background:
		linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse at center, black 10%, rgba(0, 0, 0, 0.76) 57%, transparent 88%);
	mask-image: radial-gradient(ellipse at center, black 10%, rgba(0, 0, 0, 0.76) 57%, transparent 88%);
}

.ydd-csj__atmosphere::before {
	top: 12%;
	height: 78%;
	border-color: rgba(140, 116, 255, 0.08);
	box-shadow:
		0 0 180px rgba(101, 61, 234, 0.065) inset,
		0 0 220px rgba(24, 237, 242, 0.025);
}

.ydd-csj__aurora {
	opacity: 0.13;
	filter: blur(145px);
}

.ydd-csj__depth-field,
.ydd-csj__cinematic-frame,
.ydd-csj__stage-words {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ydd-csj__depth-field {
	z-index: 1;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	width: min(100vw, 1500px);
	aspect-ratio: 1.7;
	transform: translate(-50%, -50%) perspective(900px) rotateX(69deg) scale(calc(0.88 + var(--ydd-csj-progress) * 0.28));
	transform-style: preserve-3d;
	opacity: calc(0.08 + var(--ydd-csj-progress) * 0.16);
}

.ydd-csj__depth-field span {
	position: absolute;
	inset: calc(var(--ring, 0) * 7%);
	border: 1px solid rgba(119, 94, 255, 0.13);
	border-radius: 50%;
	box-shadow: 0 0 60px rgba(75, 247, 250, 0.025);
}

.ydd-csj__depth-field span:nth-child(1) { --ring: 0; }
.ydd-csj__depth-field span:nth-child(2) { --ring: 1; }
.ydd-csj__depth-field span:nth-child(3) { --ring: 2; }
.ydd-csj__depth-field span:nth-child(4) { --ring: 3; }
.ydd-csj__depth-field span:nth-child(5) { --ring: 4; }

.ydd-csj__cinematic-frame {
	z-index: 13;
	inset: clamp(14px, 2vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.035);
}

.ydd-csj__corner {
	position: absolute;
	width: 42px;
	height: 42px;
	border-color: rgba(194, 185, 255, 0.38);
	border-style: solid;
	filter: drop-shadow(0 0 9px rgba(93, 239, 247, 0.12));
}

.ydd-csj__corner--tl { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.ydd-csj__corner--tr { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.ydd-csj__corner--bl { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.ydd-csj__corner--br { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.ydd-csj__frame-scan {
	position: absolute;
	top: -1px;
	left: calc(var(--ydd-csj-progress) * 100%);
	width: 86px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ydd-csj-cyan), transparent);
	box-shadow: 0 0 15px rgba(73, 247, 250, 0.5);
	transform: translateX(-50%);
	opacity: calc(0.2 + var(--ydd-csj-progress) * 0.8);
}

.ydd-csj__canvas {
	z-index: 3;
	filter: saturate(1.08) contrast(1.035);
}

.ydd-csj__hud {
	z-index: 14;
	top: max(25px, calc(env(safe-area-inset-top) + 17px));
	left: clamp(29px, 3.2vw, 58px);
	right: clamp(29px, 3.2vw, 58px);
	font-size: 9px;
	letter-spacing: 0.22em;
}

.ydd-csj__hud-brand::after {
	content: "SYS / 001";
	margin-left: 9px;
	padding-left: 13px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.26);
}

.ydd-csj__hud-status strong {
	padding: 5px 8px;
	border: 1px solid rgba(73, 247, 250, 0.16);
	border-radius: 4px;
	background: rgba(73, 247, 250, 0.035);
}

.ydd-csj__intro {
	z-index: 10;
	top: 48%;
	width: min(92vw, 1160px);
	transform: translate(-50%, -52%) translateY(calc((1 - var(--ydd-csj-intro-opacity)) * -42px)) scale(calc(0.985 + var(--ydd-csj-intro-opacity) * 0.015));
}

.ydd-csj__intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 46%;
	width: 78%;
	height: 165%;
	background: radial-gradient(ellipse, rgba(3, 2, 7, 0.78), transparent 69%);
	transform: translate(-50%, -50%);
}

.ydd-csj__eyebrow {
	margin-bottom: 20px;
	font-size: 10px;
	font-weight: 740;
	letter-spacing: 0.31em;
}

.ydd-csj__intro h2 {
	font-size: clamp(54px, 7.35vw, 118px);
	font-weight: 580;
	letter-spacing: -0.058em;
	line-height: 0.89;
}

.ydd-csj__headline-accent {
	background-image: linear-gradient(103deg, #ffffff 4%, #d3c9ff 41%, #63fbff 89%);
	filter: drop-shadow(0 16px 34px rgba(75, 239, 246, 0.08));
}

.ydd-csj__intro-copy {
	width: min(100%, 725px);
	margin-top: 31px;
	color: rgba(231, 226, 243, 0.72);
	font-size: clamp(16px, 1.28vw, 20px);
	line-height: 1.62;
}

.ydd-csj__scroll-guide {
	z-index: 15;
	bottom: max(33px, calc(env(safe-area-inset-bottom) + 22px));
	grid-template-columns: 58px minmax(270px, auto) 19px;
	gap: 18px;
	width: min(650px, calc(100vw - 72px));
	padding: 13px 17px 13px 13px;
	border-color: rgba(255, 255, 255, 0.15);
	border-radius: 18px;
	background:
		linear-gradient(120deg, rgba(22, 13, 43, 0.86), rgba(7, 4, 15, 0.86)),
		rgba(6, 3, 13, 0.92);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(116, 86, 255, 0.045) inset,
		0 0 70px rgba(89, 62, 203, 0.08) inset;
	-webkit-backdrop-filter: blur(24px) saturate(1.25);
	backdrop-filter: blur(24px) saturate(1.25);
	transform: translateX(-50%) translateY(calc((1 - var(--ydd-csj-guide-opacity)) * 24px));
}

.ydd-csj__scroll-guide::before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--ydd-csj-purple), var(--ydd-csj-cyan));
	box-shadow: 0 0 15px rgba(73, 247, 250, 0.3);
	transform: scaleX(max(0.035, var(--ydd-csj-progress)));
	transform-origin: left;
}

.ydd-csj__scroll-orbit {
	position: relative;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(123, 98, 255, 0.3);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(75, 247, 250, 0.08), transparent 68%);
	box-shadow: 0 0 28px rgba(103, 72, 241, 0.1) inset;
}

.ydd-csj__scroll-orbit::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-top: 1px solid rgba(73, 247, 250, 0.72);
	border-right: 1px solid transparent;
	border-radius: 50%;
	animation: ydd-csj-orbit-spin 3.2s linear infinite;
}

.ydd-csj__mouse {
	width: 18px;
	height: 28px;
}

.ydd-csj__scroll-guide-copy {
	gap: 4px;
}

.ydd-csj__scroll-guide-copy strong {
	font-size: 11px;
	letter-spacing: 0.14em;
}

.ydd-csj__scroll-guide-copy span {
	color: rgba(255, 255, 255, 0.52);
	font-size: 10px;
	letter-spacing: 0.025em;
}

.ydd-csj__phase-layer {
	z-index: 9;
}

.ydd-csj__phase {
	width: min(35vw, 540px);
	padding: 10px 0 10px 34px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	filter: none;
}

.ydd-csj__phase::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -90px;
	top: -100px;
	width: 620px;
	height: 390px;
	background: radial-gradient(ellipse at 38% 50%, rgba(3, 2, 7, 0.93), rgba(3, 2, 7, 0.64) 44%, transparent 73%);
	pointer-events: none;
}

.ydd-csj__phase--left {
	left: clamp(46px, 7vw, 126px);
	transform: translateY(-50%) translateX(calc((1 - var(--ydd-phase-opacity)) * -46px));
}

.ydd-csj__phase--right {
	right: clamp(78px, 9vw, 160px);
	transform: translateY(-50%) translateX(calc((1 - var(--ydd-phase-opacity)) * 46px));
}

.ydd-csj__phase--right::after {
	left: auto;
	right: -90px;
	background: radial-gradient(ellipse at 62% 50%, rgba(3, 2, 7, 0.93), rgba(3, 2, 7, 0.64) 44%, transparent 73%);
}

.ydd-csj__phase--center {
	bottom: 10.5%;
	width: min(84vw, 840px);
	padding-left: 0;
	transform: translateX(-50%) translateY(calc((1 - var(--ydd-phase-opacity)) * 36px));
}

.ydd-csj__phase--center::after {
	left: 50%;
	top: -95px;
	width: 110%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(3, 2, 7, 0.94), rgba(3, 2, 7, 0.58) 47%, transparent 74%);
}

.ydd-csj__phase-rule {
	position: absolute;
	left: 0;
	top: 9px;
	bottom: 9px;
	width: 1px;
	background: linear-gradient(to bottom, var(--ydd-csj-cyan), rgba(121, 91, 255, 0.1));
	box-shadow: 0 0 12px rgba(73, 247, 250, 0.28);
	transform: scaleY(var(--ydd-phase-opacity));
	transform-origin: top;
}

.ydd-csj__phase--center .ydd-csj__phase-rule {
	left: 50%;
	top: -25px;
	bottom: auto;
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ydd-csj-cyan), transparent);
	transform: translateX(-50%) scaleX(var(--ydd-phase-opacity));
}

.ydd-csj__phase-ghost {
	position: absolute;
	z-index: -1;
	left: -20px;
	top: 50%;
	color: rgba(255, 255, 255, calc(var(--ydd-phase-opacity) * 0.035));
	font-size: clamp(118px, 12vw, 190px);
	font-weight: 800;
	letter-spacing: -0.08em;
	line-height: 0.7;
	transform: translateY(-50%);
}

.ydd-csj__phase--right .ydd-csj__phase-ghost {
	left: auto;
	right: -6px;
}

.ydd-csj__phase--center .ydd-csj__phase-ghost {
	left: 50%;
	transform: translate(-50%, -50%);
}

.ydd-csj__phase-index {
	margin-bottom: 16px;
	color: var(--ydd-csj-cyan-soft);
	font-size: 9px;
	letter-spacing: 0.24em;
}

.ydd-csj__phase h3 {
	font-size: clamp(34px, 3.7vw, 60px);
	font-weight: 570;
	letter-spacing: -0.052em;
	line-height: 0.98;
}

.ydd-csj__phase > p:last-child {
	max-width: 520px;
	margin-top: 20px;
	color: rgba(225, 220, 236, 0.67);
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.68;
}

.ydd-csj__phase--center > p:last-child {
	margin-inline: auto;
}

.ydd-csj__stage-words {
	z-index: 4;
	overflow: hidden;
	mix-blend-mode: screen;
}

.ydd-csj__stage-words span {
	--ydd-stage-opacity: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	color: rgba(136, 112, 255, 0.12);
	font-size: clamp(92px, 14vw, 245px);
	font-weight: 820;
	letter-spacing: -0.075em;
	line-height: 0.78;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: var(--ydd-stage-opacity);
	filter: blur(0.4px);
	transform: translate(-50%, -50%) scale(calc(0.92 + var(--ydd-stage-opacity) * 0.08));
}

.ydd-csj__module-label {
	padding: 7px 10px;
	border-color: rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	background: rgba(5, 3, 11, 0.74);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(112, 80, 255, 0.025) inset;
	font-size: 8px;
	letter-spacing: 0.12em;
}

.ydd-csj__signal-feed {
	position: absolute;
	z-index: 8;
	left: clamp(32px, 4vw, 72px);
	bottom: max(34px, calc(env(safe-area-inset-bottom) + 25px));
	width: min(320px, 28vw);
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ydd-csj[data-active-phase="1"] .ydd-csj__signal-feed,
.ydd-csj[data-active-phase="2"] .ydd-csj__signal-feed,
.ydd-csj[data-active-phase="3"] .ydd-csj__signal-feed {
	opacity: 1;
	transform: none;
}

.ydd-csj[data-active-phase="4"] .ydd-csj__signal-feed {
	opacity: 0;
	transform: translateY(12px);
}

.ydd-csj__signal-feed-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.42);
	font-size: 8px;
	font-weight: 780;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.ydd-csj__signal-feed-head i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 12px rgba(73, 247, 250, 0.82);
}

.ydd-csj__signal-feed-items {
	display: grid;
}

.ydd-csj__signal-item {
	--ydd-feed-active: 0;
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	color: rgba(255, 255, 255, calc(0.16 + var(--ydd-feed-active) * 0.58));
	font-size: 8px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	transform: translateX(calc((1 - var(--ydd-feed-active)) * -8px));
	opacity: calc(0.22 + var(--ydd-feed-active) * 0.78);
}

.ydd-csj__signal-item span {
	color: rgba(255, 255, 255, 0.24);
	font-variant-numeric: tabular-nums;
}

.ydd-csj__signal-item strong {
	overflow: hidden;
	font-weight: 620;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ydd-csj__signal-item em {
	color: rgba(73, 247, 250, calc(var(--ydd-feed-active) * 0.84));
	font-size: 7px;
	font-style: normal;
	font-weight: 780;
	letter-spacing: 0.13em;
}

.ydd-csj__rail {
	z-index: 14;
	right: clamp(28px, 3.1vw, 54px);
	grid-template-rows: repeat(5, 27px);
	gap: 10px;
}

.ydd-csj__rail-point {
	width: 27px;
	height: 27px;
	border-radius: 6px;
	background: rgba(5, 3, 11, 0.8);
	font-size: 7px;
}

.ydd-csj__rail-point.is-active {
	border-color: rgba(73, 247, 250, 0.72);
	box-shadow: 0 0 0 3px rgba(73, 247, 250, 0.045), 0 0 22px rgba(73, 247, 250, 0.18);
}

.ydd-csj__resolution {
	min-height: 108vh;
	padding-block: clamp(110px, 13vw, 190px);
	background:
		radial-gradient(circle at 18% 47%, rgba(107, 67, 255, 0.22), transparent 31%),
		radial-gradient(circle at 83% 24%, rgba(38, 236, 243, 0.09), transparent 23%),
		linear-gradient(145deg, #07030f 0%, #100724 47%, #030207 100%);
}

.ydd-csj__resolution::after {
	content: "YDD / CONNECTED BUSINESS SYSTEMS";
	position: absolute;
	right: clamp(28px, 4vw, 70px);
	bottom: 30px;
	color: rgba(255, 255, 255, 0.18);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.23em;
}

.ydd-csj__resolution-grid {
	opacity: 0.32;
	background-size: 76px 76px;
}

.ydd-csj__resolution-inner {
	width: min(100%, 1320px);
	grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
	gap: clamp(70px, 9vw, 150px);
}

.ydd-csj__resolution-mark {
	width: min(33vw, 390px);
	border: 1px solid rgba(255, 255, 255, 0.065);
	border-radius: 38%;
	background:
		radial-gradient(circle, rgba(73, 247, 250, 0.07), transparent 44%),
		rgba(12, 6, 27, 0.48);
	box-shadow:
		0 0 0 16px rgba(255, 255, 255, 0.012),
		0 0 130px rgba(112, 76, 255, 0.18),
		0 40px 90px rgba(0, 0, 0, 0.34);
}

.ydd-csj__resolution h3 {
	font-size: clamp(43px, 5.35vw, 79px);
	font-weight: 570;
	letter-spacing: -0.055em;
	line-height: 0.99;
}

.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
	max-width: 710px;
	color: rgba(229, 223, 239, 0.68);
}

.ydd-csj__trust-row span {
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.025);
}

.ydd-csj__capability-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 31px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 13px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.09);
}

.ydd-csj__capability-grid span {
	min-height: 54px;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 15px;
	color: rgba(255, 255, 255, 0.76);
	background: rgba(8, 4, 18, 0.94);
	font-size: 12px;
	font-weight: 630;
}

.ydd-csj__capability-grid b {
	color: var(--ydd-csj-cyan);
	font-size: 8px;
	font-weight: 780;
	letter-spacing: 0.12em;
}

.ydd-csj__button {
	min-height: 57px;
	padding-inline: 23px;
	border-radius: 8px;
}

.ydd-csj__button--primary,
.ydd-csj__button--primary:visited {
	background: linear-gradient(112deg, #ffffff 0%, #d8feff 45%, #6bf8fb 100%);
	box-shadow: 0 18px 45px rgba(73, 247, 250, 0.13);
}

.ydd-csj--fallback .ydd-csj__depth-field,
.ydd-csj--fallback .ydd-csj__cinematic-frame,
.ydd-csj--fallback .ydd-csj__stage-words,
.ydd-csj--fallback .ydd-csj__signal-feed {
	display: none;
}

.ydd-csj--fallback .ydd-csj__phase {
	padding: 25px 25px 26px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: rgba(15, 8, 33, 0.78);
	filter: none;
}

.ydd-csj--fallback .ydd-csj__phase::after,
.ydd-csj--fallback .ydd-csj__phase-ghost,
.ydd-csj--fallback .ydd-csj__phase-rule {
	display: none;
}

@keyframes ydd-csj-orbit-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 1100px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(39vw, 480px);
	}

	.ydd-csj__phase--left { left: clamp(36px, 4vw, 62px); }
	.ydd-csj__phase--right { right: clamp(66px, 6vw, 92px); }

	.ydd-csj__signal-feed {
		width: 260px;
	}

	.ydd-csj__resolution-inner {
		grid-template-columns: minmax(260px, 0.62fr) minmax(460px, 1.38fr);
	}
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 540vh;
		min-height: 3250px;
	}

	.ydd-csj__sticky {
		min-height: 540px;
	}

	.ydd-csj__cinematic-frame {
		inset: 11px;
	}

	.ydd-csj__corner {
		width: 24px;
		height: 24px;
	}

	.ydd-csj__depth-field {
		width: 160vw;
		opacity: calc(0.05 + var(--ydd-csj-progress) * 0.1);
	}

	.ydd-csj__hud {
		left: 20px;
		right: 20px;
	}

	.ydd-csj__hud-brand::after {
		display: none;
	}

	.ydd-csj__intro {
		top: 43%;
		width: calc(100% - 38px);
	}

	.ydd-csj__intro h2 {
		font-size: clamp(43px, 13.5vw, 68px);
		line-height: 0.93;
	}

	.ydd-csj__intro-copy {
		max-width: 520px;
		margin-top: 24px;
		font-size: 14px;
		line-height: 1.62;
	}

	.ydd-csj__eyebrow {
		font-size: 8px;
		letter-spacing: 0.22em;
	}

	.ydd-csj__scroll-guide {
		bottom: max(22px, calc(env(safe-area-inset-bottom) + 15px));
		grid-template-columns: 46px minmax(0, 1fr) 12px;
		gap: 12px;
		width: calc(100% - 38px);
		padding: 10px 12px 10px 10px;
		border-radius: 14px;
	}

	.ydd-csj__scroll-orbit {
		width: 42px;
		height: 42px;
	}

	.ydd-csj__scroll-guide-copy strong {
		font-size: 9px;
		letter-spacing: 0.1em;
	}

	.ydd-csj__scroll-guide-copy span {
		font-size: 8px;
		line-height: 1.35;
		white-space: normal;
	}

	.ydd-csj__stage-words span {
		top: 36%;
		font-size: clamp(70px, 23vw, 150px);
	}

	.ydd-csj__phase {
		left: 50%;
		right: auto;
		top: auto;
		bottom: max(77px, calc(env(safe-area-inset-bottom) + 66px));
		width: calc(100% - 52px);
		max-width: 560px;
		padding: 22px 22px 21px 25px;
		border: 1px solid rgba(255, 255, 255, calc(var(--ydd-phase-opacity) * 0.08));
		border-radius: 12px;
		background: linear-gradient(115deg, rgba(7, 4, 15, 0.93), rgba(11, 6, 24, 0.73));
		box-shadow: 0 28px 70px rgba(0, 0, 0, calc(var(--ydd-phase-opacity) * 0.36));
		text-align: left;
		transform: translateX(-50%) translateY(calc((1 - var(--ydd-phase-opacity)) * 24px));
		will-change: auto;
	}

	.ydd-csj__phase::after {
		display: none;
	}

	.ydd-csj__phase--center {
		bottom: max(77px, calc(env(safe-area-inset-bottom) + 66px));
		text-align: left;
	}

	.ydd-csj__phase--center .ydd-csj__phase-rule {
		left: 0;
		top: 20px;
		bottom: 20px;
		width: 1px;
		height: auto;
		background: linear-gradient(to bottom, var(--ydd-csj-cyan), transparent);
		transform: scaleY(var(--ydd-phase-opacity));
	}

	.ydd-csj__phase-ghost {
		left: auto !important;
		right: 13px !important;
		top: 17px;
		font-size: 72px;
		transform: none !important;
	}

	.ydd-csj__phase-index {
		margin-bottom: 10px;
		font-size: 7px;
	}

	.ydd-csj__phase h3 {
		max-width: 94%;
		font-size: clamp(27px, 8vw, 39px);
		line-height: 1.02;
	}

	.ydd-csj__phase > p:last-child {
		margin-top: 12px;
		font-size: 12px;
		line-height: 1.53;
	}

	.ydd-csj__signal-feed,
	.ydd-csj__module-map {
		display: none;
	}

	.ydd-csj__rail {
		display: none;
	}

	.ydd-csj__resolution {
		padding: 120px 22px 98px;
	}

	.ydd-csj__resolution-inner {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.ydd-csj__resolution-mark {
		width: min(70vw, 315px);
	}

	.ydd-csj__resolution h3 {
		font-size: clamp(40px, 11.2vw, 62px);
	}

	.ydd-csj__capability-grid {
		max-width: 600px;
		margin-inline: auto;
		text-align: left;
	}

	.ydd-csj__resolution::after {
		left: 22px;
		right: 22px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ydd-csj__intro h2 {
		font-size: clamp(39px, 12.2vw, 56px);
	}

	.ydd-csj__phase {
		width: calc(100% - 42px);
	}

	.ydd-csj__capability-grid {
		grid-template-columns: 1fr;
	}

	.ydd-csj__capability-grid span {
		min-height: 49px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__scroll-orbit::before {
		animation: none;
	}
}

@media (forced-colors: active) {
	.ydd-csj__depth-field,
	.ydd-csj__cinematic-frame,
	.ydd-csj__stage-words,
	.ydd-csj__signal-feed {
		display: none;
	}

	.ydd-csj__phase {
		border: 1px solid CanvasText;
	}
}

/* V3 — continuous transformation, safe typography, and explanatory system telemetry. */
.ydd-csj__scroll-track {
	height: 690vh;
	min-height: 4300px;
}

.ydd-csj__sticky {
	height: 100vh;
	height: 100dvh;
	min-height: min(620px, 100dvh);
}

.ydd-csj__intro {
	top: 44.5%;
	width: min(calc(100% - clamp(48px, 8vw, 124px)), 1180px);
	transform: translate(-50%, -50%) translateY(calc((1 - var(--ydd-csj-intro-opacity)) * -38px)) scale(calc(0.985 + var(--ydd-csj-intro-opacity) * 0.015));
}

.ydd-csj__intro h2 {
	width: 100%;
	font-size: var(--ydd-fitted-headline-size, clamp(48px, min(6.8vw, 12vh), 106px));
	line-height: 0.91;
}

.ydd-csj__intro h2 > span {
	width: 100%;
	white-space: nowrap;
}

.ydd-csj__intro-copy {
	width: min(100%, 790px);
	margin-top: 24px;
	font-size: clamp(14px, 1.15vw, 18px);
	line-height: 1.58;
}

.ydd-csj__intro-scroll-callout {
	width: max-content;
	max-width: min(100%, 510px);
	display: inline-grid;
	grid-template-columns: 39px auto;
	align-items: center;
	gap: 13px;
	margin-top: 24px;
	padding: 9px 16px 9px 9px;
	border: 1px solid rgba(116, 242, 247, 0.2);
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(100deg, rgba(75, 247, 250, 0.06), rgba(108, 74, 231, 0.08));
	box-shadow: 0 16px 45px rgba(0, 0, 0, 0.24), 0 0 30px rgba(73, 247, 250, 0.04) inset;
	text-align: left;
}

.ydd-csj__intro-scroll-callout > span:last-child {
	display: grid;
	gap: 1px;
}

.ydd-csj__intro-scroll-callout strong {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.17em;
	line-height: 1.3;
}

.ydd-csj__intro-scroll-callout em {
	color: rgba(255, 255, 255, 0.5);
	font-size: 9px;
	font-style: normal;
	line-height: 1.35;
}

.ydd-csj__intro-scroll-glyph {
	position: relative;
	width: 35px;
	height: 35px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(113, 91, 255, 0.45);
	border-radius: 50%;
}

.ydd-csj__intro-scroll-glyph::before,
.ydd-csj__intro-scroll-glyph::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.ydd-csj__intro-scroll-glyph::before {
	inset: -4px;
	border-top: 1px solid var(--ydd-csj-cyan);
	border-left: 1px solid transparent;
	animation: ydd-csj-orbit-spin 2.8s linear infinite;
}

.ydd-csj__intro-scroll-glyph::after {
	width: 4px;
	height: 4px;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 10px rgba(73, 247, 250, 0.8);
}

.ydd-csj__intro-scroll-glyph i {
	position: absolute;
	left: 50%;
	top: 22px;
	width: 1px;
	height: 6px;
	background: linear-gradient(to bottom, var(--ydd-csj-cyan), transparent);
	transform: translateX(-50%);
	animation: ydd-csj-intro-drop 1.5s ease-in-out infinite;
}

.ydd-csj[data-started="false"] .ydd-csj__scroll-guide {
	opacity: 0;
	transform: translateX(-50%) translateY(18px);
}

.ydd-csj[data-started="true"] .ydd-csj__intro-scroll-callout {
	opacity: 0;
	transform: translateY(-8px);
}

.ydd-csj__intro-scroll-callout {
	transition: opacity 360ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ydd-csj__phase {
	--ydd-phase-enter: 0;
	--ydd-phase-exit: 0;
	--ydd-phase-local: 0;
	width: min(40vw, 610px);
	padding: 26px 27px 24px 31px;
	border: 1px solid rgba(255, 255, 255, calc(0.035 + var(--ydd-phase-opacity) * 0.1));
	border-radius: 14px;
	background:
		linear-gradient(118deg, rgba(8, 4, 18, 0.93), rgba(12, 7, 27, 0.76)),
		rgba(5, 3, 11, 0.88);
	box-shadow:
		0 30px 90px rgba(0, 0, 0, calc(var(--ydd-phase-opacity) * 0.4)),
		0 0 70px rgba(95, 64, 225, calc(var(--ydd-phase-opacity) * 0.055)) inset;
	overflow: hidden;
}

.ydd-csj__phase::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: calc(12% + var(--ydd-phase-local) * 88%);
	height: 1px;
	background: linear-gradient(90deg, var(--ydd-csj-purple), var(--ydd-csj-cyan), transparent);
	box-shadow: 0 0 15px rgba(73, 247, 250, 0.24);
}

.ydd-csj__phase::after {
	left: -120px;
	top: -130px;
	width: 720px;
	height: 480px;
	opacity: 0.7;
}

.ydd-csj__phase--left {
	left: clamp(42px, 6vw, 105px);
	transform:
		translateY(calc(-50% + (1 - var(--ydd-phase-enter)) * 34px - var(--ydd-phase-exit) * 25px))
		translateX(calc((1 - var(--ydd-phase-enter)) * -54px + var(--ydd-phase-exit) * 24px))
		scale(calc(0.975 + var(--ydd-phase-enter) * 0.025 - var(--ydd-phase-exit) * 0.015));
}

.ydd-csj__phase--right {
	right: clamp(72px, 7vw, 126px);
	transform:
		translateY(calc(-50% + (1 - var(--ydd-phase-enter)) * 34px - var(--ydd-phase-exit) * 25px))
		translateX(calc((1 - var(--ydd-phase-enter)) * 54px - var(--ydd-phase-exit) * 24px))
		scale(calc(0.975 + var(--ydd-phase-enter) * 0.025 - var(--ydd-phase-exit) * 0.015));
}

.ydd-csj__phase--center {
	bottom: 5.5%;
	width: min(82vw, 880px);
	padding-inline: 34px;
	transform:
		translateX(-50%)
		translateY(calc((1 - var(--ydd-phase-enter)) * 38px - var(--ydd-phase-exit) * 24px))
		scale(calc(0.975 + var(--ydd-phase-enter) * 0.025 - var(--ydd-phase-exit) * 0.015));
}

.ydd-csj__phase-rule {
	top: 26px;
	bottom: 26px;
}

.ydd-csj__phase-ghost {
	font-size: clamp(100px, 10vw, 160px);
}

.ydd-csj__phase-index {
	margin-bottom: 12px;
}

.ydd-csj__phase h3 {
	font-size: clamp(31px, 3.25vw, 52px);
	line-height: 1;
}

.ydd-csj__phase > p:last-of-type {
	max-width: 560px;
	margin: 14px 0 0;
	color: rgba(225, 220, 236, 0.66);
	font-size: clamp(13px, 0.95vw, 15px);
	line-height: 1.58;
}

.ydd-csj__phase--center > p:last-of-type {
	margin-inline: auto;
}

.ydd-csj__phase-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
	align-items: stretch;
	gap: 9px;
	margin-top: 18px;
}

.ydd-csj__phase-flow > span {
	min-width: 0;
	display: grid;
	align-content: center;
	gap: 4px;
	min-height: 64px;
	padding: 10px 11px;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.025);
}

.ydd-csj__phase-flow small,
.ydd-csj__phase-impact small {
	display: block;
	color: rgba(118, 246, 250, 0.72);
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ydd-csj__phase-flow strong {
	overflow: hidden;
	color: rgba(255, 255, 255, 0.82);
	font-size: 10px;
	font-weight: 620;
	letter-spacing: 0.015em;
	line-height: 1.38;
}

.ydd-csj__phase-flow > i {
	display: grid;
	place-items: center;
	color: rgba(73, 247, 250, 0.64);
}

.ydd-csj__phase-flow svg {
	width: 24px;
	height: 12px;
}

.ydd-csj__phase-impact {
	position: relative;
	display: grid;
	grid-template-columns: 3px 1fr;
	align-items: stretch;
	gap: 11px;
	margin-top: 9px;
	padding: 10px 12px 10px 10px;
	border: 1px solid rgba(73, 247, 250, 0.1);
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(73, 247, 250, 0.045), rgba(108, 75, 237, 0.035));
}

.ydd-csj__phase-impact > i {
	width: 3px;
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--ydd-csj-cyan), var(--ydd-csj-purple));
	box-shadow: 0 0 12px rgba(73, 247, 250, calc(0.14 + var(--ydd-phase-local) * 0.35));
}

.ydd-csj__phase-impact > span {
	display: grid;
	gap: 2px;
}

.ydd-csj__phase-impact strong {
	color: rgba(255, 255, 255, 0.88);
	font-size: 11px;
	font-weight: 670;
	line-height: 1.38;
}

.ydd-csj__stage-words span {
	--ydd-stage-local: 0;
	font-size: clamp(80px, 12vw, 210px);
	opacity: calc(var(--ydd-stage-opacity) * 0.58);
	transform: translate(-50%, -50%) scale(calc(0.9 + var(--ydd-stage-local) * 0.16)) rotate(calc((var(--ydd-stage-local) - 0.5) * -1deg));
}

.ydd-csj__system-layers {
	position: absolute;
	z-index: 12;
	left: 50%;
	top: max(69px, calc(env(safe-area-inset-top) + 58px));
	display: flex;
	align-items: center;
	gap: 6px;
	transform: translateX(-50%);
	pointer-events: none;
}

.ydd-csj__system-layers span {
	--ydd-layer-active: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	padding: 5px 9px;
	border: 1px solid rgba(255, 255, 255, calc(0.045 + var(--ydd-layer-active) * 0.14));
	border-radius: 5px;
	color: rgba(255, 255, 255, calc(0.22 + var(--ydd-layer-active) * 0.7));
	background: rgba(5, 3, 11, calc(0.4 + var(--ydd-layer-active) * 0.38));
	font-size: 7px;
	font-weight: 690;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	transform: translateY(calc((1 - var(--ydd-layer-active)) * -2px));
}

.ydd-csj__system-layers {
	opacity: clamp(0, calc((var(--ydd-csj-progress) - 0.09) * 25), 1);
	transform: translateX(-50%) translateY(calc((1 - clamp(0, calc((var(--ydd-csj-progress) - 0.09) * 25), 1)) * -7px));
}

.ydd-csj__system-layers b {
	color: rgba(73, 247, 250, calc(0.28 + var(--ydd-layer-active) * 0.72));
	font-size: 6px;
	font-variant-numeric: tabular-nums;
}

.ydd-csj__rail-point::after {
	content: attr(data-label);
	position: absolute;
	right: 36px;
	padding: 5px 8px;
	border: 1px solid rgba(73, 247, 250, 0.14);
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(5, 3, 11, 0.82);
	font-size: 7px;
	font-weight: 730;
	letter-spacing: 0.12em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(7px);
	transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ydd-csj__rail-point.is-active::after {
	opacity: 1;
	transform: none;
}

.ydd-csj--fallback .ydd-csj__intro-scroll-callout,
.ydd-csj--fallback .ydd-csj__system-layers {
	display: none;
}

.ydd-csj--fallback .ydd-csj__phase-flow,
.ydd-csj--fallback .ydd-csj__phase-impact {
	text-align: left;
}

@keyframes ydd-csj-intro-drop {
	0%, 100% { opacity: 0.25; transform: translate(-50%, -2px) scaleY(0.6); }
	50% { opacity: 1; transform: translate(-50%, 3px) scaleY(1); }
}

@media (max-width: 1180px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(43vw, 560px);
		padding: 23px 24px 22px 28px;
	}

	.ydd-csj__phase--left { left: clamp(32px, 3.5vw, 54px); }
	.ydd-csj__phase--right { right: clamp(62px, 5vw, 82px); }

	.ydd-csj__system-layers span {
		padding-inline: 7px;
		font-size: 6px;
	}
}

@media (max-height: 720px) and (min-width: 783px) {
	.ydd-csj__intro {
		top: 43%;
	}

	.ydd-csj__intro-copy {
		margin-top: 17px;
		font-size: 14px;
	}

	.ydd-csj__intro-scroll-callout {
		margin-top: 16px;
	}

	.ydd-csj__phase {
		padding-top: 20px;
		padding-bottom: 19px;
	}

	.ydd-csj__phase-index {
		margin-bottom: 8px;
	}

	.ydd-csj__phase > p:last-of-type {
		margin-top: 10px;
		line-height: 1.45;
	}

	.ydd-csj__phase-flow {
		margin-top: 12px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 54px;
		padding-block: 7px;
	}

	.ydd-csj__phase-impact {
		padding-block: 7px;
	}

	.ydd-csj__system-layers {
		top: 58px;
	}
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 590vh;
		min-height: 3600px;
	}

	.ydd-csj__intro {
		top: 39%;
		width: calc(100% - 34px);
	}

	.ydd-csj__intro h2 {
		font-size: var(--ydd-fitted-headline-size, clamp(38px, 11.8vw, 60px));
		line-height: 0.94;
	}

	.ydd-csj__intro-copy {
		width: min(100%, 520px);
		margin-top: 18px;
		font-size: 13px;
		line-height: 1.52;
	}

	.ydd-csj__intro-scroll-callout {
		grid-template-columns: 34px auto;
		gap: 10px;
		margin-top: 17px;
		padding: 7px 13px 7px 7px;
	}

	.ydd-csj__intro-scroll-glyph {
		width: 31px;
		height: 31px;
	}

	.ydd-csj__intro-scroll-glyph i {
		top: 19px;
	}

	.ydd-csj__intro-scroll-callout strong,
	.ydd-csj__intro-scroll-callout em {
		font-size: 7px;
	}

	.ydd-csj__system-layers {
		display: none;
	}

	.ydd-csj__phase {
		bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px));
		width: calc(100% - 42px);
		padding: 19px 19px 18px 24px;
		border-radius: 11px;
		transform:
			translateX(-50%)
			translateY(calc((1 - var(--ydd-phase-enter)) * 28px - var(--ydd-phase-exit) * 18px))
			scale(calc(0.98 + var(--ydd-phase-enter) * 0.02 - var(--ydd-phase-exit) * 0.01));
	}

	.ydd-csj__phase,
	.ydd-csj__phase--left,
	.ydd-csj__phase--right,
	.ydd-csj__phase--center {
		left: 50%;
		right: auto;
		top: auto;
	}

	.ydd-csj__phase--center {
		bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px));
		padding-inline: 24px 19px;
	}

	.ydd-csj__phase-rule,
	.ydd-csj__phase--center .ydd-csj__phase-rule {
		left: 0;
		top: 19px;
		bottom: 19px;
		width: 1px;
		height: auto;
		background: linear-gradient(to bottom, var(--ydd-csj-cyan), transparent);
		transform: scaleY(var(--ydd-phase-opacity));
	}

	.ydd-csj__phase-index {
		margin-bottom: 8px;
	}

	.ydd-csj__phase h3 {
		max-width: 96%;
		font-size: clamp(25px, 7.6vw, 36px);
	}

	.ydd-csj__phase > p:last-of-type {
		margin-top: 9px;
		font-size: 11px;
		line-height: 1.48;
	}

	.ydd-csj__phase-flow {
		grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
		gap: 5px;
		margin-top: 12px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 57px;
		padding: 8px;
	}

	.ydd-csj__phase-flow small,
	.ydd-csj__phase-impact small {
		font-size: 6px;
		letter-spacing: 0.11em;
	}

	.ydd-csj__phase-flow strong {
		font-size: 8px;
		line-height: 1.32;
	}

	.ydd-csj__phase-flow svg {
		width: 17px;
	}

	.ydd-csj__phase-impact {
		margin-top: 6px;
		padding-block: 8px;
	}

	.ydd-csj__phase-impact strong {
		font-size: 9px;
	}

	.ydd-csj__phase-ghost {
		top: 14px;
		font-size: 62px;
	}

	.ydd-csj__stage-words span {
		top: 33%;
	}

	.ydd-csj__scroll-guide {
		bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
	}
}

@media (max-width: 430px) {
	.ydd-csj__phase {
		width: calc(100% - 28px);
	}

	.ydd-csj__phase-flow {
		grid-template-columns: 1fr 14px 1fr;
	}

	.ydd-csj__intro-scroll-callout {
		max-width: calc(100% - 10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__intro-scroll-glyph::before,
	.ydd-csj__intro-scroll-glyph i {
		animation: none;
	}
}

/* V4 — branded system core, cinematic depth travel, and live operational trace. */
.ydd-csj__scroll-track {
	height: 760vh;
	min-height: 4800px;
}

.ydd-csj__canvas {
	filter: saturate(1.16) contrast(1.055) brightness(1.025);
}

.ydd-csj__phase {
	width: min(43vw, 660px);
	padding: 23px 25px 21px 29px;
	border-color: rgba(255, 255, 255, calc(0.04 + var(--ydd-phase-opacity) * 0.14));
	background:
		linear-gradient(118deg, rgba(6, 3, 15, 0.95), rgba(13, 7, 30, 0.86)),
		rgba(5, 3, 11, 0.92);
	box-shadow:
		0 38px 110px rgba(0, 0, 0, calc(var(--ydd-phase-opacity) * 0.48)),
		0 0 0 1px rgba(92, 246, 250, calc(var(--ydd-phase-opacity) * 0.025)) inset,
		0 0 90px rgba(95, 64, 225, calc(var(--ydd-phase-opacity) * 0.075)) inset;
	-webkit-backdrop-filter: blur(26px) saturate(1.2);
	backdrop-filter: blur(26px) saturate(1.2);
}

.ydd-csj__phase h3 {
	font-size: clamp(29px, 3.05vw, 48px);
	line-height: 0.99;
}

.ydd-csj__phase > p:last-of-type {
	margin-top: 11px;
	font-size: clamp(12px, 0.88vw, 14px);
	line-height: 1.5;
}

.ydd-csj__phase-flow {
	margin-top: 14px;
}

.ydd-csj__phase-flow > span {
	min-height: 58px;
}

.ydd-csj__phase-trace {
	position: relative;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.ydd-csj__phase-trace::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: calc(12% + var(--ydd-phase-local) * 88%);
	height: 1px;
	background: linear-gradient(90deg, var(--ydd-csj-purple), var(--ydd-csj-cyan), transparent);
	box-shadow: 0 0 14px rgba(73, 247, 250, 0.25);
}

.ydd-csj__phase-trace-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ydd-csj__phase-trace-head > span {
	color: rgba(255, 255, 255, 0.45);
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.ydd-csj__phase-trace-head em {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(113, 249, 252, 0.72);
	font-size: 6px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.ydd-csj__phase-trace-head em i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ydd-csj-cyan);
	box-shadow: 0 0 10px rgba(73, 247, 250, 0.85);
	animation: ydd-csj-trace-pulse 1.55s ease-in-out infinite;
}

.ydd-csj__phase-trace ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ydd-csj__phase-trace li {
	--ydd-trace-active: clamp(0, calc(var(--ydd-phase-local) * 4 - var(--ydd-trace-index)), 1);
	position: relative;
	min-width: 0;
	min-height: 43px;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: center;
	gap: 7px;
	padding: 7px 8px;
	border: 1px solid rgba(73, 247, 250, calc(0.035 + var(--ydd-trace-active) * 0.17));
	border-radius: 7px;
	background: rgba(73, 247, 250, calc(0.012 + var(--ydd-trace-active) * 0.04));
	opacity: calc(0.36 + var(--ydd-trace-active) * 0.64);
	transform: translateY(calc((1 - var(--ydd-trace-active)) * 4px));
}

.ydd-csj__phase-trace li::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--ydd-csj-purple), var(--ydd-csj-cyan));
	box-shadow: 0 0 9px rgba(73, 247, 250, 0.35);
	transform: scaleX(var(--ydd-trace-active));
	transform-origin: left;
}

.ydd-csj__phase-trace li b {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(73, 247, 250, calc(0.08 + var(--ydd-trace-active) * 0.24));
	border-radius: 50%;
	color: rgba(118, 248, 251, calc(0.38 + var(--ydd-trace-active) * 0.62));
	font-size: 6px;
	font-variant-numeric: tabular-nums;
}

.ydd-csj__phase-trace li span {
	min-width: 0;
	color: rgba(255, 255, 255, calc(0.4 + var(--ydd-trace-active) * 0.5));
	font-size: 8px;
	font-weight: 630;
	letter-spacing: 0.01em;
	line-height: 1.28;
}

.ydd-csj__phase-impact {
	margin-top: 8px;
}

.ydd-csj__system-layers span {
	box-shadow: 0 0 calc(var(--ydd-layer-active) * 22px) rgba(73, 247, 250, 0.12);
	transform: translateY(calc((1 - var(--ydd-layer-active)) * -2px)) scale(calc(1 + var(--ydd-layer-active) * 0.045));
}

.ydd-csj[data-active-phase="4"] .ydd-csj__system-layers span:last-child {
	background: linear-gradient(100deg, rgba(102, 74, 231, 0.28), rgba(42, 233, 239, 0.12)), rgba(5, 3, 11, 0.86);
}

@keyframes ydd-csj-trace-pulse {
	0%, 100% { opacity: 0.38; transform: scale(0.75); }
	50% { opacity: 1; transform: scale(1.2); }
}

@media (max-height: 720px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(44vw, 640px);
		padding: 18px 21px 17px 25px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(27px, 2.75vw, 41px);
	}

	.ydd-csj__phase > p:last-of-type {
		margin-top: 8px;
		font-size: 11px;
		line-height: 1.4;
	}

	.ydd-csj__phase-flow {
		margin-top: 10px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 48px;
		padding-block: 7px;
	}

	.ydd-csj__phase-trace {
		margin-top: 8px;
		padding-top: 8px;
	}

	.ydd-csj__phase-trace ol {
		margin-top: 6px;
	}

	.ydd-csj__phase-trace li {
		min-height: 35px;
		padding: 5px 6px;
	}

	.ydd-csj__phase-impact {
		margin-top: 6px;
		padding-block: 7px;
	}
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 650vh;
		min-height: 4000px;
	}

	.ydd-csj__phase {
		bottom: max(45px, calc(env(safe-area-inset-bottom) + 38px));
		width: calc(100% - 28px);
		padding: 16px 16px 15px 20px;
	}

	.ydd-csj__phase--center {
		bottom: max(45px, calc(env(safe-area-inset-bottom) + 38px));
		padding-inline: 20px 16px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(24px, 7.2vw, 33px);
		line-height: 1;
	}

	.ydd-csj__phase > p:last-of-type {
		font-size: 10px;
		line-height: 1.4;
	}

	.ydd-csj__phase-flow {
		margin-top: 9px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 49px;
		padding: 7px;
	}

	.ydd-csj__phase-trace {
		margin-top: 7px;
		padding-top: 7px;
	}

	.ydd-csj__phase-trace ol {
		gap: 3px;
		margin-top: 6px;
	}

	.ydd-csj__phase-trace li {
		min-height: 38px;
		grid-template-columns: 15px minmax(0, 1fr);
		gap: 4px;
		padding: 5px;
	}

	.ydd-csj__phase-trace li b {
		width: 15px;
		height: 15px;
		font-size: 5px;
	}

	.ydd-csj__phase-trace li span {
		font-size: 6.8px;
		line-height: 1.22;
	}

	.ydd-csj__phase-impact {
		margin-top: 5px;
		padding-block: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__phase-trace-head em i {
		animation: none;
	}
}

/* V5 — luminous click-to-system story, large evidence panels, and bright resolution. */
.ydd-csj {
	--ydd-csj-bg: #f7f6ff;
	--ydd-csj-bg-soft: #ece9ff;
	--ydd-csj-panel: rgba(255, 255, 255, 0.86);
	--ydd-csj-panel-strong: rgba(255, 255, 255, 0.96);
	--ydd-csj-white: #ffffff;
	--ydd-csj-text: #20143f;
	--ydd-csj-muted: #62577d;
	--ydd-csj-purple: #7554ff;
	--ydd-csj-purple-bright: #9f82ff;
	--ydd-csj-cyan: #00cfe8;
	--ydd-csj-cyan-soft: #087e9b;
	--ydd-csj-pink: #ff4f9a;
	--ydd-csj-coral: #ff7566;
	--ydd-csj-yellow: #ffc93d;
	--ydd-csj-line: rgba(71, 48, 126, 0.14);
	--ydd-click-flash: 0;
	color: var(--ydd-csj-text);
	background: #f8f8ff;
}

.ydd-csj__scroll-track {
	height: 820vh;
	min-height: 5200px;
	background:
		radial-gradient(circle at 12% 15%, rgba(255, 92, 174, 0.2), transparent 30%),
		radial-gradient(circle at 87% 23%, rgba(0, 207, 232, 0.21), transparent 31%),
		radial-gradient(circle at 50% 64%, rgba(124, 83, 255, 0.19), transparent 38%),
		linear-gradient(150deg, #fffaff 0%, #f0f5ff 42%, #f8f3ff 72%, #f2ffff 100%);
}

.ydd-csj__sticky {
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 83, 163, 0.2), transparent 34%),
		radial-gradient(circle at 83% 32%, rgba(0, 207, 232, 0.2), transparent 34%),
		radial-gradient(circle at 50% 100%, rgba(122, 82, 255, 0.2), transparent 43%),
		linear-gradient(145deg, #fffaff 0%, #eef4ff 50%, #f9f1ff 100%);
}

.ydd-csj__atmosphere {
	background:
		linear-gradient(rgba(62, 39, 120, 0.042) 1px, transparent 1px),
		linear-gradient(90deg, rgba(62, 39, 120, 0.042) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse at center, black 12%, rgba(0, 0, 0, 0.75) 58%, transparent 92%);
	mask-image: radial-gradient(ellipse at center, black 12%, rgba(0, 0, 0, 0.75) 58%, transparent 92%);
}

.ydd-csj__atmosphere::before {
	border-color: rgba(102, 67, 211, 0.16);
	box-shadow:
		0 0 180px rgba(129, 85, 255, 0.11) inset,
		0 0 220px rgba(0, 207, 232, 0.09);
}

.ydd-csj__atmosphere::after {
	background: radial-gradient(circle, rgba(132, 87, 255, 0.28), rgba(255, 92, 174, 0.08) 42%, transparent 69%);
}

.ydd-csj__aurora {
	opacity: 0.24;
	filter: blur(118px) saturate(1.25);
}

.ydd-csj__aurora--one {
	background: #ff5daa;
}

.ydd-csj__aurora--two {
	background: #04d9ef;
	opacity: 0.2;
}

.ydd-csj__noise {
	opacity: 0.055;
	mix-blend-mode: multiply;
}

.ydd-csj__click-flash {
	position: absolute;
	z-index: 8;
	inset: 0;
	pointer-events: none;
	opacity: var(--ydd-click-flash);
	background:
		radial-gradient(circle at 50% 61%, rgba(255, 255, 255, 0.98) 0 5%, rgba(255, 221, 90, 0.86) 6%, rgba(255, 79, 154, 0.52) 14%, transparent 35%),
		conic-gradient(from 24deg at 50% 61%, transparent, rgba(0, 207, 232, 0.26), transparent 23%, rgba(123, 82, 255, 0.25), transparent 49%, rgba(255, 79, 154, 0.3), transparent 78%);
	filter: saturate(1.4);
	transform: scale(calc(0.86 + var(--ydd-click-flash) * 0.18));
	transform-origin: 50% 61%;
}

.ydd-csj__canvas {
	filter: saturate(1.2) contrast(1.025) brightness(1.02);
}

.ydd-csj__depth-field {
	opacity: calc(0.055 + var(--ydd-csj-progress) * 0.1);
}

.ydd-csj__depth-field span {
	border-color: rgba(88, 53, 184, 0.17);
	box-shadow: 0 0 60px rgba(0, 207, 232, 0.07);
}

.ydd-csj__cinematic-frame {
	border-color: rgba(67, 42, 124, 0.1);
}

.ydd-csj__corner {
	border-color: rgba(81, 49, 161, 0.34);
	filter: drop-shadow(0 0 9px rgba(0, 207, 232, 0.16));
}

.ydd-csj__hud {
	color: rgba(38, 24, 75, 0.68);
}

.ydd-csj__hud-brand,
.ydd-csj__hud-status {
	padding: 8px 11px;
	border: 1px solid rgba(76, 49, 145, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 10px 35px rgba(86, 53, 164, 0.08);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.ydd-csj__hud-brand::after {
	border-left-color: rgba(57, 35, 111, 0.16);
	color: rgba(49, 30, 96, 0.36);
}

.ydd-csj__hud-status strong {
	color: #5a35cf;
	border-color: rgba(117, 84, 255, 0.17);
	background: rgba(117, 84, 255, 0.065);
}

.ydd-csj__intro::before {
	width: 88%;
	height: 190%;
	background: radial-gradient(ellipse, rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.5) 48%, transparent 72%);
}

.ydd-csj__eyebrow {
	color: #6543cf;
}

.ydd-csj__intro h2 {
	color: #21133f;
	font-weight: 650;
	text-shadow: 0 18px 50px rgba(75, 43, 142, 0.08);
}

.ydd-csj__headline-accent {
	background-image: linear-gradient(102deg, #6638df 2%, #8e50f4 38%, #ff4f9a 66%, #00aeca 98%);
	filter: drop-shadow(0 16px 30px rgba(124, 72, 235, 0.16));
}

.ydd-csj__intro-copy {
	color: rgba(49, 35, 80, 0.74);
	font-weight: 520;
}

.ydd-csj__intro-scroll-callout {
	border-color: rgba(117, 84, 255, 0.18);
	color: #261748;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.93), rgba(244, 238, 255, 0.88));
	box-shadow: 0 18px 55px rgba(87, 53, 166, 0.13), 0 0 30px rgba(0, 207, 232, 0.07) inset;
}

.ydd-csj__intro-scroll-callout em {
	color: rgba(49, 35, 80, 0.58);
}

.ydd-csj__intro-scroll-glyph {
	border-color: rgba(117, 84, 255, 0.42);
	background: rgba(117, 84, 255, 0.05);
}

.ydd-csj__mouse {
	border-color: rgba(62, 39, 117, 0.46);
}

.ydd-csj__mouse span {
	background: var(--ydd-csj-pink);
	box-shadow: 0 0 10px rgba(255, 79, 154, 0.5);
}

.ydd-csj__scroll-guide {
	border-color: rgba(72, 45, 139, 0.14);
	color: #251748;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(245, 241, 255, 0.93));
	box-shadow:
		0 24px 70px rgba(77, 47, 147, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.8) inset,
		0 0 60px rgba(0, 207, 232, 0.08) inset;
}

.ydd-csj__scroll-guide-copy strong {
	color: #27164c;
}

.ydd-csj__scroll-guide-copy span {
	color: rgba(49, 35, 80, 0.58);
}

.ydd-csj__scroll-orbit {
	border-color: rgba(117, 84, 255, 0.3);
	background: radial-gradient(circle, rgba(255, 79, 154, 0.1), transparent 68%);
}

.ydd-csj__scroll-arrow span {
	border-color: var(--ydd-csj-purple);
}

.ydd-csj__phase {
	width: min(48vw, 780px);
	padding: 31px 33px 29px 37px;
	border-color: rgba(87, 53, 166, calc(0.08 + var(--ydd-phase-opacity) * 0.16));
	border-radius: 24px;
	color: #20133d;
	background:
		linear-gradient(130deg, rgba(255, 255, 255, 0.97), rgba(246, 242, 255, 0.92)),
		rgba(255, 255, 255, 0.94);
	box-shadow:
		0 42px 120px rgba(75, 43, 142, calc(var(--ydd-phase-opacity) * 0.2)),
		0 0 0 1px rgba(255, 255, 255, calc(var(--ydd-phase-opacity) * 0.82)) inset,
		0 0 100px rgba(0, 207, 232, calc(var(--ydd-phase-opacity) * 0.055)) inset;
	-webkit-backdrop-filter: blur(30px) saturate(1.15);
	backdrop-filter: blur(30px) saturate(1.15);
}

.ydd-csj__phase::before {
	height: 4px;
	background: linear-gradient(90deg, var(--ydd-csj-pink), var(--ydd-csj-purple), var(--ydd-csj-cyan), var(--ydd-csj-yellow));
	box-shadow: 0 0 18px rgba(117, 84, 255, 0.24);
}

.ydd-csj__phase::after,
.ydd-csj__phase--right::after,
.ydd-csj__phase--center::after {
	background: radial-gradient(ellipse at 35% 40%, rgba(255, 79, 154, 0.09), rgba(0, 207, 232, 0.045) 42%, transparent 72%);
	opacity: 1;
}

.ydd-csj__phase--left {
	left: clamp(40px, 4.7vw, 86px);
}

.ydd-csj__phase--right {
	right: clamp(70px, 5.7vw, 108px);
}

.ydd-csj__phase-rule {
	width: 3px;
	background: linear-gradient(to bottom, var(--ydd-csj-pink), var(--ydd-csj-purple), var(--ydd-csj-cyan));
	box-shadow: 0 0 16px rgba(117, 84, 255, 0.24);
}

.ydd-csj__phase-ghost {
	color: rgba(89, 52, 169, calc(var(--ydd-phase-opacity) * 0.052));
}

.ydd-csj__phase-index {
	margin-bottom: 13px;
	color: #6842dd;
	font-size: 11px;
	letter-spacing: 0.21em;
}

.ydd-csj__phase h3 {
	max-width: 710px;
	color: #1f123d;
	font-size: clamp(42px, 3.55vw, 62px);
	font-weight: 680;
	letter-spacing: -0.052em;
	line-height: 0.99;
}

.ydd-csj__phase > p:last-of-type {
	max-width: 690px;
	margin-top: 15px;
	color: rgba(54, 39, 86, 0.76);
	font-size: clamp(15px, 1.03vw, 18px);
	font-weight: 510;
	line-height: 1.52;
}

.ydd-csj__phase-flow {
	grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
	gap: 12px;
	margin-top: 19px;
}

.ydd-csj__phase-flow > span {
	min-height: 82px;
	gap: 6px;
	padding: 13px 15px;
	border-color: rgba(92, 58, 170, 0.13);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 9px 30px rgba(82, 48, 155, 0.055);
}

.ydd-csj__phase-flow small,
.ydd-csj__phase-impact small {
	color: #7d4ce3;
	font-size: 9px;
	letter-spacing: 0.14em;
}

.ydd-csj__phase-flow strong {
	color: #2e2053;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.42;
}

.ydd-csj__phase-flow > i {
	position: relative;
	color: #d93d8d;
}

.ydd-csj__phase-flow > i::before {
	content: "";
	position: absolute;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 79, 154, 0.12), rgba(0, 207, 232, 0.12));
}

.ydd-csj__phase-flow > i svg {
	position: relative;
}

.ydd-csj__phase-trace {
	margin-top: 15px;
	padding-top: 14px;
	border-top-color: rgba(76, 48, 143, 0.12);
}

.ydd-csj__phase-trace::before {
	height: 2px;
	background: linear-gradient(90deg, var(--ydd-csj-pink), var(--ydd-csj-purple), var(--ydd-csj-cyan), transparent);
}

.ydd-csj__phase-trace-head > span,
.ydd-csj__phase-proof-head > span {
	color: rgba(47, 31, 84, 0.58);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ydd-csj__phase-trace-head em,
.ydd-csj__phase-proof-head em {
	color: #087d95;
	font-size: 8px;
	font-weight: 850;
	letter-spacing: 0.1em;
}

.ydd-csj__phase-trace ol {
	gap: 8px;
	margin-top: 10px;
}

.ydd-csj__phase-trace li {
	min-height: 62px;
	grid-template-columns: 27px minmax(0, 1fr);
	gap: 9px;
	padding: 10px 11px;
	border-color: rgba(0, 174, 202, calc(0.11 + var(--ydd-trace-active) * 0.22));
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(234, 253, 255, 0.9), rgba(246, 242, 255, 0.82));
	box-shadow: 0 9px 24px rgba(47, 123, 156, calc(var(--ydd-trace-active) * 0.08));
}

.ydd-csj__phase-trace li b {
	width: 27px;
	height: 27px;
	border-color: rgba(0, 174, 202, calc(0.18 + var(--ydd-trace-active) * 0.35));
	color: rgba(37, 67, 119, calc(0.58 + var(--ydd-trace-active) * 0.42));
	background: rgba(255, 255, 255, 0.8);
	font-size: 8px;
}

.ydd-csj__phase-trace li span {
	color: rgba(43, 30, 77, calc(0.62 + var(--ydd-trace-active) * 0.38));
	font-size: 10px;
	font-weight: 680;
	line-height: 1.34;
}

.ydd-csj__phase-proof {
	position: relative;
	margin-top: 14px;
	padding: 13px 14px 14px;
	border: 1px solid rgba(101, 67, 196, 0.13);
	border-radius: 14px;
	background: linear-gradient(115deg, rgba(251, 245, 255, 0.92), rgba(235, 254, 255, 0.88));
	box-shadow: 0 12px 34px rgba(85, 50, 158, 0.06);
}

.ydd-csj__phase-proof-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ydd-csj__phase-proof-head em {
	font-style: normal;
	white-space: nowrap;
}

.ydd-csj__phase-proof-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.ydd-csj__phase-proof-items > span {
	--ydd-proof-index: 0;
	--ydd-proof-active: clamp(0, calc(var(--ydd-phase-local) * 4 - var(--ydd-proof-index)), 1);
	min-width: 0;
	min-height: 43px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border: 1px solid rgba(74, 171, 150, calc(0.12 + var(--ydd-proof-active) * 0.2));
	border-radius: 9px;
	color: rgba(37, 55, 72, calc(0.55 + var(--ydd-proof-active) * 0.45));
	background: rgba(255, 255, 255, calc(0.55 + var(--ydd-proof-active) * 0.4));
	font-size: 10px;
	font-weight: 710;
	line-height: 1.28;
	opacity: calc(0.46 + var(--ydd-proof-active) * 0.54);
	transform: translateY(calc((1 - var(--ydd-proof-active)) * 5px));
}

.ydd-csj__phase-proof-items > span:nth-child(2) { --ydd-proof-index: 1; }
.ydd-csj__phase-proof-items > span:nth-child(3) { --ydd-proof-index: 2; }

.ydd-csj__phase-proof-items i {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #24d6c3, #6f62ef);
	box-shadow: 0 5px 13px rgba(63, 155, 158, 0.2);
}

.ydd-csj__phase-proof-items i::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 7px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.ydd-csj__phase-impact {
	margin-top: 12px;
	padding: 12px 14px 12px 12px;
	border-color: rgba(255, 79, 154, 0.14);
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(255, 240, 248, 0.95), rgba(241, 247, 255, 0.9));
}

.ydd-csj__phase-impact > i {
	background: linear-gradient(to bottom, var(--ydd-csj-pink), var(--ydd-csj-purple), var(--ydd-csj-cyan));
}

.ydd-csj__phase-impact strong {
	color: #281949;
	font-size: 13px;
	line-height: 1.4;
}

.ydd-csj__stage-words {
	mix-blend-mode: multiply;
}

.ydd-csj__stage-words span {
	color: rgba(91, 56, 173, 0.095);
	opacity: calc(var(--ydd-stage-opacity) * 0.3);
	filter: blur(0.7px);
}

.ydd-csj__module-label {
	border-color: rgba(77, 47, 145, 0.13);
	color: rgba(44, 29, 80, 0.72);
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 12px 34px rgba(70, 42, 132, 0.1);
}

.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="payment"],
.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="access"],
.ydd-csj[data-active-phase="2"] .ydd-csj__module-label[data-module="team"] {
	color: #261747;
	border-color: rgba(0, 174, 202, 0.34);
}

.ydd-csj__signal-feed {
	width: min(340px, 25vw);
	left: auto;
	right: clamp(54px, 5vw, 92px);
	padding: 13px 15px 10px;
	border: 1px solid rgba(76, 47, 145, 0.12);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 22px 60px rgba(72, 42, 138, 0.12);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.ydd-csj[data-active-phase="1"] .ydd-csj__signal-feed,
.ydd-csj[data-active-phase="3"] .ydd-csj__signal-feed {
	left: clamp(54px, 5vw, 92px);
	right: auto;
}

.ydd-csj__signal-feed-head {
	border-bottom-color: rgba(64, 39, 120, 0.1);
	color: rgba(48, 31, 83, 0.55);
}

.ydd-csj__signal-item {
	border-bottom-color: rgba(61, 38, 115, 0.07);
	color: rgba(43, 28, 78, calc(0.26 + var(--ydd-feed-active) * 0.69));
}

.ydd-csj__signal-item span {
	color: rgba(49, 31, 91, 0.38);
}

.ydd-csj__signal-item em {
	color: rgba(0, 139, 163, calc(var(--ydd-feed-active) * 0.9));
}

.ydd-csj__system-layers span {
	border-color: rgba(78, 49, 148, calc(0.08 + var(--ydd-layer-active) * 0.2));
	color: rgba(47, 30, 87, calc(0.38 + var(--ydd-layer-active) * 0.62));
	background: rgba(255, 255, 255, calc(0.55 + var(--ydd-layer-active) * 0.38));
	box-shadow: 0 8px calc(12px + var(--ydd-layer-active) * 24px) rgba(79, 48, 150, calc(0.035 + var(--ydd-layer-active) * 0.08));
}

.ydd-csj__system-layers b {
	color: rgba(0, 126, 150, calc(0.4 + var(--ydd-layer-active) * 0.6));
}

.ydd-csj[data-active-phase="4"] .ydd-csj__system-layers span:last-child {
	background: linear-gradient(100deg, rgba(117, 84, 255, 0.16), rgba(0, 207, 232, 0.11)), rgba(255, 255, 255, 0.94);
}

.ydd-csj__rail-line {
	background: rgba(70, 42, 131, 0.15);
}

.ydd-csj__rail-point {
	border-color: rgba(74, 45, 140, 0.16);
	color: rgba(49, 31, 90, 0.46);
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 8px 20px rgba(78, 45, 145, 0.08);
}

.ydd-csj__rail-point.is-active,
.ydd-csj__rail-point.is-complete {
	color: #3c2484;
	border-color: rgba(0, 174, 202, 0.5);
}

.ydd-csj__rail-point::after {
	border-color: rgba(76, 47, 145, 0.14);
	color: rgba(42, 26, 78, 0.78);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 26px rgba(73, 43, 137, 0.11);
}

.ydd-csj__resolution {
	min-height: 100vh;
	overflow: clip;
	padding: clamp(92px, 9vw, 150px) clamp(24px, 5.5vw, 96px);
	color: #20133d;
	background:
		radial-gradient(circle at 12% 32%, rgba(255, 79, 154, 0.18), transparent 31%),
		radial-gradient(circle at 84% 24%, rgba(0, 207, 232, 0.2), transparent 31%),
		radial-gradient(circle at 52% 100%, rgba(117, 84, 255, 0.17), transparent 43%),
		linear-gradient(145deg, #fffaff 0%, #edf7ff 48%, #f8f0ff 100%);
}

.ydd-csj__resolution::before {
	height: 110px;
	background: linear-gradient(to bottom, #f2f2ff, transparent);
}

.ydd-csj__resolution::after {
	color: rgba(55, 34, 103, 0.3);
}

.ydd-csj__resolution-grid {
	opacity: 0.45;
	background-image:
		linear-gradient(rgba(66, 41, 126, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(66, 41, 126, 0.05) 1px, transparent 1px);
}

.ydd-csj__resolution-inner {
	width: min(100%, 1440px);
	grid-template-columns: minmax(380px, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(64px, 7vw, 120px);
}

.ydd-csj__resolution-inner > * {
	min-width: 0;
}

.ydd-csj__resolution-mark {
	width: min(39vw, 500px);
	border-color: rgba(83, 51, 157, 0.13);
	border-radius: 34%;
	background:
		radial-gradient(circle, rgba(0, 207, 232, 0.15), transparent 43%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 233, 255, 0.76));
	box-shadow:
		0 0 0 18px rgba(255, 255, 255, 0.34),
		0 0 140px rgba(117, 84, 255, 0.18),
		0 44px 100px rgba(76, 44, 145, 0.16);
}

.ydd-csj__resolution-mark::before {
	border-color: rgba(85, 51, 158, 0.15);
}

.ydd-csj__resolution-mark::after {
	border-color: rgba(0, 174, 202, 0.18);
}

.ydd-csj__resolution-mark img {
	width: 68%;
	height: 68%;
	border-radius: 22%;
	clip-path: inset(0 round 22%);
	object-fit: cover;
	box-shadow: 0 28px 68px rgba(43, 26, 86, 0.24), 0 0 58px rgba(0, 207, 232, 0.18);
}

.ydd-csj__resolution-ring {
	inset: 13%;
	border-color: rgba(0, 174, 202, 0.38);
	box-shadow: 0 0 54px rgba(0, 207, 232, 0.12), 0 0 30px rgba(117, 84, 255, 0.08) inset;
}

.ydd-csj__resolution-copy {
	max-width: 820px;
}

.ydd-csj__resolution h3 {
	color: #211340;
	font-size: clamp(48px, 5vw, 80px);
	font-weight: 680;
	letter-spacing: -0.055em;
	line-height: 0.98;
}

.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
	max-width: 760px;
	color: rgba(53, 38, 84, 0.75);
	font-size: clamp(17px, 1.3vw, 21px);
	font-weight: 510;
	line-height: 1.65;
}

.ydd-csj__trust-row span {
	border-color: rgba(82, 50, 155, 0.13);
	color: #3a285f;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 8px 24px rgba(74, 43, 140, 0.07);
}

.ydd-csj__capability-grid {
	border-color: rgba(83, 51, 156, 0.13);
	background: rgba(83, 51, 156, 0.1);
	box-shadow: 0 18px 50px rgba(75, 43, 142, 0.08);
}

.ydd-csj__capability-grid span {
	color: #38255f;
	background: rgba(255, 255, 255, 0.91);
	font-size: 13px;
}

.ydd-csj__capability-grid b {
	color: #8c43da;
}

.ydd-csj__button--primary,
.ydd-csj__button--primary:visited {
	color: #fff !important;
	background: linear-gradient(112deg, #744cff 0%, #a34fe8 43%, #ff4f9a 100%);
	box-shadow: 0 18px 45px rgba(127, 66, 220, 0.24);
}

.ydd-csj__button--primary:hover,
.ydd-csj__button--primary:focus-visible {
	color: #fff !important;
	background: linear-gradient(112deg, #6639ed 0%, #9842df 43%, #f23f8c 100%);
	box-shadow: 0 22px 54px rgba(127, 66, 220, 0.32);
}

.ydd-csj__button--secondary,
.ydd-csj__button--secondary:visited {
	color: #3a2664 !important;
	border-color: rgba(79, 48, 149, 0.2);
	background: rgba(255, 255, 255, 0.72);
}

.ydd-csj__button--secondary:hover,
.ydd-csj__button--secondary:focus-visible {
	color: #2b1851 !important;
	border-color: rgba(117, 84, 255, 0.46);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 16px 44px rgba(78, 45, 145, 0.13);
}

.ydd-csj__button:focus-visible {
	outline-color: rgba(117, 84, 255, 0.38);
}

.ydd-csj__fallback-browser {
	border-color: rgba(78, 49, 148, 0.18);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 233, 255, 0.96));
	box-shadow: 0 38px 100px rgba(76, 43, 145, 0.18), 0 0 70px rgba(0, 207, 232, 0.1);
}

.ydd-csj__fallback-browser-line {
	background: #645482;
}

.ydd-csj__fallback-browser-button {
	background: linear-gradient(90deg, var(--ydd-csj-purple), var(--ydd-csj-pink));
}

.ydd-csj__fallback-node {
	color: #352359;
	border-color: rgba(76, 47, 145, 0.16);
	background: rgba(255, 255, 255, 0.91);
	box-shadow: 0 16px 40px rgba(73, 42, 138, 0.1);
}

@media (max-width: 1380px) and (min-width: 1181px) {
	.ydd-csj__phase {
		width: min(49vw, 720px);
		padding: 27px 29px 25px 33px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(39px, 3.35vw, 54px);
	}

	.ydd-csj__phase--left { left: 40px; }
	.ydd-csj__phase--right { right: 66px; }
}

@media (max-width: 1180px) {
	.ydd-csj__resolution {
		padding-inline: clamp(24px, 6vw, 70px);
	}

	.ydd-csj__resolution-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 62px;
		width: min(100%, 920px);
		text-align: center;
	}

	.ydd-csj__resolution-mark {
		width: min(56vw, 420px);
	}

	.ydd-csj__resolution-copy,
	.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
		max-width: 100%;
	}

	.ydd-csj__trust-row,
	.ydd-csj__actions {
		justify-content: center;
	}
}

@media (max-width: 1180px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(58vw, 670px);
		padding: 25px 27px 23px 31px;
	}

	.ydd-csj__phase--left { left: 30px; }
	.ydd-csj__phase--right { right: 58px; }

	.ydd-csj__phase h3 {
		font-size: clamp(36px, 4.1vw, 49px);
	}

	.ydd-csj__signal-feed {
		display: none;
	}
}

@media (max-height: 720px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(56vw, 680px);
		padding: 17px 20px 16px 24px;
	}

	.ydd-csj__phase-index {
		margin-bottom: 6px;
		font-size: 8px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(29px, 3.2vw, 42px);
	}

	.ydd-csj__phase > p:last-of-type {
		margin-top: 7px;
		font-size: 11px;
		line-height: 1.35;
	}

	.ydd-csj__phase-flow {
		margin-top: 8px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 51px;
		padding: 7px 9px;
	}

	.ydd-csj__phase-flow small,
	.ydd-csj__phase-impact small {
		font-size: 6px;
	}

	.ydd-csj__phase-flow strong {
		font-size: 9px;
	}

	.ydd-csj__phase-trace,
	.ydd-csj__phase-proof {
		margin-top: 7px;
	}

	.ydd-csj__phase-trace {
		padding-top: 7px;
	}

	.ydd-csj__phase-trace-head > span,
	.ydd-csj__phase-proof-head > span,
	.ydd-csj__phase-trace-head em,
	.ydd-csj__phase-proof-head em {
		font-size: 6px;
	}

	.ydd-csj__phase-trace ol,
	.ydd-csj__phase-proof-items {
		margin-top: 5px;
	}

	.ydd-csj__phase-trace li {
		min-height: 35px;
		grid-template-columns: 18px minmax(0, 1fr);
		padding: 5px 6px;
	}

	.ydd-csj__phase-trace li b {
		width: 18px;
		height: 18px;
		font-size: 6px;
	}

	.ydd-csj__phase-trace li span,
	.ydd-csj__phase-proof-items > span {
		font-size: 7px;
	}

	.ydd-csj__phase-proof {
		padding: 7px 8px 8px;
	}

	.ydd-csj__phase-proof-items > span {
		min-height: 29px;
		padding: 5px 6px;
	}

	.ydd-csj__phase-proof-items i {
		width: 13px;
		height: 13px;
		flex-basis: 13px;
	}

	.ydd-csj__phase-proof-items i::after {
		left: 4px;
		top: 3px;
		width: 5px;
		height: 3px;
		border-width: 0 0 1.5px 1.5px;
	}

	.ydd-csj__phase-impact {
		margin-top: 6px;
		padding: 6px 8px;
	}

	.ydd-csj__phase-impact strong {
		font-size: 8px;
	}
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 760vh;
		min-height: 4700px;
	}

	.ydd-csj__intro {
		top: 40%;
	}

	.ydd-csj__phase {
		bottom: max(48px, calc(env(safe-area-inset-bottom) + 38px));
		width: calc(100% - 22px);
		padding: 16px 15px 14px 19px;
		border-radius: 17px;
	}

	.ydd-csj__phase,
	.ydd-csj__phase--left,
	.ydd-csj__phase--right,
	.ydd-csj__phase--center {
		left: 50%;
		right: auto;
		top: auto;
	}

	.ydd-csj__phase--center {
		bottom: max(48px, calc(env(safe-area-inset-bottom) + 38px));
		padding-inline: 19px 15px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(26px, 7.4vw, 36px);
		line-height: 1;
	}

	.ydd-csj__phase > p:last-of-type {
		font-size: 11px;
	}

	.ydd-csj__phase-flow {
		grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
		gap: 5px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 55px;
		padding: 8px;
	}

	.ydd-csj__phase-flow small {
		font-size: 6px;
	}

	.ydd-csj__phase-flow strong {
		font-size: 8px;
	}

	.ydd-csj__phase-trace ol,
	.ydd-csj__phase-proof-items {
		gap: 4px;
	}

	.ydd-csj__phase-trace li {
		min-height: 40px;
		grid-template-columns: 16px minmax(0, 1fr);
		gap: 4px;
		padding: 5px;
	}

	.ydd-csj__phase-trace li b {
		width: 16px;
		height: 16px;
		font-size: 5px;
	}

	.ydd-csj__phase-trace li span,
	.ydd-csj__phase-proof-items > span {
		font-size: 6.7px;
	}

	.ydd-csj__phase-proof {
		padding: 8px;
	}

	.ydd-csj__phase-proof-head > span,
	.ydd-csj__phase-proof-head em,
	.ydd-csj__phase-trace-head > span,
	.ydd-csj__phase-trace-head em {
		font-size: 5.5px;
	}

	.ydd-csj__phase-proof-items > span {
		min-height: 34px;
		gap: 4px;
		padding: 5px;
	}

	.ydd-csj__phase-proof-items i {
		width: 13px;
		height: 13px;
		flex-basis: 13px;
	}

	.ydd-csj__phase-proof-items i::after {
		left: 4px;
		top: 3px;
		width: 5px;
		height: 3px;
		border-width: 0 0 1.5px 1.5px;
	}

	.ydd-csj__phase-impact strong {
		font-size: 9px;
	}

	.ydd-csj__signal-feed {
		display: none;
	}

	.ydd-csj__resolution {
		padding: 88px 18px 104px;
	}

	.ydd-csj__resolution-inner {
		gap: 48px;
	}

	.ydd-csj__resolution-mark {
		width: min(76vw, 330px);
	}

	.ydd-csj__resolution h3 {
		font-size: clamp(38px, 11vw, 56px);
	}

	.ydd-csj__resolution-copy > p:not(.ydd-csj__eyebrow) {
		font-size: 15px;
	}

	.ydd-csj__trust-row {
		justify-content: stretch;
	}

	.ydd-csj__trust-row span {
		flex: 1 1 100%;
		justify-content: center;
	}

	.ydd-csj__capability-grid {
		grid-template-columns: 1fr;
	}

	.ydd-csj__actions {
		align-items: stretch;
	}

	.ydd-csj__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__click-flash {
		display: none;
	}
}

/* V6 — premium surface-to-system hierarchy, tactile click, and paced evidence. */
.ydd-csj {
	--ydd-csj-bg: #f7f9ff;
	--ydd-csj-bg-soft: #e9f0ff;
	--ydd-csj-panel: rgba(255, 255, 255, 0.88);
	--ydd-csj-panel-strong: rgba(255, 255, 255, 0.97);
	--ydd-csj-text: #111d43;
	--ydd-csj-muted: #52617e;
	--ydd-csj-purple: #315be8;
	--ydd-csj-purple-bright: #6379f0;
	--ydd-csj-cyan: #00bed2;
	--ydd-csj-cyan-soft: #087f91;
	--ydd-csj-pink: #315be8;
	--ydd-csj-coral: #6d63ca;
	--ydd-csj-yellow: #c5a454;
	--ydd-csj-line: rgba(29, 57, 119, 0.13);
	color: var(--ydd-csj-text);
	background: #f8faff;
}

.ydd-csj__scroll-track {
	height: 980vh;
	min-height: 6200px;
	background:
		radial-gradient(circle at 8% 18%, rgba(76, 103, 226, 0.17), transparent 30%),
		radial-gradient(circle at 89% 21%, rgba(0, 190, 210, 0.18), transparent 32%),
		radial-gradient(circle at 51% 72%, rgba(115, 98, 194, 0.12), transparent 38%),
		linear-gradient(150deg, #fffdf8 0%, #f5f8ff 39%, #eef5ff 69%, #f6fbfb 100%);
}

.ydd-csj__sticky {
	background:
		radial-gradient(circle at 16% 18%, rgba(64, 94, 222, 0.16), transparent 35%),
		radial-gradient(circle at 84% 31%, rgba(0, 187, 207, 0.17), transparent 35%),
		radial-gradient(circle at 49% 104%, rgba(108, 91, 187, 0.13), transparent 44%),
		linear-gradient(145deg, #fffdf8 0%, #f2f7ff 51%, #eff9fa 100%);
}

.ydd-csj__atmosphere {
	background:
		linear-gradient(rgba(36, 67, 135, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(36, 67, 135, 0.04) 1px, transparent 1px);
	background-size: 72px 72px;
}

.ydd-csj__atmosphere::before {
	border-color: rgba(52, 85, 172, 0.14);
	box-shadow:
		0 0 190px rgba(68, 95, 203, 0.09) inset,
		0 0 230px rgba(0, 181, 202, 0.08);
}

.ydd-csj__atmosphere::after {
	background: radial-gradient(circle, rgba(62, 94, 219, 0.22), rgba(94, 82, 175, 0.07) 43%, transparent 70%);
}

.ydd-csj__aurora--one {
	background: #586ed6;
	opacity: 0.2;
}

.ydd-csj__aurora--two {
	background: #08bcca;
	opacity: 0.17;
}

.ydd-csj__noise {
	opacity: 0.042;
}

.ydd-csj__canvas {
	filter: saturate(1.08) contrast(1.035) brightness(1.015);
}

.ydd-csj__click-flash {
	opacity: calc(var(--ydd-click-flash) * 0.94);
	background:
		radial-gradient(circle 76px at 50% 78%, transparent 0 34px, rgba(44, 220, 232, 0.94) 35px 37px, transparent 38px 49px, rgba(49, 91, 232, 0.58) 50px 52px, transparent 53px),
		conic-gradient(from 7deg at 50% 78%, transparent 0 7%, rgba(40, 89, 223, 0.42) 7.3% 7.8%, transparent 8.1% 20%, rgba(0, 185, 205, 0.42) 20.3% 20.8%, transparent 21.1% 42%, rgba(104, 94, 192, 0.35) 42.3% 42.8%, transparent 43.1% 66%, rgba(0, 185, 205, 0.4) 66.3% 66.8%, transparent 67.1% 88%, rgba(197, 164, 84, 0.36) 88.3% 88.8%, transparent 89.1% 100%);
	-webkit-mask-image: radial-gradient(circle 145px at 50% 78%, #000 0 72%, transparent 100%);
	mask-image: radial-gradient(circle 145px at 50% 78%, #000 0 72%, transparent 100%);
	filter: drop-shadow(0 0 15px rgba(27, 139, 214, 0.32));
	transform: scale(calc(0.9 + var(--ydd-click-flash) * 0.1));
	transform-origin: 50% 78%;
}

.ydd-csj__hud {
	color: rgba(23, 42, 85, 0.65);
}

.ydd-csj__hud-brand,
.ydd-csj__hud-status {
	border-color: rgba(32, 68, 143, 0.11);
	background: rgba(255, 255, 255, 0.74);
	box-shadow: 0 10px 36px rgba(35, 66, 133, 0.08);
}

.ydd-csj__hud-brand::after {
	border-left-color: rgba(25, 54, 116, 0.14);
	color: rgba(25, 54, 116, 0.34);
}

.ydd-csj__hud-status strong {
	color: #2149bb;
	border-color: rgba(49, 91, 232, 0.18);
	background: rgba(49, 91, 232, 0.06);
}

.ydd-csj__intro {
	top: clamp(156px, 23.5vh, 246px);
	width: min(calc(100% - clamp(48px, 8vw, 132px)), 1120px);
	transform: translate(-50%, -50%) translateY(calc((1 - var(--ydd-csj-intro-opacity)) * -28px)) scale(calc(0.987 + var(--ydd-csj-intro-opacity) * 0.013));
}

.ydd-csj__intro::before {
	width: 108%;
	height: 145%;
	background: radial-gradient(ellipse, rgba(255, 255, 255, 0.95), rgba(250, 252, 255, 0.69) 48%, transparent 73%);
}

.ydd-csj__eyebrow {
	margin-bottom: 10px;
	color: #3459c7;
	font-size: 9px;
	letter-spacing: 0.27em;
}

.ydd-csj__intro h2 {
	width: 100%;
	padding: 0.12em 0.12em 0.13em;
	overflow: visible;
	color: #101b3c;
	font-size: var(--ydd-fitted-headline-size, clamp(48px, min(5.35vw, 10vh), 92px));
	font-weight: 680;
	letter-spacing: -0.058em;
	line-height: 1;
	text-shadow: 0 18px 52px rgba(34, 61, 121, 0.09);
}

.ydd-csj__intro h2 > span {
	overflow: visible;
	line-height: 1;
}

.ydd-csj__headline-accent {
	padding-bottom: 0.1em;
	background-image: linear-gradient(101deg, #172857 1%, #315be8 40%, #6d63ca 67%, #00aebf 98%);
	filter: drop-shadow(0 15px 28px rgba(50, 84, 200, 0.13));
}

.ydd-csj__intro-copy {
	width: min(100%, 770px);
	margin-top: 17px;
	color: rgba(39, 57, 94, 0.74);
	font-size: clamp(13px, 1vw, 17px);
	font-weight: 540;
	line-height: 1.52;
}

.ydd-csj__intro-scroll-callout {
	margin-top: 15px;
	border-color: rgba(49, 91, 232, 0.18);
	color: #17254c;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
	box-shadow: 0 17px 48px rgba(35, 65, 136, 0.12), 0 0 28px rgba(0, 183, 202, 0.07) inset;
}

.ydd-csj__intro-scroll-callout em {
	color: rgba(43, 59, 94, 0.59);
}

.ydd-csj__intro-scroll-glyph {
	border-color: rgba(49, 91, 232, 0.4);
	background: rgba(49, 91, 232, 0.045);
}

.ydd-csj__mouse span {
	background: #315be8;
	box-shadow: 0 0 11px rgba(49, 91, 232, 0.45);
}

.ydd-csj__scroll-guide {
	border-color: rgba(34, 67, 136, 0.14);
	color: #17254c;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.94));
	box-shadow:
		0 24px 70px rgba(34, 62, 126, 0.14),
		0 0 0 1px rgba(255, 255, 255, 0.84) inset,
		0 0 58px rgba(0, 182, 201, 0.07) inset;
}

.ydd-csj__scroll-guide-copy strong {
	color: #14234a;
}

.ydd-csj__scroll-guide-copy span {
	color: rgba(39, 56, 91, 0.59);
}

.ydd-csj__scroll-orbit {
	border-color: rgba(49, 91, 232, 0.29);
	background: radial-gradient(circle, rgba(0, 185, 205, 0.09), transparent 68%);
}

.ydd-csj__phase {
	--ydd-heading-reveal: 0;
	--ydd-flow-reveal: 0;
	--ydd-flow-response: 0;
	--ydd-trace-reveal: 0;
	--ydd-trace-sequence: 0;
	--ydd-proof-reveal: 0;
	--ydd-proof-sequence: 0;
	--ydd-impact-reveal: 0;
	width: min(52vw, 860px);
	padding: 32px 34px 30px 39px;
	border-color: rgba(38, 71, 145, calc(0.08 + var(--ydd-phase-opacity) * 0.16));
	border-radius: 25px;
	color: #142143;
	background:
		linear-gradient(132deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.94)),
		rgba(255, 255, 255, 0.95);
	box-shadow:
		0 44px 125px rgba(28, 58, 126, calc(var(--ydd-phase-opacity) * 0.18)),
		0 0 0 1px rgba(255, 255, 255, calc(var(--ydd-phase-opacity) * 0.86)) inset,
		0 0 105px rgba(0, 181, 202, calc(var(--ydd-phase-opacity) * 0.045)) inset;
	-webkit-clip-path: inset(0 0 var(--ydd-card-clip) 0 round 25px);
	clip-path: inset(0 0 var(--ydd-card-clip) 0 round 25px);
}

.ydd-csj__phase::before {
	height: 4px;
	background: linear-gradient(90deg, #c5a454, #315be8 34%, #6d63ca 61%, #00b7ca 100%);
	box-shadow: 0 0 17px rgba(49, 91, 232, 0.22);
}

.ydd-csj__phase::after,
.ydd-csj__phase--right::after,
.ydd-csj__phase--center::after {
	background: radial-gradient(ellipse at 34% 40%, rgba(49, 91, 232, 0.075), rgba(0, 183, 202, 0.035) 44%, transparent 73%);
}

.ydd-csj__phase--left {
	left: clamp(34px, 4.1vw, 74px);
}

.ydd-csj__phase--right {
	right: clamp(62px, 4.8vw, 92px);
}

@media (min-width: 783px) {
	.ydd-csj__phase--left {
		transform:
			translateY(calc(-50% + (1 - var(--ydd-phase-enter)) * 22px - var(--ydd-phase-exit) * 15px))
			translateX(calc((1 - var(--ydd-phase-enter)) * -34px + var(--ydd-phase-exit) * 15px))
			scale(calc(0.986 + var(--ydd-phase-enter) * 0.014 - var(--ydd-phase-exit) * 0.008));
	}

	.ydd-csj__phase--right {
		transform:
			translateY(calc(-50% + (1 - var(--ydd-phase-enter)) * 22px - var(--ydd-phase-exit) * 15px))
			translateX(calc((1 - var(--ydd-phase-enter)) * 34px - var(--ydd-phase-exit) * 15px))
			scale(calc(0.986 + var(--ydd-phase-enter) * 0.014 - var(--ydd-phase-exit) * 0.008));
	}

	.ydd-csj__phase--center {
		transform:
			translateX(-50%)
			translateY(calc((1 - var(--ydd-phase-enter)) * 22px - var(--ydd-phase-exit) * 15px))
			scale(calc(0.986 + var(--ydd-phase-enter) * 0.014 - var(--ydd-phase-exit) * 0.008));
	}
}

.ydd-csj__phase-rule {
	background: linear-gradient(to bottom, #c5a454, #315be8, #00b7ca);
	box-shadow: 0 0 17px rgba(49, 91, 232, 0.22);
}

.ydd-csj__phase-ghost {
	color: rgba(41, 76, 166, calc(var(--ydd-phase-opacity) * 0.048));
}

.ydd-csj__phase-index,
.ydd-csj__phase h3,
.ydd-csj__phase > p:last-of-type {
	opacity: var(--ydd-heading-reveal);
	transform: translateY(calc((1 - var(--ydd-heading-reveal)) * 13px));
}

.ydd-csj__phase-index {
	margin-bottom: 13px;
	color: #3157c2;
	font-size: 11px;
}

.ydd-csj__phase h3 {
	max-width: 790px;
	color: #111d40;
	font-size: clamp(45px, 3.7vw, 66px);
	font-weight: 690;
	line-height: 0.99;
}

.ydd-csj__phase > p:last-of-type {
	max-width: 760px;
	margin-top: 15px;
	color: rgba(42, 58, 92, 0.76);
	font-size: clamp(16px, 1.08vw, 19px);
	line-height: 1.5;
}

.ydd-csj__phase-flow {
	opacity: var(--ydd-flow-reveal);
	transform: translateY(calc((1 - var(--ydd-flow-reveal)) * 12px));
}

.ydd-csj__phase-flow > span:first-child {
	opacity: var(--ydd-flow-reveal);
}

.ydd-csj__phase-flow > i,
.ydd-csj__phase-flow > span:last-child {
	opacity: var(--ydd-flow-response);
	transform: translateX(calc((1 - var(--ydd-flow-response)) * -10px));
}

.ydd-csj__phase-flow > span {
	border-color: rgba(39, 75, 155, 0.13);
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 9px 30px rgba(34, 65, 135, 0.055);
}

.ydd-csj__phase-flow small,
.ydd-csj__phase-impact small {
	color: #3159c6;
}

.ydd-csj__phase-flow strong {
	color: #213156;
}

.ydd-csj__phase-flow > i {
	color: #087f91;
}

.ydd-csj__phase-flow > i::before {
	background: linear-gradient(135deg, rgba(49, 91, 232, 0.11), rgba(0, 183, 202, 0.12));
	box-shadow: 0 0 0 calc(var(--ydd-flow-response) * 5px) rgba(49, 91, 232, 0.035);
}

.ydd-csj__phase-trace {
	opacity: var(--ydd-trace-reveal);
	transform: translateY(calc((1 - var(--ydd-trace-reveal)) * 12px));
}

.ydd-csj__phase-trace::before {
	width: calc(12% + var(--ydd-trace-sequence) * 88%);
	background: linear-gradient(90deg, #315be8, #00b8ca, transparent);
}

.ydd-csj__phase-trace li {
	--ydd-trace-active: clamp(0, calc(var(--ydd-trace-sequence) * 4 - var(--ydd-trace-index)), 1);
	border-color: rgba(0, 151, 176, calc(0.1 + var(--ydd-trace-active) * 0.22));
	background: linear-gradient(135deg, rgba(236, 251, 253, 0.94), rgba(240, 245, 255, 0.86));
}

.ydd-csj__phase-trace li::after {
	background: linear-gradient(90deg, #315be8, #00b7ca);
}

.ydd-csj__phase-proof {
	opacity: var(--ydd-proof-reveal);
	transform: translateY(calc((1 - var(--ydd-proof-reveal)) * 12px));
	border-color: rgba(47, 84, 170, 0.13);
	background: linear-gradient(115deg, rgba(244, 247, 255, 0.94), rgba(235, 253, 253, 0.9));
	box-shadow: 0 12px 34px rgba(34, 67, 140, 0.055);
}

.ydd-csj__phase-proof-items > span {
	--ydd-proof-active: clamp(0, calc(var(--ydd-proof-sequence) * 4 - var(--ydd-proof-index)), 1);
	border-color: rgba(31, 145, 132, calc(0.12 + var(--ydd-proof-active) * 0.2));
}

.ydd-csj__phase-proof-items i {
	background: linear-gradient(135deg, #25bba6, #315be8);
	box-shadow: 0 5px 13px rgba(38, 120, 148, 0.2);
}

.ydd-csj__phase-impact {
	opacity: var(--ydd-impact-reveal);
	transform: translateY(calc((1 - var(--ydd-impact-reveal)) * 12px));
	border-color: rgba(49, 91, 232, 0.14);
	background: linear-gradient(90deg, rgba(239, 244, 255, 0.96), rgba(237, 252, 252, 0.92));
}

.ydd-csj__phase-impact > i {
	background: linear-gradient(to bottom, #c5a454, #315be8, #00b7ca);
}

.ydd-csj__phase-impact strong {
	color: #18274d;
	font-size: 14px;
}

.ydd-csj__stage-words span {
	color: rgba(43, 78, 169, 0.09);
}

.ydd-csj__module-label {
	border-color: rgba(34, 68, 140, 0.13);
	color: rgba(29, 49, 90, 0.74);
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 12px 34px rgba(31, 61, 125, 0.09);
}

.ydd-csj__signal-feed {
	border-color: rgba(31, 65, 136, 0.12);
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 22px 60px rgba(29, 58, 122, 0.11);
}

.ydd-csj__system-layers span {
	border-color: rgba(34, 69, 145, calc(0.08 + var(--ydd-layer-active) * 0.2));
	color: rgba(29, 49, 91, calc(0.38 + var(--ydd-layer-active) * 0.62));
	background: rgba(255, 255, 255, calc(0.57 + var(--ydd-layer-active) * 0.37));
	box-shadow: 0 8px calc(12px + var(--ydd-layer-active) * 24px) rgba(31, 64, 135, calc(0.035 + var(--ydd-layer-active) * 0.075));
}

.ydd-csj[data-active-phase="4"] .ydd-csj__system-layers span:last-child {
	background: linear-gradient(100deg, rgba(49, 91, 232, 0.14), rgba(0, 183, 202, 0.1)), rgba(255, 255, 255, 0.95);
}

.ydd-csj__resolution {
	color: #142143;
	background:
		radial-gradient(circle at 12% 32%, rgba(54, 91, 218, 0.15), transparent 31%),
		radial-gradient(circle at 84% 24%, rgba(0, 183, 202, 0.17), transparent 31%),
		radial-gradient(circle at 52% 100%, rgba(110, 96, 186, 0.12), transparent 43%),
		linear-gradient(145deg, #fffdf8 0%, #eff7ff 48%, #f1f9f9 100%);
}

.ydd-csj__resolution-mark {
	border-color: rgba(38, 73, 150, 0.13);
	background:
		radial-gradient(circle, rgba(0, 183, 202, 0.13), transparent 43%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(235, 242, 255, 0.8));
	box-shadow:
		0 0 0 18px rgba(255, 255, 255, 0.38),
		0 0 140px rgba(49, 91, 232, 0.16),
		0 44px 100px rgba(28, 57, 121, 0.15);
}

.ydd-csj__resolution h3 {
	color: #111d40;
}

.ydd-csj__button--primary,
.ydd-csj__button--primary:visited {
	background: linear-gradient(112deg, #244dcf 0%, #315be8 48%, #00a9bb 100%);
	box-shadow: 0 18px 45px rgba(43, 79, 191, 0.24);
}

.ydd-csj__button--primary:hover,
.ydd-csj__button--primary:focus-visible {
	background: linear-gradient(112deg, #1d42bc 0%, #284fd8 48%, #009bad 100%);
	box-shadow: 0 22px 54px rgba(43, 79, 191, 0.31);
}

.ydd-csj__fallback-browser-button {
	background: linear-gradient(90deg, #315be8, #00b7ca);
}

.ydd-csj--fallback .ydd-csj__phase {
	--ydd-card-clip: 0%;
	--ydd-heading-reveal: 1;
	--ydd-flow-reveal: 1;
	--ydd-flow-response: 1;
	--ydd-trace-reveal: 1;
	--ydd-trace-sequence: 1;
	--ydd-proof-reveal: 1;
	--ydd-proof-sequence: 1;
	--ydd-impact-reveal: 1;
}

@media (max-width: 1380px) and (min-width: 1181px) {
	.ydd-csj__phase {
		width: min(53vw, 770px);
		padding: 27px 29px 25px 34px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(40px, 3.55vw, 56px);
	}
}

@media (max-width: 1180px) and (min-width: 783px) {
	.ydd-csj__phase {
		width: min(64vw, 710px);
		padding: 25px 27px 23px 32px;
	}

	.ydd-csj__phase--left { left: 28px; }
	.ydd-csj__phase--right { right: 52px; }

	.ydd-csj__phase h3 {
		font-size: clamp(37px, 4.25vw, 51px);
	}
}

@media (max-height: 760px) and (min-width: 783px) {
	.ydd-csj__intro {
		top: clamp(126px, 22vh, 164px);
	}

	.ydd-csj__intro h2 {
		font-size: var(--ydd-fitted-headline-size, clamp(38px, min(4.5vw, 8.4vh), 60px));
	}

	.ydd-csj__intro-copy {
		margin-top: 10px;
		font-size: 12px;
	}

	.ydd-csj__intro-scroll-callout {
		margin-top: 10px;
	}

	.ydd-csj__phase {
		width: min(66vw, 700px);
		padding: 16px 19px 15px 24px;
	}

	.ydd-csj__phase-index {
		margin-bottom: 5px;
		font-size: 8px;
	}

	.ydd-csj__phase h3 {
		font-size: clamp(30px, 3.3vw, 43px);
	}

	.ydd-csj__phase > p:last-of-type {
		margin-top: 6px;
		font-size: 11px;
		line-height: 1.35;
	}

	.ydd-csj__phase-flow {
		margin-top: 7px;
	}

	.ydd-csj__phase-flow > span {
		min-height: 49px;
		padding: 6px 8px;
	}

	.ydd-csj__phase-flow strong { font-size: 9px; }
	.ydd-csj__phase-flow small,
	.ydd-csj__phase-impact small { font-size: 6px; }

	.ydd-csj__phase-trace,
	.ydd-csj__phase-proof {
		margin-top: 6px;
	}

	.ydd-csj__phase-trace { padding-top: 6px; }
	.ydd-csj__phase-trace ol,
	.ydd-csj__phase-proof-items { margin-top: 4px; }

	.ydd-csj__phase-trace li {
		min-height: 33px;
		grid-template-columns: 18px minmax(0, 1fr);
		padding: 4px 6px;
	}

	.ydd-csj__phase-trace li b {
		width: 18px;
		height: 18px;
	}

	.ydd-csj__phase-trace li span,
	.ydd-csj__phase-proof-items > span { font-size: 7px; }

	.ydd-csj__phase-proof { padding: 6px 8px 7px; }
	.ydd-csj__phase-proof-items > span {
		min-height: 27px;
		padding: 4px 6px;
	}

	.ydd-csj__phase-proof-items i {
		width: 12px;
		height: 12px;
		flex-basis: 12px;
	}

	.ydd-csj__phase-impact {
		margin-top: 5px;
		padding: 5px 8px;
	}

	.ydd-csj__phase-impact strong { font-size: 8px; }
}

@media (max-width: 782px) {
	.ydd-csj__scroll-track {
		height: 900vh;
		min-height: 5600px;
	}

	.ydd-csj__intro {
		top: clamp(150px, 22.5vh, 205px);
		width: calc(100% - 30px);
	}

	.ydd-csj__intro h2 {
		font-size: var(--ydd-fitted-headline-size, clamp(34px, 10.8vw, 54px));
		line-height: 1;
	}

	.ydd-csj__intro-copy {
		margin-top: 12px;
		font-size: 12px;
		line-height: 1.46;
	}

	.ydd-csj__intro-scroll-callout {
		margin-top: 12px;
	}

	.ydd-csj__click-flash {
		background:
			radial-gradient(circle 60px at 50% 70%, transparent 0 27px, rgba(44, 220, 232, 0.94) 28px 30px, transparent 31px 39px, rgba(49, 91, 232, 0.58) 40px 42px, transparent 43px),
			conic-gradient(from 7deg at 50% 70%, transparent 0 12%, rgba(49, 91, 232, 0.4) 12.4% 13%, transparent 13.4% 38%, rgba(0, 185, 205, 0.42) 38.4% 39%, transparent 39.4% 64%, rgba(108, 99, 202, 0.34) 64.4% 65%, transparent 65.4% 88%, rgba(197, 164, 84, 0.35) 88.4% 89%, transparent 89.4% 100%);
		-webkit-mask-image: radial-gradient(circle 112px at 50% 70%, #000 0 72%, transparent 100%);
		mask-image: radial-gradient(circle 112px at 50% 70%, #000 0 72%, transparent 100%);
		transform-origin: 50% 70%;
	}

	.ydd-csj__phase {
		width: calc(100% - 20px);
		padding: 17px 16px 15px 20px;
	}

	.ydd-csj__phase,
	.ydd-csj__phase--left,
	.ydd-csj__phase--right,
	.ydd-csj__phase--center {
		left: 50%;
		right: auto;
		transform:
			translateX(-50%)
			translateY(calc((1 - var(--ydd-phase-enter)) * 20px - var(--ydd-phase-exit) * 12px))
			scale(calc(0.99 + var(--ydd-phase-enter) * 0.01 - var(--ydd-phase-exit) * 0.006));
	}

	.ydd-csj__phase h3 {
		font-size: clamp(28px, 7.7vw, 38px);
	}

	.ydd-csj__phase > p:last-of-type {
		font-size: 11.5px;
	}

	.ydd-csj__phase-trace li span,
	.ydd-csj__phase-proof-items > span {
		font-size: 7.2px;
	}

	.ydd-csj__phase-impact strong {
		font-size: 9.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__phase-index,
	.ydd-csj__phase h3,
	.ydd-csj__phase > p:last-of-type,
	.ydd-csj__phase-flow,
	.ydd-csj__phase-flow > span,
	.ydd-csj__phase-flow > i,
	.ydd-csj__phase-trace,
	.ydd-csj__phase-proof,
	.ydd-csj__phase-impact {
		transform: none;
	}
}

/* V6.3 — larger automated proof confirmations with optically centered ticks. */
.ydd-csj__phase-proof {
	margin-top: 16px;
	padding: 15px 16px 16px;
	border-color: rgba(47, 84, 170, 0.16);
	box-shadow:
		0 14px 38px rgba(34, 67, 140, 0.065),
		0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

.ydd-csj__phase-proof-head > span {
	font-size: 10px;
}

.ydd-csj__phase-proof-head em {
	font-size: 9px;
}

.ydd-csj__phase-proof-items {
	gap: 10px;
	margin-top: 12px;
}

.ydd-csj__phase-proof-items > span {
	position: relative;
	min-height: 54px;
	gap: 10px;
	padding: 11px 13px;
	overflow: hidden;
	border-radius: 11px;
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(242, 252, 253, 0.94)),
		rgba(255, 255, 255, 0.96);
	box-shadow:
		0 10px 25px rgba(34, 83, 139, calc(0.025 + var(--ydd-proof-active) * 0.055)),
		0 0 0 1px rgba(255, 255, 255, 0.72) inset;
	font-size: 12px;
	font-weight: 740;
	line-height: 1.3;
	opacity: calc(0.58 + var(--ydd-proof-active) * 0.42);
	transform: translateY(calc((1 - var(--ydd-proof-active)) * 7px)) scale(calc(0.985 + var(--ydd-proof-active) * 0.015));
}

.ydd-csj__phase-proof-items > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #315be8, #00b7ca 72%, #25bba6);
	box-shadow: 0 0 12px rgba(0, 183, 202, 0.24);
	transform: scaleX(var(--ydd-proof-active));
	transform-origin: left center;
}

.ydd-csj__phase-proof-items i {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: grid;
	place-items: center;
	box-shadow:
		0 7px 16px rgba(38, 120, 148, 0.22),
		0 0 0 4px rgba(49, 91, 232, calc(var(--ydd-proof-active) * 0.055));
	transform: scale(calc(0.8 + var(--ydd-proof-active) * 0.2));
}

.ydd-csj__phase-proof-items i::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1px solid rgba(49, 91, 232, 0);
	border-radius: 50%;
	opacity: var(--ydd-proof-active);
	animation: ydd-csj-proof-confirm 3.6s ease-out infinite;
}

.ydd-csj__phase-proof-items > span:nth-child(2) i::before { animation-delay: 0.55s; }
.ydd-csj__phase-proof-items > span:nth-child(3) i::before { animation-delay: 1.1s; }

.ydd-csj__phase-proof-items i::after {
	left: 50%;
	top: 50%;
	width: 9px;
	height: 5px;
	border-width: 0 0 2.2px 2.2px;
	opacity: var(--ydd-proof-active);
	transform: translate(-50%, -58%) rotate(-45deg) scale(var(--ydd-proof-active));
	transform-origin: center;
}

@keyframes ydd-csj-proof-confirm {
	0%, 54%, 100% {
		border-color: rgba(49, 91, 232, 0);
		transform: scale(0.72);
	}
	66% {
		border-color: rgba(0, 183, 202, 0.44);
		transform: scale(1);
	}
	82% {
		border-color: rgba(37, 187, 166, 0);
		transform: scale(1.28);
	}
}

@media (max-height: 760px) and (min-width: 783px) {
	.ydd-csj__phase-proof {
		margin-top: 7px;
		padding: 8px 10px 10px;
	}

	.ydd-csj__phase-proof-head > span { font-size: 8px; }
	.ydd-csj__phase-proof-head em { font-size: 7px; }

	.ydd-csj__phase-proof-items {
		gap: 6px;
		margin-top: 6px;
	}

	.ydd-csj__phase-proof-items > span {
		min-height: 40px;
		gap: 7px;
		padding: 7px 8px;
		font-size: 9px;
	}

	.ydd-csj__phase-proof-items i {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}

	.ydd-csj__phase-proof-items i::after {
		width: 7px;
		height: 4px;
		border-width: 0 0 1.8px 1.8px;
	}
}

@media (max-width: 782px) {
	.ydd-csj__phase-proof {
		margin-top: 8px;
		padding: 9px 9px 10px;
	}

	.ydd-csj__phase-proof-head > span { font-size: 7px; }
	.ydd-csj__phase-proof-head em { font-size: 6.5px; }

	.ydd-csj__phase-proof-items {
		gap: 5px;
		margin-top: 6px;
	}

	.ydd-csj__phase-proof-items > span {
		min-height: 40px;
		gap: 6px;
		padding: 6px 7px;
		font-size: 8.2px;
	}

	.ydd-csj__phase-proof-items i {
		width: 17px;
		height: 17px;
		flex-basis: 17px;
	}

	.ydd-csj__phase-proof-items i::after {
		width: 6px;
		height: 3.5px;
		border-width: 0 0 1.6px 1.6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ydd-csj__phase-proof-items i::before {
		animation: none;
	}
}

/* V6.4 — the cinematic journey is intentionally desktop-only. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.ydd-csj {
		display: none !important;
	}
}