@font-face {
	font-family: "ComicShanns";
	src: url("https://raw.githubusercontent.com/shannpersand/comic-shanns/master/v2/comic%20shanns%202.ttf")
		format("truetype");
	font-weight: normal;
	font-style: normal;
}

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

:root {
	--bg: #ffffff;
	--surface: #f0f0f0;
	--border: #c0c0c0;
	--text: #1a1a1a;
	--muted: #777777;
	--code-bg: #ececec;
	--font: "ComicShanns", monospace;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	font-size: 1.05rem;
	line-height: 1.8;
	padding: 0 2rem;
	overflow-x: hidden;
}

.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 0 4rem;
}

.prose h2 {
	font-size: 1.55rem;
	font-weight: 800;
	margin: 2rem 0 0.6rem;
	scroll-margin-top: 1rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.prose h3 {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 1.5rem 0 0.5rem;
	scroll-margin-top: 1rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.prose h2 a.anchor {
	order: -1;
	font-size: 1.55rem;
	font-weight: 400;
	color: var(--muted);
	text-decoration: none;
	opacity: 0.35;
	transition: opacity 0.15s;
	user-select: none;
	flex-shrink: 0;
	line-height: 1;
}
.prose h3 a.anchor {
	order: -1;
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--muted);
	text-decoration: none;
	opacity: 0.35;
	transition: opacity 0.15s;
	user-select: none;
	flex-shrink: 0;
	line-height: 1;
}
.prose h2:hover a.anchor,
.prose h3:hover a.anchor {
	opacity: 1;
}

.prose p {
	margin-bottom: 0.85rem;
	font-size: 1.05rem;
}
.prose em {
	color: var(--muted);
	font-style: italic;
}
.prose strong {
	font-weight: 700;
}

.prose blockquote {
	border-left: 3px solid var(--text);
	padding: 0.5rem 1rem;
	margin: 1rem 0;
	background: var(--surface);
	color: var(--muted);
	font-size: 0.97rem;
}

.prose code {
	background: var(--code-bg);
	padding: 0.15em 0.4em;
	border-radius: 3px;
	font-size: 0.95em;
	font-family: var(--font);
}
.prose pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1.1rem 1.3rem;
	overflow-x: auto;
	margin: 1rem 0;
	font-size: 0.97rem;
	line-height: 1.65;
}
.prose pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
	margin: 1rem 0;
}
.prose th {
	text-align: left;
	padding: 0.5rem 0.8rem;
	border-bottom: 2px solid var(--text);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}
.prose td {
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.prose tr:last-child td {
	border-bottom: none;
}

.prose ul, .prose ol {
	padding-left: 1.6rem;
	margin-bottom: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 1.05rem;
}

.prose hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

.yt-dock {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	width: 380px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
	z-index: 50;
	user-select: none;
	transition: box-shadow 0.15s, top 0.18s ease, left 0.18s ease;
}
.yt-dock.snapping {
	transition: box-shadow 0.15s, top 0.18s ease, left 0.18s ease;
}
.yt-dock.dragging {
	transition: box-shadow 0.15s;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.yt-dock.collapsed iframe {
	height: 0 !important;
}

@media (max-width: 600px) {
	.yt-dock {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
	.yt-dock iframe {
		height: 180px;
	}
	.yt-dock.collapsed iframe {
		height: 0 !important;
	}
}

.yt-dock-label {
	padding: 0.5rem 0.9rem;
	font-size: 0.82rem;
	color: var(--muted);
	border-bottom: 1px solid var(--border);
	font-family: var(--font);
	cursor: grab;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.yt-dock.collapsed .yt-dock-label {
	border-bottom: none;
}
.yt-dock-label:active {
	cursor: grabbing;
}
.yt-dock-label .drag-hint {
	margin-left: auto;
	font-size: 0.7rem;
	opacity: 0.4;
}

.yt-dock-toggle {
	margin-left: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
	background: none;
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.1em 0.45em;
	cursor: pointer;
	font-family: var(--font);
	line-height: 1.5;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.1s;
}
.yt-dock-toggle:hover {
	opacity: 1;
}

.yt-dock iframe {
	display: block;
	width: 100%;
	height: 213px;
	border: none;
	pointer-events: none;
	transition: height 0.2s ease;
}
.yt-dock.dragging iframe {
	pointer-events: none;
}

.snap-indicator {
	position: fixed;
	background: rgba(0, 0, 0, 0.06);
	border: 2px dashed var(--border);
	border-radius: 8px;
	z-index: 40;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}
.snap-indicator.visible {
	opacity: 1;
}

@media (max-width: 600px) {
	.snap-indicator {
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}