:root {
			--bg: #140d1f;
			--panel: #1e1332;
			--panel-soft: #2a1a47;
			--text: #f1e7f5;
			--muted: #b0a3c2;
			--accent: #c084fc;
			--accent-2: #a78bfa;
			--line: #3b285a;
			--good: #86efac;
			--warn: #fbbf24;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
			line-height: 1.6;
			color: var(--text);
			background: linear-gradient(180deg, #0b0713 0%, #140d1f 100%);
		}

		header {
			padding: 56px 20px 36px;
			background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(192, 132, 252, 0.08));
			border-bottom: 1px solid var(--line);
		}

		.wrap {
			max-width: 1100px;
			margin: 0 auto;
		}

		h1,
		h2,
		h3 {
			margin-top: 0;
		}

		h1 {
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.15;
			margin-bottom: 16px;
		}

		.lead {
			max-width: 820px;
			color: var(--muted);
			font-size: 1.05rem;
		}

		main {
			padding: 28px 20px 48px;
		}

		section {
			background: var(--panel);
			border: 1px solid var(--line);
			border-radius: 18px;
			padding: 24px;
			margin-bottom: 22px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
		}

		.tag {
			display: inline-block;
			padding: 6px 10px;
			border-radius: 999px;
			background: rgba(192, 132, 252, 0.12);
			border: 1px solid rgba(192, 132, 252, 0.22);
			color: var(--accent);
			font-size: 0.88rem;
			margin-bottom: 14px;
		}

		.table-wrap {
			overflow-x: auto;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			min-width: 820px;
		}

		th,
		td {
			text-align: left;
			padding: 14px 12px;
			border-bottom: 1px solid var(--line);
			vertical-align: top;
		}

		th {
			color: var(--accent);
			font-weight: 700;
			background: rgba(255, 255, 255, 0.02);
		}

		tr:hover td {
			background: rgba(255, 255, 255, 0.02);
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 18px;
		}

		.card {
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 16px;
			padding: 18px;
		}

		.card h3 {
			margin-bottom: 12px;
			color: var(--accent-2);
		}

		.label {
			display: block;
			color: var(--good);
			font-weight: 700;
			margin-top: 10px;
			margin-bottom: 6px;
		}

		.label.warn {
			color: var(--warn);
		}

		ul {
			margin: 0;
			padding-left: 18px;
		}

		li + li {
			margin-top: 6px;
		}

		.concept {
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			gap: 20px;
			align-items: start;
		}

		.stack {
			display: grid;
			gap: 12px;
		}

		.layer {
			padding: 14px 16px;
			border-radius: 14px;
			border: 1px solid var(--line);
			background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(192, 132, 252, 0.05));
		}

		.layer strong {
			color: var(--accent);
		}

		.note {
			color: var(--muted);
			font-size: 0.95rem;
		}

		.split {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 20px;
		}

		.mini-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px;
		}

		.kicker {
			color: var(--accent);
			font-size: 0.9rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			margin-bottom: 10px;
		}

		.stat {
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 14px;
			padding: 16px;
		}

		.stat strong {
			display: block;
			color: var(--accent-2);
			margin-bottom: 6px;
		}

		.diagram-layout {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 20px;
			align-items: start;
		}

		.diagram-board {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
		}

		.figure-card {
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 16px;
			padding: 18px;
		}

		.figure-title {
			color: var(--accent-2);
			font-weight: 700;
			margin-bottom: 12px;
		}

		.vest-stage {
			position: relative;
			height: 360px;
			border-radius: 16px;
			background: radial-gradient(circle at top, rgba(167, 139, 250, 0.08), transparent 45%), rgba(255, 255, 255, 0.02);
			border: 1px dashed rgba(255, 255, 255, 0.08);
			overflow: hidden;
		}

		.torso {
			position: absolute;
			left: 50%;
			top: 46px;
			transform: translateX(-50%);
			width: 150px;
			height: 250px;
			background: linear-gradient(180deg, #372554 0%, #1f1335 100%);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 34px 34px 22px 22px;
		}

		.torso::before,
		.torso::after {
			content: "";
			position: absolute;
			top: 24px;
			width: 36px;
			height: 130px;
			background: linear-gradient(180deg, #2a1a47 0%, #1e1332 100%);
			border: 1px solid rgba(255, 255, 255, 0.06);
			border-radius: 18px;
		}

		.torso::before {
			left: -28px;
			transform: rotate(12deg);
		}

		.torso::after {
			right: -28px;
			transform: rotate(-12deg);
		}

		.collar {
			position: absolute;
			left: 50%;
			top: 16px;
			transform: translateX(-50%);
			width: 72px;
			height: 34px;
			border: 10px solid #140d1f;
			border-bottom: 0;
			border-radius: 34px 34px 0 0;
		}

		.zone {
			position: absolute;
			border-radius: 14px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04);
		}

		.zone.core {
			background: rgba(192, 132, 252, 0.24);
		}

		.zone.flex {
			background: rgba(167, 139, 250, 0.22);
		}

		.zone.support {
			background: rgba(251, 191, 36, 0.18);
		}

		.zone.front-core {
			left: 50%;
			top: 78px;
			transform: translateX(-50%);
			width: 92px;
			height: 126px;
		}

		.zone.front-upper {
			left: 50%;
			top: 52px;
			transform: translateX(-50%);
			width: 112px;
			height: 44px;
		}

		.zone.front-side-left {
			left: 34px;
			top: 104px;
			width: 34px;
			height: 100px;
		}

		.zone.front-side-right {
			right: 34px;
			top: 104px;
			width: 34px;
			height: 100px;
		}

		.zone.back-core {
			left: 50%;
			top: 88px;
			transform: translateX(-50%);
			width: 104px;
			height: 136px;
		}

		.zone.back-upper {
			left: 50%;
			top: 50px;
			transform: translateX(-50%);
			width: 122px;
			height: 50px;
		}

		.zone.back-lat-left {
			left: 30px;
			top: 112px;
			width: 38px;
			height: 104px;
		}

		.zone.back-lat-right {
			right: 30px;
			top: 112px;
			width: 38px;
			height: 104px;
		}

		.legend-list {
			display: grid;
			gap: 12px;
		}

		.legend-item {
			display: grid;
			grid-template-columns: 14px 1fr;
			gap: 12px;
			align-items: start;
			padding: 14px 16px;
			border-radius: 14px;
			background: var(--panel-soft);
			border: 1px solid var(--line);
		}

		.swatch {
			width: 14px;
			height: 14px;
			border-radius: 4px;
			margin-top: 4px;
		}

		.swatch.core {
			background: rgba(192, 132, 252, 0.9);
		}

		.swatch.flex {
			background: rgba(167, 139, 250, 0.9);
		}

		.swatch.support {
			background: rgba(251, 191, 36, 0.9);
		}

		.cutaway {
			display: grid;
			grid-template-columns: 1fr 0.95fr;
			gap: 20px;
			align-items: start;
		}

		.cutaway-visual {
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 16px;
			padding: 20px;
		}

		.cut-stage {
			position: relative;
			height: 250px;
			border-radius: 14px;
			background: radial-gradient(circle at 20% 30%, rgba(167, 139, 250, 0.08), transparent 35%), rgba(255, 255, 255, 0.02);
			border: 1px dashed rgba(255, 255, 255, 0.08);
			overflow: hidden;
		}

		.profile-body {
			position: absolute;
			right: 22px;
			top: 26px;
			width: 92px;
			height: 190px;
			background: linear-gradient(180deg, #3b285a 0%, #22153a 100%);
			border-radius: 42px 36px 30px 50px;
			border: 1px solid rgba(255, 255, 255, 0.08);
		}

		.profile-body::before {
			content: "";
			position: absolute;
			left: 10px;
			top: 18px;
			width: 34px;
			height: 72px;
			background: rgba(20, 13, 31, 0.85);
			border-radius: 18px;
		}

		.layer-stack {
			position: absolute;
			left: 34px;
			top: 62px;
			width: 122px;
			height: 110px;
			display: flex;
			border-radius: 18px;
			overflow: hidden;
			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
		}

		.slice {
			height: 100%;
		}

		.slice.outer {
			width: 16px;
			background: rgba(251, 191, 36, 0.78);
		}

		.slice.active {
			width: 32px;
			background: rgba(192, 132, 252, 0.72);
		}

		.slice.absorb {
			width: 46px;
			background: rgba(167, 139, 250, 0.72);
		}

		.slice.comfort {
			width: 28px;
			background: rgba(255, 255, 255, 0.22);
		}

		.impact-arrow {
			position: absolute;
			left: 10px;
			top: 102px;
			width: 72px;
			height: 4px;
			background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9));
		}

		.impact-arrow::after {
			content: "";
			position: absolute;
			right: -2px;
			top: -4px;
			border-left: 12px solid rgba(255, 255, 255, 0.9);
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
		}

		.process-flow {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 0;
			position: relative;
		}

		.process-step {
			position: relative;
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 16px;
			padding: 18px 16px;
			text-align: center;
		}

		.process-step::after {
			content: "→";
			position: absolute;
			right: -14px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--accent);
			font-size: 1.4rem;
			font-weight: 700;
			z-index: 1;
		}

		.process-step:last-child::after {
			display: none;
		}

		.step-num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: rgba(192, 132, 252, 0.16);
			border: 1px solid rgba(192, 132, 252, 0.3);
			color: var(--accent);
			font-weight: 700;
			font-size: 0.9rem;
			margin-bottom: 10px;
		}

		.process-step h4 {
			color: var(--accent-2);
			margin: 0 0 8px;
			font-size: 0.95rem;
		}

		.process-step p {
			margin: 0;
			font-size: 0.88rem;
			color: var(--muted);
		}

		.fab-detail {
			background: var(--panel-soft);
			border: 1px solid var(--line);
			border-radius: 16px;
			padding: 20px;
		}

		.fab-detail h3 {
			color: var(--accent-2);
			margin-bottom: 10px;
		}

		.fab-detail .sub-step {
			padding: 10px 14px;
			border-left: 3px solid var(--accent);
			margin-bottom: 12px;
			background: rgba(192, 132, 252, 0.04);
			border-radius: 0 10px 10px 0;
		}

		.fab-detail .sub-step:last-child {
			margin-bottom: 0;
		}

		.fab-detail .sub-step strong {
			color: var(--accent);
			display: block;
			margin-bottom: 4px;
			font-size: 0.92rem;
		}

		.fab-detail .sub-step p {
			margin: 0;
			font-size: 0.9rem;
			color: var(--muted);
		}

		footer {
			padding: 10px 20px 36px;
			color: var(--muted);
			text-align: center;
			font-size: 0.92rem;
		}

		@media (max-width: 900px) {
			.grid,
			.concept,
			.split,
			.mini-grid,
			.diagram-layout,
			.diagram-board,
			.cutaway {
				grid-template-columns: 1fr;
			}

			.process-flow {
				grid-template-columns: 1fr;
			}

			.process-step::after {
				content: "↓";
				right: auto;
				left: 50%;
				top: auto;
				bottom: -16px;
				transform: translateX(-50%);
			}
		}