/* ============================================================
   kirill.onishuk.dev — общий стиль (лендинг + 404 + страницы файлов)
   Эстетика: IDE / редактор кода. Моно-типографика, подсветка
   синтаксиса, атмосферный фон.

   Тема следует системной: тёмная по умолчанию (палитра GitHub Dark),
   светлая — в @media (prefers-color-scheme: light) ниже. Всё, что
   зависит от темы, вынесено в переменные; хардкод цветов допустим
   только там, где он одинаков в обеих темах (кружки-«светофор»).
   ============================================================ */

:root {
	color-scheme: dark light;

	--bg:        #060910;
	--editor:    #0b0f17;
	--editor2:   #090d14; /* низ градиента окна             */
	--bar:       #0e131d;
	--statusbar: #0a0e16;
	--border:    #1b2330;
	--border-hi: #2b3648; /* рамка под курсором             */
	--txt:       #c4ccd8;
	--strong:    #e9f0f8; /* полужирный текст               */
	--dim:       #5b6675;

	/* синтаксис */
	--kw:   #ff7b72; /* ключевые слова: const, return  */
	--type: #d2a8ff; /* типы / функции                 */
	--key:  #79c0ff; /* свойства объекта               */
	--str:  #a5d6ff; /* строки                         */
	--num:  #ffa657; /* числа / литералы               */
	--cmt:  #6b7684; /* комментарии                    */
	--punc: #8b949e; /* пунктуация                     */

	--accent:      #7ee787; /* акцент (prompt, branch)  */
	--accent-soft: rgba(126, 231, 135, 0.08);
	--accent-line: rgba(126, 231, 135, 0.30);
	--caret:       #ffa657;

	--sel:       rgba(121, 192, 255, 0.14); /* выделение строки   */
	--sel-txt:   #d6ecff;                   /* текст в выделении  */
	--link-line: rgba(121, 192, 255, 0.35);
	--chip-bg:   rgba(121, 192, 255, 0.07);
	--chip-line: rgba(121, 192, 255, 0.16);

	--hover:    rgba(255, 255, 255, 0.035); /* подсветка под курсором */
	--code-bg:  #0d1119;                    /* фон блоков кода/медиа  */
	--dot-idle: #2a3240;                    /* неактивный кружок      */
	--scroll:   #2a3240;
	--on-badge: #0b0f17;

	/* атмосфера */
	--grid:  rgba(255, 255, 255, 0.022);
	--glow1: rgba(121, 192, 255, 0.10);
	--glow2: rgba(210, 168, 255, 0.09);
	--glow3: rgba(126, 231, 135, 0.04);
	--shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.4);

	--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
	        "Fira Code", Menlo, Consolas, monospace;
}

/* ---------- светлая тема: та же раскладка, палитра GitHub Light ---------- */
@media (prefers-color-scheme: light) {
	:root {
		--bg:        #eef1f6;
		--editor:    #ffffff;
		--editor2:   #f8fafc;
		--bar:       #f2f5f9;
		--statusbar: #eef1f6;
		--border:    #d5dde8;
		--border-hi: #b4c0d0;
		--txt:       #1f2530;
		--strong:    #0b0f17;
		--dim:       #626c7a;

		--kw:   #cf222e;
		--type: #8250df;
		--key:  #0550ae;
		--str:  #0a3069;
		--num:  #953800;
		--cmt:  #656d76;
		--punc: #57606a;

		--accent:      #177a34;
		--accent-soft: rgba(23, 122, 52, 0.09);
		--accent-line: rgba(23, 122, 52, 0.35);
		--caret:       #953800;

		--sel:       rgba(5, 80, 174, 0.10);
		--sel-txt:   #0550ae;
		--link-line: rgba(5, 80, 174, 0.35);
		--chip-bg:   rgba(5, 80, 174, 0.06);
		--chip-line: rgba(5, 80, 174, 0.16);

		--hover:    rgba(15, 23, 42, 0.05);
		--code-bg:  #f6f8fa;
		--dot-idle: #ccd3dd;
		--scroll:   #c3ccd8;
		--on-badge: #ffffff;

		--grid:  rgba(15, 23, 42, 0.045);
		--glow1: rgba(5, 80, 174, 0.07);
		--glow2: rgba(130, 80, 223, 0.06);
		--glow3: rgba(26, 127, 55, 0.05);
		--shadow:
			0 1px 0 rgba(255, 255, 255, 0.9) inset,
			0 26px 60px -34px rgba(23, 35, 56, 0.45),
			0 0 0 1px rgba(23, 35, 56, 0.06);
	}
}

/* ---------- ручной выбор темы (theme.js ставит data-theme на <html>) ----------
   Селектор с атрибутом специфичнее :root из медиа-запроса, поэтому побеждает
   и системную тему, и @media выше. auto = атрибут снят, работает системная. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg:        #060910;
	--editor:    #0b0f17;
	--editor2:   #090d14;
	--bar:       #0e131d;
	--statusbar: #0a0e16;
	--border:    #1b2330;
	--border-hi: #2b3648;
	--txt:       #c4ccd8;
	--strong:    #e9f0f8;
	--dim:       #5b6675;

	--kw:   #ff7b72;
	--type: #d2a8ff;
	--key:  #79c0ff;
	--str:  #a5d6ff;
	--num:  #ffa657;
	--cmt:  #6b7684;
	--punc: #8b949e;

	--accent:      #7ee787;
	--accent-soft: rgba(126, 231, 135, 0.08);
	--accent-line: rgba(126, 231, 135, 0.30);
	--caret:       #ffa657;

	--sel:       rgba(121, 192, 255, 0.14);
	--sel-txt:   #d6ecff;
	--link-line: rgba(121, 192, 255, 0.35);
	--chip-bg:   rgba(121, 192, 255, 0.07);
	--chip-line: rgba(121, 192, 255, 0.16);

	--hover:    rgba(255, 255, 255, 0.035);
	--code-bg:  #0d1119;
	--dot-idle: #2a3240;
	--scroll:   #2a3240;
	--on-badge: #0b0f17;

	--grid:  rgba(255, 255, 255, 0.022);
	--glow1: rgba(121, 192, 255, 0.10);
	--glow2: rgba(210, 168, 255, 0.09);
	--glow3: rgba(126, 231, 135, 0.04);
	--shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
	color-scheme: light;

	--bg:        #eef1f6;
	--editor:    #ffffff;
	--editor2:   #f8fafc;
	--bar:       #f2f5f9;
	--statusbar: #eef1f6;
	--border:    #d5dde8;
	--border-hi: #b4c0d0;
	--txt:       #1f2530;
	--strong:    #0b0f17;
	--dim:       #626c7a;

	--kw:   #cf222e;
	--type: #8250df;
	--key:  #0550ae;
	--str:  #0a3069;
	--num:  #953800;
	--cmt:  #656d76;
	--punc: #57606a;

	--accent:      #177a34;
	--accent-soft: rgba(23, 122, 52, 0.09);
	--accent-line: rgba(23, 122, 52, 0.35);
	--caret:       #953800;

	--sel:       rgba(5, 80, 174, 0.10);
	--sel-txt:   #0550ae;
	--link-line: rgba(5, 80, 174, 0.35);
	--chip-bg:   rgba(5, 80, 174, 0.06);
	--chip-line: rgba(5, 80, 174, 0.16);

	--hover:    rgba(15, 23, 42, 0.05);
	--code-bg:  #f6f8fa;
	--dot-idle: #ccd3dd;
	--scroll:   #c3ccd8;
	--on-badge: #ffffff;

	--grid:  rgba(15, 23, 42, 0.045);
	--glow1: rgba(5, 80, 174, 0.07);
	--glow2: rgba(130, 80, 223, 0.06);
	--glow3: rgba(26, 127, 55, 0.05);
	--shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 26px 60px -34px rgba(23, 35, 56, 0.45),
		0 0 0 1px rgba(23, 35, 56, 0.06);
}

/* переключатель темы: кнопку и её стили вставляет /_site/theme.js
   (правый верхний угол страницы, единый вид на всём домене) */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
	min-height: 100%;
	font-family: var(--mono);
	color: var(--txt);
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	position: relative;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* атмосфера: свечения + тонкая сетка */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(900px 500px at 78% -8%,  var(--glow1), transparent 60%),
		radial-gradient(760px 480px at 12% 112%, var(--glow2), transparent 58%),
		radial-gradient(600px 600px at 50% 40%,  var(--glow3), transparent 60%);
	pointer-events: none;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
	        mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
	pointer-events: none;
}

/* ---------- окно редактора ---------- */
.window {
	position: relative;
	z-index: 1;
	width: min(660px, 100%);
	background: linear-gradient(180deg, var(--editor), var(--editor2));
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	animation: window-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes window-in {
	to { opacity: 1; transform: none; }
}

/* верхняя полоса + вкладка */
.titlebar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--bar);
	border-bottom: 1px solid var(--border);
}
.dots { display: flex; gap: 8px; }
.dots i {
	width: 12px; height: 12px; border-radius: 50%;
	display: block;
	background: var(--dot-idle);
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--txt);
	background: var(--editor);
	padding: 5px 13px;
	border-radius: 7px;
	border: 1px solid var(--border);
	white-space: nowrap;
}
.tab .ts {
	font-size: 10px; font-weight: 800;
	color: var(--on-badge); background: var(--key);
	border-radius: 3px; padding: 1px 4px; letter-spacing: 0.5px;
}
.tab .md { color: var(--accent); font-weight: 700; }

/* ---------- тело: код ---------- */
.editor {
	padding: 22px clamp(16px, 4vw, 30px) 20px;
	overflow-x: auto;
}
.code {
	counter-reset: line;
	font-size: clamp(12.5px, 3vw, 14.5px);
	line-height: 1.85;
	white-space: normal; /* переносы между строками-блоками схлопываются */
	tab-size: 2;
}
.ln {
	display: block;
	position: relative;
	padding-left: 42px;
	min-height: 1.85em;      /* высота пустых строк сохраняется */
	white-space: pre;         /* отступы/выравнивание внутри строки */
	opacity: 0;
	transform: translateX(-6px);
	animation: line-in 0.5s ease forwards;
}
.ln::before {
	counter-increment: line;
	content: counter(line);
	position: absolute;
	left: 0;
	width: 26px;
	text-align: right;
	color: var(--dim);
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}
@keyframes line-in { to { opacity: 1; transform: none; } }

/* staggered появление строк */
.ln:nth-child(1)  { animation-delay: 0.30s; }
.ln:nth-child(2)  { animation-delay: 0.36s; }
.ln:nth-child(3)  { animation-delay: 0.42s; }
.ln:nth-child(4)  { animation-delay: 0.48s; }
.ln:nth-child(5)  { animation-delay: 0.54s; }
.ln:nth-child(6)  { animation-delay: 0.60s; }
.ln:nth-child(7)  { animation-delay: 0.66s; }
.ln:nth-child(8)  { animation-delay: 0.72s; }
.ln:nth-child(9)  { animation-delay: 0.78s; }
.ln:nth-child(10) { animation-delay: 0.84s; }
.ln:nth-child(11) { animation-delay: 0.90s; }
.ln:nth-child(12) { animation-delay: 0.96s; }
.ln:nth-child(13) { animation-delay: 1.02s; }
.ln:nth-child(14) { animation-delay: 1.08s; }
.ln:nth-child(15) { animation-delay: 1.14s; }
.ln:nth-child(16) { animation-delay: 1.20s; }
.ln:nth-child(17) { animation-delay: 1.26s; }
.ln:nth-child(18) { animation-delay: 1.32s; }
.ln:nth-child(19) { animation-delay: 1.38s; }

/* токены */
.kw   { color: var(--kw);   }
.type { color: var(--type); }
.key  { color: var(--key);  }
.str  { color: var(--str);  }
.num  { color: var(--num);  }
.cmt  { color: var(--cmt); font-style: italic; }
.punc { color: var(--punc); }

/* кликабельные контакты — строки, ведут себя как выделение в редакторе */
a.k-link {
	color: var(--str);
	text-decoration: none;
	border-radius: 4px;
	padding: 1px 3px;
	margin: 0 -3px;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
a.k-link:hover,
a.k-link:focus-visible {
	background: var(--sel);
	color: var(--sel-txt);
	box-shadow: inset 0 0 0 1px var(--link-line);
	outline: none;
}

/* мигающая каретка */
.caret {
	display: inline-block;
	width: 8px;
	height: 1.05em;
	margin-left: 3px;
	vertical-align: text-bottom;
	background: var(--caret);
	animation: blink 1.1s steps(1) infinite;
	opacity: 0;
	animation-delay: 1.4s;
}
@keyframes blink {
	0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; }
}

/* ---------- статус-бар ---------- */
.statusbar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 8px 16px;
	background: var(--statusbar);
	border-top: 1px solid var(--border);
	font-size: 11.5px;
	color: var(--dim);
	flex-wrap: wrap;
}
.statusbar .branch { color: var(--accent); }
.statusbar .sep { margin-left: auto; }

/* ---------- 404 ---------- */
.big404 {
	font-size: clamp(64px, 20vw, 132px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--txt);
	text-shadow:
		3px 0 var(--kw),
		-3px 0 var(--key);
	animation: glitch 3.4s infinite;
}
@keyframes glitch {
	0%, 92%, 100% { text-shadow: 3px 0 var(--kw), -3px 0 var(--key); }
	94%  { text-shadow: -3px 0 var(--kw), 3px 0 var(--key); transform: translateX(1px); }
	96%  { text-shadow: 3px 0 var(--key), -3px 0 var(--kw); transform: translateX(-1px); }
}
.home-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	color: var(--accent);
	text-decoration: none;
	border: 1px solid var(--accent-line);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	transition: background 0.18s ease, transform 0.18s ease;
}
.home-link:hover { background: var(--accent-soft); transform: translateY(-2px); }

/* sr-only для семантичного заголовка */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   IDE: многофайловый редактор (лендинг)
   Проводник + вкладки + панели. 404/403 эти классы не используют.
   ============================================================ */

.window.ide {
	width: min(1200px, 100%);
	height: 90vh;
	min-height: 420px;
	display: flex;
	flex-direction: column;
}
.window.ide .titlebar { flex: none; }

.wtitle {
	font-size: 12.5px;
	color: var(--dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ide-body {
	display: grid;
	grid-template-columns: 196px 1fr;
	min-width: 0;
	flex: 1;
	min-height: 0;
}
.ide-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---------- проводник ---------- */
.explorer {
	background: var(--bar);
	border-right: 1px solid var(--border);
	padding: 12px 0 16px;
	font-size: 12.5px;
	user-select: none;
	overflow-y: auto;
}
.explorer .label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	padding: 0 16px 10px;
}
.explorer .folder {
	color: var(--txt);
	font-weight: 700;
	padding: 3px 16px 5px;
}
.explorer button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 16px 4px 26px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 12.5px;
	color: var(--dim);
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
}
.explorer button:hover { background: var(--hover); color: var(--txt); }
.explorer button.sel {
	background: var(--sel);
	color: var(--sel-txt);
	box-shadow: inset 2px 0 0 var(--key);
}
.explorer .ghost {
	padding: 4px 16px 4px 26px;
	color: var(--dim);
	opacity: 0.45;
}

/* ---------- значки файлов ---------- */
.fico {
	flex: none;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 3px;
	letter-spacing: 0.4px;
}
.fico.ts  { color: var(--on-badge); background: var(--key); }
.fico.md  { color: var(--on-badge); background: var(--accent); }
.fico.yml { color: var(--on-badge); background: var(--num); }

/* ---------- вкладки ---------- */
.tabbar {
	display: flex;
	background: var(--bar);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar [role="tab"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--border);
	border-top: 2px solid transparent;
	font: inherit;
	font-size: 12.5px;
	color: var(--dim);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease;
}
.tabbar [role="tab"]:hover { color: var(--txt); background: var(--hover); }
.tabbar [role="tab"][aria-selected="true"] {
	background: var(--editor);
	color: var(--txt);
	border-top-color: var(--key);
}
.tabbar [role="tab"]:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--key);
}

/* ---------- область панелей ---------- */
.editor-wrap {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--scroll) transparent;
}
.editor-wrap::-webkit-scrollbar { width: 8px; }
.editor-wrap::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; }

.panel {
	display: none;
	padding: 22px clamp(18px, 4vw, 34px) 30px;
}
.panel.active { display: block; animation: panel-in 0.32s ease; }
@keyframes panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- markdown-панели ---------- */
.panel.md { font-size: 13.5px; line-height: 1.75; }
.panel.md h2 {
	font-size: 18px;
	font-weight: 800;
	color: var(--txt);
	margin: 2px 0 6px;
	letter-spacing: -0.01em;
}
.panel.md h2::before { content: "# "; color: var(--kw); }
.panel.md h3 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--key);
	margin: 0 0 2px;
}
.panel.md h3::before { content: "## "; color: var(--punc); font-weight: 400; }
.panel.md .pos { color: var(--dim); font-weight: 400; font-size: 13px; }
.panel.md .job {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed var(--border);
}
.panel.md .job:first-of-type { border-top: 0; }
.panel.md .meta {
	margin: 3px 0 8px;
	line-height: 2.1;
}
.panel.md .dates {
	color: var(--num);
	font-size: 12px;
	margin-right: 6px;
}
.panel.md code {
	font-family: inherit;
	font-size: 11px;
	color: var(--str);
	background: var(--chip-bg);
	border: 1px solid var(--chip-line);
	border-radius: 4px;
	padding: 1.5px 7px;
	margin-right: 2px;
	white-space: nowrap;
}
.panel.md .lead { color: var(--txt); margin: 4px 0 6px; font-style: italic; }
.panel.md .lead em, .panel.md li em { color: var(--type); font-style: italic; }
.panel.md ul { list-style: none; margin: 6px 0 2px; }
.panel.md li {
	position: relative;
	padding-left: 18px;
	margin: 5px 0;
	color: var(--txt);
}
.panel.md li::before {
	content: "-";
	position: absolute;
	left: 2px;
	color: var(--accent);
}
.panel.md strong { color: var(--strong); font-weight: 700; }

/* ---------- yaml-панель ---------- */
.yaml {
	font-size: clamp(12px, 2.8vw, 13.5px);
	line-height: 2.05;
}
.yaml .row { white-space: pre-wrap; }

/* ---------- адаптив ---------- */
@media (max-width: 840px) {
	.ide-body { grid-template-columns: 1fr; }
	.explorer { display: none; }
}
@media (max-width: 480px) {
	body { padding: 0.75rem; align-items: flex-start; padding-top: 1rem; }
	.window.ide { height: 92vh; }
}

/* уважение к настройкам движения */
@media (prefers-reduced-motion: reduce) {
	.window, .ln { opacity: 1; transform: none; animation: none; }
	.caret { opacity: 1; animation: none; }
	.big404 { animation: none; }
	.panel.active { animation: none; }
}