@property --sb { /*scrollbar rendered width real estate*/
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@property --bw { /*body container width*/
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@property --bg {
	syntax: "<color>";
	inherits: true;
	initial-value: black;
}
@property --fg {
	syntax: "<color>";
	inherits: true;
	initial-value: white;
}
@property --mg {
	syntax: "<color>";
	inherits: true;
	initial-value: #5A5A5A;
}
@property --wc {
	syntax: "<color>";
	inherits: true;
	initial-value: #FF0000;
}
@property --tc {
	syntax: "<color>";
	inherits: true;
	initial-value: #EF5800;
}
@property --dc {
	syntax: "<color>";
	inherits: true;
	initial-value: #DF5000;
}
@property --lc {
	syntax: "<color>";
	inherits: true;
	initial-value: #FF6000;
}
@property --b1 {
	syntax: "<color>";
	inherits: true;
	initial-value: #424a52;
}
@property --b2 {
	syntax: "<color>";
	inherits: true;
	initial-value: #212529;
}
@property --b3 {
	syntax: "<color>";
	inherits: true;
	initial-value: black;
}
/* top-level */
* {
	font-family: Verdana, Tahoma, sans-serif;
	box-sizing: border-box;
}
html {
	background: none;
	container-type: inline-size;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
body {
	--sb: calc(100vw - 100cqw);
	--bw: calc(1cqw - 0.04px); /* 0.04px handles 2px .theme-root padding */
	background: none;
	margin: 0;
	padding: 0;
}
/* animations */
@media (prefers-reduced-motion) {
	html { scroll-behavior: auto; }
	.theme-button { transition: opacity 225ms; }
	.ia-Traffic { animation: none; }
	.ia-Stairs { animation: none; }
}
/* Skip link for keyboard accessibility (WCAG 2.4.1) */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 1rem;
	background: var(--bg);
	color: var(--fg);
	padding: 0.5rem 1rem;
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid var(--fg);
	border-radius: 8px;
	z-index: 10000;
	text-decoration: underline;
}
.skip-link:focus {
	top: 1rem;
}
#main:focus {
	outline: none;
}
/* High-contrast focus indicators (WCAG 2.4.7 & 1.4.11) */
:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}
.btn:focus-visible {
	outline: 3px solid var(--fg);
	outline-offset: 4px;
}
/* theme */
body:has(.theme-radio[id="oled"]:checked) {
	--bg: black;
	--fg: white;
	--mg: #5A5A5A;
	--wc: #FF0000;
	--b1: #424a52;
	--b2: #212529;
	--b3: black;
}
body:has(.theme-radio[id="dark"]:checked) {
	--bg: #212529;
	--fg: white;
	--mg: #6E6E6E;
	--wc: #FF4444;
	--b1: #636f7b;
	--b2: #424a52;
	--b3: #212529;
}
body:has(.theme-radio[id="light"]:checked) {
	--bg: white;
	--fg: black;
	--mg: #949494;
	--wc: #EE0000;
	--b1: white;
	--b2: #EEEEEE;
	--b3: #DDDDDD;
}
.theme-radio, .theme-toggle, .menu-toggle { display: none; }
.menu-button, .theme-label, .theme-button {
	cursor: pointer;
	user-select: none;
}
.theme-button {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
	transform-origin: top;
	transition: margin-left 225ms, max-height 225ms, max-width 225ms, opacity 225ms, transform 225ms, visibility 225ms;
	visibility: hidden;
}
.theme-button:nth-of-type(3) { transition-delay: 75ms; }
.theme-button:nth-of-type(4) { transition-delay: 150ms; }
.theme-toggle:checked ~ .theme-button {
	max-height: 100%;
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
	visibility: visible;
}
.theme-root {
	background: var(--bg);
	background-color: var(--bg);
	color: var(--fg);
	min-height: 100lvh;
	padding: 0 2px 2svh 2px;
}
/* site-header, default to mobile, change for desktop in @media */
.site-header {
	align-content: center;
	background-color: var(--bg);
	border-bottom: 1px solid var(--fg);
	font-weight: 700;
	height: calc(4svh + 2.6875rem);
	margin: 0;
	padding: 0;
	position: sticky;
		left: 0;
		top: 0;
	text-align: center;
	z-index: 999;
}
.swap-text {
	margin: 0;
	padding: 0;
	span { font-size: clamp(1rem, 6svw, 2rem); }
}
.menu-links {
	background: var(--bg);
	border-top: 1px solid var(--fg);
	display: flex;
		flex-direction: column;
	font-size: clamp(1rem, 6svw, 2rem);
	gap: 4svh;
	height: calc(100lvh - (4svh + 2.6875rem));
	opacity: 0;
	overflow-y: auto;
	padding: 4svh 0;
	pointer-events: none;
	position: absolute;
		top: calc(4svh + 2.6875rem);
	text-decoration: underline;
	transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
	visibility: hidden;
	width: 100%;
	a {
		background-color: transparent;
		color: var(--fg);
	}
}
@media (hover: none), (pointer: none), (pointer: coarse) {
	.menu-button {
		align-content: center;
		display: inline-block;
		font-size: clamp(1rem, 6svw, 2rem);
		opacity: 1;
		padding: 0 6svw 0 4svw;
		width: clamp(1rem, 5svw, 2.5rem);
	}
	.menu-toggle:checked ~ .menu-links {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}
	.menu-button::before { content: "☰"; }
	.menu-toggle:checked ~ .menu-button::before { content: "X"; }
	body:has(:target) .div-header a { text-decoration: underline; }
}
@media (hover: hover) and (pointer: fine) {
	.swap-text span {
		font-size: clamp(1rem, 8svw, 2rem);
		text-decoration: none;
		transition: opacity 0.2s ease-in;
	}
	.swap-text:hover span,
	.swap-text:focus-within span { opacity: 0; }
	body:has(:target) .div-header:hover a,
	body:has(:target) .div-header a:focus-visible { text-decoration: underline; }
	.btn:hover, .btn:focus-visible { background-color: var(--lc); }
	@media (orientation: landscape) {
		.menu-button { display: none; }
		.menu-links {
			border-top: 0;
			flex-direction: row;
			font-size: clamp(0.6875rem, 3.2svw, 2rem);
			gap: clamp(0.625rem, 2.5svw, 1.5rem);
			height: auto;
			justify-content: center;
			overflow: hidden;
			padding: 0;
			pointer-events: auto;
			top: 2svh;
			visibility: visible;
		}
		.swap-text:hover .menu-links,
		.swap-text:focus-within .menu-links { opacity: 1; }
		.theme-button {
			margin-left: clamp(-1.5rem, -2.5svw, -0.625rem);
			max-height: 100%;
			max-width: 0;
			transform-origin: left;
			visibility: hidden;
		}
		.theme-toggle:checked ~ .theme-button {
			margin-left: 0;
			max-width: 100%;
			visibility: visible;
		}
	}
	@media (orientation: portrait) {
		.swap-text:hover .menu-button,
		.swap-text:focus-within .menu-button { opacity: 1; }
		.menu-toggle:checked {
			~ span { opacity: 0; }
			~ .menu-button { opacity: 1; }
			~ .menu-button::before { content: "Close Menu"; }
			~ .menu-links {
				opacity: 1;
				pointer-events: auto;
				visibility: visible;
			}
		}
		.menu-button {
			font-size: clamp(1rem, 8svw, 2rem);
			opacity: 0;
			padding: 0;
			position: absolute;
				left: 0;
				top: 2svh;
			text-align: center;
			text-decoration: underline;
			transition: opacity 0.2s ease-out;
			width: 100%;
		}
		.menu-button::before { content: "Site Menu"; }
	}
}
/* site-footer */
.site-footer {
	border-top: 1px solid var(--fg);
	margin: 2svh 0;
	a {
		color: var(--fg);
		font-size: clamp(1rem, 3svw, 1.5rem);
	}
	p {
		font-size: clamp(1rem, 3svw, 1.5rem);
		text-align: center;
	}
}
/* div-header */
.div-header {
	align-items: center;
	background-color: var(--bg);
	border-top: 1px solid var(--fg);
	border-bottom: 1px solid var(--fg);
	display: flex;
	height: calc(4svh + 2.6875rem);
	justify-content: center;
	margin: 0;
	padding: 0;
	position: sticky;
		top: calc((4svh + 2.6875rem) - 1px);
	text-align: center;
	z-index: 997;
}
.div-header a, .div-header h1 {
	font-size: clamp(1rem, 5svw, 2rem);
	margin: 0;
	padding: 0;
	text-decoration: none;
}
/* patterns */
.intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 50dvh;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
}
.i-Y {
	--s: clamp(50px, 13.1lvw, 250px);
	--_g: 0 120deg,#0000 0;
	background:
		conic-gradient(at calc(250%/3) calc(100%/3),var(--b3) var(--_g)),
		conic-gradient(from -120deg at calc( 50%/3) calc(100%/3),var(--b2) var(--_g)),
		conic-gradient(from 120deg at calc(100%/3) calc(250%/3),var(--b1) var(--_g)),
		conic-gradient(from 120deg at calc(200%/3) calc(250%/3),var(--b1) var(--_g)),
		conic-gradient(from -180deg at calc(100%/3) 50%,var(--b2) 60deg,var(--b1) var(--_g)),
		conic-gradient(from 60deg at calc(200%/3) 50%,var(--b1) 60deg,var(--b3) var(--_g)),
		conic-gradient(from -60deg at 50% calc(100%/3),var(--b1) 120deg,var(--b2) 0 240deg,var(--b3) 0);
	background-size: calc(var(--s)*sqrt(3)) var(--s);
}
.i-Cube {
	--s: clamp(50px, 13.1svw, 250px);
	background:
		repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--b3) 0 50%)
		calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
		repeating-conic-gradient(from 30deg,var(--b1) 0 60deg,var(--b2) 0 120deg,var(--b3) 0 50%);
	background-size: var(--s) calc(var(--s)*tan(30deg));
}
.i-NE {
  --s: 75px;
  --_c:#0000,var(--b1) 1deg 79deg,#0000 81deg;
  --g0:conic-gradient(from 140deg at 50% 87.5% ,var(--_c));
  --g1:conic-gradient(from 140deg at 50% 81.25%,var(--_c));
  --g2:conic-gradient(from 140deg at 50% 75%,var(--_c));
  --g3:conic-gradient(at 10% 20%,#0000 75%,var(--b1) 0);
  background:
    var(--g0) 0 calc(var(--s)/-4),var(--g0) var(--s) calc(3*var(--s)/4),
    var(--g1),var(--g1) var(--s) var(--s),
    var(--g2) 0 calc(var(--s)/ 4),var(--g2) var(--s) calc(5*var(--s)/4),
    var(--g3) calc( var(--s)/-10) var(--s),
    var(--g3) calc(9*var(--s)/10) calc(2*var(--s)),
    repeating-conic-gradient(from 45deg,var(--b2) 0 25%,var(--b3) 0 50%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
.ia-Traffic {
  --s: 60px;
  --g1:conic-gradient(at 37.5% 87.5%,#0000 75%,var(--b2) 0);
  --g2:conic-gradient(at 12.5% 62.5%,#0000 75%,var(--b1) 0);
  background:
    var(--g2) calc(var(--s)/4) calc(var(--s)/4),
    var(--g2) calc(5*var(--s)/4) calc(5*var(--s)/4),
    var(--g1),var(--g1) var(--s) var(--s) var(--b3);
  background-size: calc(2*var(--s)) calc(2*var(--s));
  animation: iaT 2s infinite linear;
}
@keyframes iaT {
  to {
    background-position: 
      calc(var(--s)/4) calc(9*var(--s)/4),
      calc(5*var(--s)/4) calc(-3*var(--s)/4),
      0 calc(2*var(--s)),
      var(--s) calc(-1*var(--s));
  }
}
.ia-Stairs {
  --b: 4px;
  --s: 60px;
  --c:#0000 75%, var(--b3) 0;
  --p1:from -90deg at calc(50% + var(--b)) calc(100% - var(--b));
  --p2:from -90deg at var(--b) calc(50% - var(--b));
  --e:calc(var(--s)/2);
  --e-:calc(var(--s)/-2);
  background:
    conic-gradient(var(--p1),var(--c)),
    conic-gradient(var(--p1),var(--c)),
    conic-gradient(var(--p2),var(--c)),
    conic-gradient(var(--p2),var(--c)),
    var(--b1);
   background-size: var(--s) var(--s);
   animation: iaS 10s infinite;
}
@keyframes iaS {
  0%,
  2%   {background-position:0 0       ,var(--e)  var(--e),0 0        ,var(--e) var(--e) }
  10%,
  15%  {background-position:0 0       ,var(--e)  var(--e),0 var(--e) ,var(--e) 0        }
  22.5%,
  27.5%{background-position:var(--e) 0,0         var(--e),0 var(--e) ,var(--e) 0        }
  35%,
  40%  {background-position:var(--e) 0,0         var(--e),0 0        ,var(--e) var(--e-)}
  47.5%,
  52.5%{background-position:0        0,var(--e-) var(--e),0 0        ,var(--e) var(--e-)}  
  60%,
  65%  {background-position:0        0,var(--e-) var(--e),0 var(--e-),var(--e) 0        } 
  72.5%,
  77.5%{background-position:var(--e-)0,0         var(--e),0 var(--e-),var(--e) 0        } 
  85%,
  90%  {background-position:var(--e-)0,0         var(--e),0 0        ,var(--e) var(--e) } 
  98%,
  100% {background-position:0        0,var(--e)  var(--e),0 0        ,var(--e) var(--e) }
}
/* JavaScript detection */
@media (scripting: none), (scripting: initial-load) {
	.theme-label { color: var(--wc); }
	.theme-label::after { content: " ⚠"; }
}
.nojs {
	background: var(--bg);
	margin: 0.5lvh 0;
	padding: 0;
	position: sticky;
		bottom: calc(0.25lvh);
	z-index: 998;
}
.nojs h3 {
	border: 2px solid var(--wc);
	border-radius: 8px;
	font-size: max(1rem, 1lvw);
	margin: 0;
	padding: 0.5lvh;
	text-align: center;
}
/* font-size*/
.hfs { font-size: clamp(1rem, 6svw, 3rem); }
.hts {
	--pts: clamp(0.1rem, 0.6svw, 0.3rem);
	--nts: clamp(-0.3rem, -0.6svw, -0.1rem);
	text-shadow: var(--pts) var(--pts) 0 var(--bg), var(--nts) var(--pts) 0 var(--bg), var(--pts) var(--nts) 0 var(--bg), var(--nts) var(--nts) 0 var(--bg), 0px var(--pts) 0 var(--bg), var(--pts) 0px 0 var(--bg), 0px var(--nts) 0 var(--bg), var(--nts) 0px 0 var(--bg);
}
.sfs { font-size: clamp(1rem, 3svw, 1.5rem); }
.sts {
	--pts: clamp(0.1rem, 0.3svw, 0.15rem);
	--nts: clamp(-0.15rem, -0.3svw, -0.1rem);
	text-shadow: var(--pts) var(--pts) 0 var(--bg), var(--nts) var(--pts) 0 var(--bg), var(--pts) var(--nts) 0 var(--bg), var(--nts) var(--nts) 0 var(--bg), 0px var(--pts) 0 var(--bg), var(--pts) 0px 0 var(--bg), 0px var(--nts) 0 var(--bg), var(--nts) 0px 0 var(--bg);
}
/* buttons */
.btn {
	background-color: var(--tc);
	border: 2px solid var(--fg);
	border-radius: 1rem;
	color: black;
	display: block;
	font-size: clamp(1rem, 3svw, 1.5rem);
	font-weight: 700;
	padding: 2svh 0.5svw;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s;
	width: 100%;
	--pts: clamp(0.1rem, 0.3svw, 0.15rem);
	--nts: clamp(-0.15rem, -0.3svw, -0.1rem);
	text-shadow: var(--pts) var(--pts) 0 white, var(--nts) var(--pts) 0 white, var(--pts) var(--nts) 0 white, var(--nts) var(--nts) 0 white, 0px var(--pts) 0 white, var(--pts) 0px 0 white, 0px var(--nts) 0 white, var(--nts) 0px 0 white;
}
.btn:active { background-color: var(--dc); }
/* std classes */
.std-pad {
	--Wmin: calc(768px + var(--sb));
	--Wmax: calc(1902px + var(--sb));
	--Pmin: calc(2 * var(--bw));
	--Pmax: calc(10 * var(--bw));
	--scale: calc(var(--Pmin) + (var(--Pmax) - var(--Pmin)) * ((100% - var(--Wmin)) / (var(--Wmax) - var(--Wmin))));
	--clamped: clamp(var(--Pmin), var(--scale), var(--Pmax));
	padding-left: var(--clamped);
	padding-right: var(--clamped);
	scroll-margin-top: calc(9.5svh + 5.375rem);
}