:root {
	--bg: #333333;
	--line: #8e8e8e;
	--text: #bcbcbc;
	--hi: #ffffff;
	--mono: Consolas, "Lucida Console", Menlo, "DejaVu Sans Mono", monospace;
	--hoc: #6f7d93;
	--xilia: #857a75;
}

html, body {
	margin: 0;
	min-height: 100%;
	background: var(--bg);
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- desktop / tablet: vector diagram ---------- */

.diagram {
	display: block;
	width: min(96vw, calc(94vh * 794 / 641), 1400px);
	height: auto;
}

.lines path {
	fill: none;
	stroke: var(--line);
	stroke-width: 2px;
	vector-effect: non-scaling-stroke;
}

.dashed {
	stroke-dasharray: 9 6;
}

.photo-frame {
	fill: none;
	stroke: #4a4a4a;
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

.label {
	font-family: var(--mono);
	font-weight: bold;
	font-size: 12px;
	fill: var(--text);
	filter: url(#shadow);
	transition: fill .2s;
}

.title {
	font-size: 28px;
	fill: #cbcbcb;
}

.est-small { font-size: 10px; }
.est-year { font-size: 14px; font-weight: normal; }

.cyr {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
}

.hoc, .xilia {
	font-family: Tinos, "Times New Roman", "Palatino Linotype", serif;
	filter: url(#shadow);
}
.hoc { fill: var(--hoc); font-size: 46px; font-weight: bold; }
.xilia { fill: url(#xiliaInk); font-size: 56px; font-weight: bold; letter-spacing: 4px; text-anchor: end; }

.diagram a {
	cursor: pointer;
	outline: none;
	--tint: #484848;
	--ink: #ffffff;
}

.hit {
	fill: transparent;
	transition: fill .2s;
}

.diagram a:hover .hit,
.diagram a:focus-visible .hit {
	fill: var(--tint);
}

.route {
	fill: none;
	stroke: transparent;
	stroke-width: 2px;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
	transition: stroke .2s;
}

.diagram a:hover .route,
.diagram a:focus-visible .route {
	stroke: #c4c4c4;
}

.diagram a:hover .label,
.diagram a:focus-visible .label {
	fill: var(--ink);
}

.lips, .nose {
	transition: filter .3s;
}
.diagram:has(a.lights-nose:hover, a.lights-nose:focus-visible) .nose {
	filter: brightness(1.18);
}
.diagram:has(a:not(.secret):hover, a:not(.secret):focus-visible) .lips {
	filter: brightness(1.18);
}

/* ---------- phones: vertical tree ---------- */

.tree {
	display: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	padding: 28px 22px 40px;
	font-family: var(--mono);
	font-weight: bold;
	font-size: 14px;
	letter-spacing: .12em;
	color: var(--text);
}

.tree a {
	--tint: #484848;
	--ink: #ffffff;
	color: inherit;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	transition: color .2s, background-size .2s;
}

.tree a:hover,
.tree a:active,
.tree a:focus-visible {
	color: var(--ink);
	outline: none;
}

.t-head, .t-foot {
	display: flex;
	align-items: flex-end;
	gap: 14px;
}
.t-foot {
	justify-content: flex-end;
	margin-top: 8px;
}

.t-nose, .t-lips {
	flex: none;
	border: 1px solid #4a4a4a;
	background-repeat: no-repeat;
}
.t-nose {
	width: 104px;
	height: 138px;
	background-image: url(../images/nos.gif);
	background-position: -38px -30px;
}
.t-lips {
	width: 128px;
	height: 94px;
	background-image: url(../images/xilia.gif);
	background-position: -3px -3px;
}

.t-hoc, .t-xilia {
	font-family: Tinos, "Times New Roman", "Palatino Linotype", serif;
	font-weight: normal;
	letter-spacing: 0;
	text-shadow: 1px 1px 1px #000;
}
.t-hoc { color: var(--hoc); font-size: 46px; font-weight: bold; }
.t-xilia {
	font-size: 56px;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: .9;
	color: var(--xilia);
	background: linear-gradient(#958b86, #6c6461);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(1px 1.5px 1px #000);
}

.t-dashed {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}
.t-dashed::before {
	content: "";
	flex: 1;
	border-top: 2px dashed var(--line);
}

.t-root {
	margin: 18px 0 0;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: .22em;
	color: #cbcbcb;
	text-shadow: 1px 1px 2px #000;
}

.t-trunk, .t-trunk ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.t-trunk {
	margin-left: 12px;
	padding-top: 10px;
}
.t-trunk ul {
	margin-left: 6px;
}

.t-trunk li {
	position: relative;
	padding-left: 34px;
	border-left: 2px solid var(--line);
}
.t-trunk li:last-child {
	border-left-color: transparent;
}
.t-trunk li:last-child::after {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	height: 22px;
	border-left: 2px solid var(--line);
}
.t-trunk li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 21px;
	width: 24px;
	border-top: 2px solid var(--line);
	transition: border-color .2s;
}
.t-trunk li:has(> a:hover, > a:active)::before {
	border-color: #c4c4c4;
}

.t-label {
	text-shadow: 1px 1px 1px #000;
}

.t-trunk a, .t-trunk .t-static, .t-trunk .t-label {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.t-trunk a {
	width: fit-content;
	padding: 0 6px;
	margin-left: -6px;
	background: linear-gradient(var(--tint), var(--tint)) center / 0 24px no-repeat;
}
.t-trunk a:hover, .t-trunk a:active, .t-trunk a:focus-visible {
	background-size: 100% 24px;
}

.t-static small { font-size: 11px; margin-right: .5em; }
.t-static { font-weight: normal; font-size: 15px; }
.t-cyr { font-family: Arial, Helvetica, sans-serif; font-weight: normal; letter-spacing: .04em; font-size: 15px; }

.t-say {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: 18px;
}
.t-say::after {
	content: "";
	flex: 1;
	border-top: 2px dashed var(--line);
}

.diagram a.secret,
.tree a.secret {
	cursor: default;
}
.t-secret {
	display: block;
	width: 44px;
	height: 44px;
	margin: -44px 0 0 -22px;
}

@media (max-width: 640px) and (orientation: portrait), (max-width: 420px) {
	body { display: block; }
	.diagram { display: none; }
	.tree { display: block; }
}