:root
	{
		--bg:#0b1020;
		--bg2:#111936;
		--card:#17213f;
		--card2:#1c294d;
		--text:#eef4ff;
		--muted:#b8c4da;
		--line:#2b3b67;
		--accent:#61dafb;
		--accent2:#a78bfa;
		--ok:#7ee787;
		--warn:#ffd166;
		--bad:#ff8a8a;
		--shadow:0 20px 50px rgba(0,0,0,.35);
		--radius:22px;
		--max:1180px
	}
*{box-sizing:border-box}
	
html{scroll-behavior:smooth}

body
		{margin:0;
		font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
		color:var(--text);
		background:
		radial-gradient(circle at 20% 0%,rgba(97,218,251,.16),transparent 32%),
		radial-gradient(circle at 90% 10%,rgba(167,139,250,.18),transparent 34%),
		linear-gradient(180deg,var(--bg),#060914 70%);
		line-height:1.65
		}

	a
		{color:var(--accent);
		text-decoration:none
		}
	
	a:hover
		{text-decoration:underline
		}
	
	.wrap
		{width:min(var(--max),calc(100% - 34px));
		margin:auto
		}
	
	.topbar
		{position:sticky;
		top:80;
		z-index:10;
		background:rgba(8,12,26,.82);
		backdrop-filter:blur(14px);
		border-bottom:1px solid rgba(255,255,255,.08)
		}
	
	.nav
		{display:flex;
		align-items:center;
		justify-content:space-between;
		gap:18px;
		padding:14px 0
		}
		
	.brand
		{display:flex;
		align-items:center;
		gap:12px;
		font-weight:800;
		letter-spacing:.2px
		}
		
	.logo
		{width:38px;
		height:38px;
		border-radius:13px;
		background:linear-gradient(135deg,var(--accent),var(--accent2));
		display:grid;
		place-items:center;
		color:#07101f;
		font-weight:900;
		box-shadow:0 0 28px rgba(97,218,251,.25)
		}
		
	.links
		{display:flex;
		gap:14px;
		flex-wrap:wrap
		}
		
	.links
		a{color:var(--text);
		opacity:.86;
		font-size:.95rem
		}
		
	.hero
		{padding:70px 0 38px
		}
		
	.eyebrow
			{display:inline-flex;gap:8px;
				align-items:center;
				border:1px solid rgba(97,218,251,.35);
				background:rgba(97,218,251,.08);
				padding:7px 12px;
				border-radius:999px;
				color:#dff8ff;
				font-size:.92rem}
				
		h1
			{font-size:clamp(2.15rem,5vw,4.6rem);
			line-height:1.05;
			margin:20px 0 18px;
			letter-spacing:-.045em}
			
		h2
			{font-size:clamp(1.55rem,2.7vw,2.35rem);
			line-height:1.18;
			margin:52px 0 16px}
			
		h3
			{font-size:1.22rem;
			margin:28px 0 10px}
		
	.lead
		{font-size:clamp(1.08rem,2vw,1.34rem);
		color:var(--muted);
		max-width:880px
		}
	
	.grid
		{display:grid;
		grid-template-columns:
		repeat(12,1fr);
		gap:18px
		}
	
	.card
			{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035));
			border:1px solid rgba(255,255,255,.11);
			border-radius:var(--radius);
			box-shadow:var(--shadow);
			padding:24px
			}
	
	.span-4
		{grid-column:span 4
		}
		
	.span-6
		{grid-column:span 6
		}
		
	.span-8
		{grid-column:span 8
		}
		
	.span-12
		{grid-column:span 12
		}
		
	.tag
		{display:inline-flex;
		align-items:center;
		border-radius:999px;
		padding:4px 10px;
		font-size:.82rem;
		background:rgba(167,139,250,.12);
		border:1px solid rgba(167,139,250,.28);
		color:#eee7ff;
		margin:3px
		}
	
	.btnrow
		{display:flex;
		flex-wrap:wrap;
		gap:12px;
		margin-top:24px
		}
	
	.btn
		{display:inline-flex;
		align-items:center;
		gap:8px;
		padding:12px 16px;
		border-radius:15px;
		background:linear-gradient(135deg,var(--accent),#8be9ff);
		color:#06111f;
		font-weight:800;
		border:0
		}
	
	.btn.secondary
		{background:transparent;
		color:var(--text);
		border:1px solid rgba(255,255,255,.18)
		}
	
	.notice
		{border-left:4px solid var(--warn);
		background:rgba(255,209,102,.08);
		padding:16px 18px;
		border-radius:16px;
		color:#fff4d0
		}
	
	.ok
		{border-left-color:var(--ok);
		background:rgba(126,231,135,.08);
		color:#dcffe3
		}
	
	.warn
		{color:var(--warn)
		}
	
	.muted
		{color:var(--muted)}
		table{width:100%;
		border-collapse:collapse;
		margin:18px 0;
		border-radius:18px;
		overflow:hidden;
		border:1px solid rgba(255,255,255,.12)}
		th,td{padding:13px 14px;
		text-align:left;
		vertical-align:top;
		border-bottom:1px solid rgba(255,255,255,.08)
		}
		th
			{background:rgba(97,218,251,.12);
			color:#e7fbff}
		tr:nth-child(even) 
		td
			{background:rgba(255,255,255,.025)
			}
		code
			{background:rgba(255,255,255,.08);
			padding:2px 6px;
			border-radius:7px
			}
	
	.checklist li
		{margin:9px 0
		}
	
	.wizard
		{display:grid;
		gap:14px
		}
	
	.q
		{padding:18px;
		border-radius:18px;
		background:rgba(255,255,255,.045);
		border:1px solid rgba(255,255,255,.09)
		}
	
	.q label
		{display:block;
		margin:9px 0;
		color:var(--muted)
		}
	
	.result
		{margin-top:20px;
		border:1px solid rgba(126,231,135,.35);
		background:rgba(126,231,135,.08);
		padding:22px;
		border-radius:20px
		}
	
	.pill
		{display:inline-block;
		margin:5px 6px 5px 0;
		padding:7px 10px;
		border-radius:999px;
		background:rgba(97,218,251,.12);
		border:1px solid rgba(97,218,251,.25)
		}
	
	.footer
		{margin-top:70px;
		padding:30px 0;
		border-top:1px solid rgba(255,255,255,.09);
		color:var(--muted);
		font-size:.95rem
		}
	
	.source-list li
		{margin:10px 0;
		word-break:break-word
		}
	
	.toc
		{position:relative
		}
	
	.toc a
		{display:block;
		padding:6px 0;
		color:var(--muted)
		}
	
	@media(max-width:850px)
		{.span-4,.span-6,.span-8
		{grid-column:span 12
		}
	
	.nav
		{align-items:flex-start
		}
	
	.links
		{justify-content:flex-end}
		table
			{display:block;
			overflow-x:auto
			}
	
	.hero
		{padding-top:42px}
		}