.page {
	--page-font-size: 15px;
	--page-line-height: 1.75;                                                                                                                                                                                             
	--code-block-font-size: 13.5px;
	--code-block-line-height: 1.375;
}
@container page (width <= 767px) {
	.page,
	.stream .page {
		--page-font-size: 13.5px;
		--page-line-height: 1.675;
		--code-block-font-size: calc(var(--page-font-size, 1em) * 0.9);
		--telomere-width: 5px;
	}
}
.page {
	--page-layout-unit: calc(var(--page-font-size, 15px) * var(--page-line-height) / 4);
	--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 28px */
	--page-padding-left: calc(var(--page-layout-unit, 7px) * 7); /* 21px */
	--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 35px */
}
@container page (width <= 767px) {
	.page,
	.stream .page {
		--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
		--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
		--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
	}
}
@media(max-width: 767px) {
	.page {
		--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
		--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
		--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
	}
}
@media(min-width: 768px) and (max-width: 991px) {
 .page {
		--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
		--page-padding-left: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
		--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 5); /* 35px */
	}
}
:root {
	--indent-mark-width: 1.5em;
}
.quote {
	--quote-bg-color: hsl(223 12% 90% / 20%);
	--quote-text-color: hsl(0 0% 9%);
	--quote-text-color: hsl(from var(--page-text-color) h s l / 91%);
	--quote-border-left: hsl(45 3% 75%) solid 4px;
	--quote-padding-left: 1em;
	--quote-border-right: hsl(from var(--body-bg) h s l / 5%) solid 8px;
	--quote-font-family: "Atkinson Hyperlegible Next", var(--paragraph-latin), var(--paragraph-ja), var(--fallback), var(--icons);
	--quote-font-feature-settings: ;
	--quote-font-weight: 420;
}
:root {
		--sans-serif-latin: -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", "Arimo", "Roboto Flex", "Roboto";
		--sans-serif-ja: "IBM Plex Sans JP", "Noto Sans JP";
		--serif-latin: "Zilla Slab", "Souce Serif Pro", "Souce Serif 4", "Lora", "Crete Round", "Spectral", "Tinos";
  	--serif-ja: "UD Digi Kyokasho NK", "UD Digi Kyokasho NP", "GenEi Antique P", "源暎アンチック 詰", "GenEi Antique Pv5", "源暎アンチック 詰 v5", "Noto Serif JP", "IPAexMincho", "IPAex明朝";
		--narrow-latin: "Roboto Flex", "Roboto Condensed", "Aptos Narrow", "Segoe Condensed", var(--sans-serif-latin);
  	--narrow-ja: "Yu Gothic UI", var(--sans-serif-ja);
  	--narrow-font-feature-settings: 'palt';
  	--narrow-font-stretch: semi-condensed;
		--fallback: -apple-system, BlinkMacSystemFont, "Arimo", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Inter Variable", "Inter", "Roboto Flex", "Roboto", "Oxygen", "Adwaita Sans", "Cantarell", Helvetica, "Open Sans", "Ubuntu Medium", "Arial", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Droid Sans Fallback", "Last Resort"; 
}
@font-face {
	font-family: "UD Digi Kyokasho NK";
	font-weight: 400 550;
	size-adjust: 106.66%;
	src: local("UD Digi Kyokasho NK-R"), local("UD デジタル 教科書体 NK-R");
	}
	@font-face {
	font-family: "UD Digi Kyokasho NK";
	font-weight: 700;
	size-adjust: 106.66%;
	src: local("UD Digi Kyokasho NK-B"), local("UD Digi Kyokasho NK-B Bold"), local("UD デジタル 教科書体 NK-B");
}
@font-face {
	font-family: "UD デジタル 教科書体 NK";
	font-weight: 400 550;
	size-adjust: 106.66%;
	src: local("UD Digi Kyokasho NK-R"), local("UD デジタル 教科書体 NK-R");
	}
	@font-face {
	font-family: "UD デジタル 教科書体 NK";
	font-weight: 700;
	size-adjust: 106.66%;
	src: local("UD Digi Kyokasho NK-B"), local("UD Digi Kyokasho NK-B Bold"), local("UD デジタル 教科書体 NK-B");
}
body {
	--page-font-family: var(--paragraph-latin), var(--sans-serif-latin), var(--paragraph-ja), var(--sans-serif-ja), sans-serif, var(--icons, "AppIcons"), var(--fallback);
	--paragraph-latin: "Atkinson Hyperlegible Next", "Inter Variable", "Roboto Flex", "Helvetica", "Arimo";
	--paragraph-ja: "UD Digi Kyokasho NK", "Arimo + Noto Sans JP", "Roboto + Noto Sans JP", "Noto Sans JP";
}
body {
	--italic-latin: "Zilla Slab", "Lora", "Literata";
	--italic-ja: ;
	--ffs-italic: none;
	--fw-italic: 500;
}
.table-block {
	--table-block-cell-font-size: calc(var(--page-font-size, 15px) * 15 / 14.5);
	--table-block-border: 0.35px solid hsl(42 4% 4% / 35%);
}
.page {
	--h1-font-family-latin: "Zilla Slab";
	--h1-font-family-ja: "UD Digi Kyokasho NK", "Noto Sans JP";
	--h1-font-size: calc(1.8666667 * var(--fs-base));
	--h1-font-weight: 500;
	--h1-font-feature-settings: '';
}
.page {
	--onpage-box-shadow:
		0 0 0.375rem rgba(0, 0, 0, 0.125),
		0 0 0.25rem rgba(0, 0, 0, 0.15);
	--onpage-filter-drop-shadow:
		drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
		drop-shadow(0 0 6px rgba(0, 0, 0, 0.12))
		drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
}
body {
	--page-image-filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
}
body {
	--relation-label-links-bg: hsl(from var(--navbar-bg) h s 99% / 100%);
	--relation-label-links-text: #5e8af7;
	--relation-label-empty-bg: white;
	--relation-label-empty-text: #fd7373;
	--new-button-bg: hsl(from var(--search-form-bg) h s l / calc(a * 0.5));
}
:root {
 	--c-purple-1: #924D8B;
 	--c-purple-2: #762572;
 	--c-purple-3: #77216F;
 	--c-purple-4: #5E2750;
 	--c-purple-5: #2C001E;
 	
	--c-red-1: #EA485C;
	--c-red-2: #DE374C;
	--c-red-3: #D3273B;
	--c-red-4: #c7162b;
	--c-red-5: #a91224;
}
html {
	--navbar-bg-copy: var(--navbar-bg, midnightblue);
	--search-form-bg-copy: var(--search-form-bg, deeppink);
	--body-bg-copy: var(--body-bg, hsl(223 12% 90%));
}
body {
	--accent-color: var(--c-purple-1, #924D8B);
}
body {
	--body-bg: hsl(223 12% 90%);
	--page-border-top-width: var(--page-layout-unit, 7px);
	--page-border-top-color: hsl(from var(--navbar-bg) h 5% 89%);
	--page-border-top: var(--page-border-top-width, 7px) solid var(--page-border-top-color);
	--page-box-shadow-color-primary: hsl(from midnightblue h s 50%);
	--page-box-shadow-color-secondary: var(--c-purple-3);
	--page-box-shadow:
 		0 0 0.25rem hsl(from var(--page-box-shadow-color-primary) h s l / 0.2),
 		2.8px 2.8px 2.2px hsl(from var(--page-box-shadow-color-tertiary, black) h s l / 0.02),
 		6.7px 6.7px 5.3px hsl(from var(--page-box-shadow-color-primary) h s l / 0.028),
 		12.5px 12.5px 10px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.035),
 		22.3px 22.3px 17.9px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.042),
 		41.8px 41.8px 33.4px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.05),
 		100px 50px 80px hsl(from var(--page-box-shadow-color-primary) h s l / 0.07),
 		-2.8px 2.8px 5.3px hsl(from var(--page-box-shadow-color-primary) h s l / 0.01),
 		-6.7px 6.7px 5.3px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.028),
 		-12.5px 12.5px 10px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.035),
 		-22.3px 22.3px 17.9px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.042),
 		-41.8px 41.8px 33.4px hsl(from var(--page-box-shadow-color-secondary) h s l / 0.05),
 		-100px 50px 80px hsl(from var(--page-box-shadow-color-primary) h s l / 0.07);
}
body {
	--telomere-unread: hsl(from var(--accent-color, var(--c-purple-1, var(--navbar-bg, green))) h 65% 44% / 85%);
}
.status-bar {
		--statusbar-page-title-bg: 				hsl(from var(--accent-color) h s l / 65%);
		--statusbar-page-list-status-bg:	hsl(from var(--accent-color) h s l / 85%);
		--statusbar-error-bg: 							hsl(from goldenrod h s l / 65%);
}
.navbar {
	--navbar-bg: hsl(from var(--c-purple-3) h s l / 0%);
	--navbar-title-color: var(--c-purple-3);
	--navbar-title-font-family: "Zilla Slab", var(--narrow-latin), var(--narrow-ja), var(--sans-serif), var(--icons), sans-serif;
	--search-form-bg: hsl(252 2% 47% / 15%);
	--search-form-text-color: midnightblue;
	--search-form-icon-color: black;
	--search-form-icon-focus-color: midnightblue;
	--search-form-focus-box-shadow-color: var(--accent-color, midnightblue);
	--search-form-focus-box-shadow:
		0 0 4px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),
		0 0px 6px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),
		0 0 6px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),
		0 -3px 10px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.22),
		0 8px 16px hsl(from var(--search-form-focus-box-shadow-color) h s l / 0.24);
}
body {
	--stream-section-title-bg: var(--accent-color, midnightblue);
	--stream-section-title-text-color: white;
}
.page-menu {
	--page-menu-bg: hsl(0 0% 97% / 50%);
}
html:has(.cursor-line) .navbar {
	--navbar-bg: transparent;
	--search-form-bg: hsl(252 2% 47% / 15%);
	--navbar-title-color: var(--c-red-3);
}
.page {
	--page-bg: hsl(0 0% 99%);
	--cursor-line-bg: white;
	--page-text-color: hsl(0 0% 4%);
	
	&:has(.cursor-line) {
	/* --page-text-color-not-cursor-line: hsl(255 4% 38%); */
		--page-text-color-not-cursor-line: hsl(257 4% 35%);
	}
}
body {
	--cursor-color: crimson;
	caret-color: var(--cursor-color, var(--page-text-color));
}
body {
	--text-selection-bg: var(--c-red-1);
	--text-selection-bg-opacity: .4;
}
body {
	--telomere-updated-after-load-unread: hsl(from #EA485C h s l / 85%);
}
body {
	--page-link-color: #007aa6;
	--page-link-hover-color: var(--c-blue-5, midnightblue);
	--card-description-link-color: var(--page-link-color);
	--empty-page-link-color: #D3273B;
	--empty-page-link-hover-color: var(--c-red-5, crimson);
	--hashtag-color: #219E34;
	--hashtag-hover-color: var(--c-green-5);
	--empty-hashtag-color: #924D8B;
	--empty-hashtag-hover-color: var(--c-purple-5);
}
.code-block {
	--code-block-start-bg: hsl(0 0 15%);
	--code-block-star-line-bg: var(--body-bg, transparent);
	--code-block-start-text-color: hsL(42 35% 99%);
	--code-block-start-border: 
		none,
		2px solid var(--c-blue-4, midnightblue),
		none,
		none;
	--code-block-start-padding: 0.334em, 0.334em;
	--code-block-start-font-size: 1em;
	--code-block-start-font-weight: 450;
	--code-block-start-font-family: "Zilla Slab";
}
body {
	--code-block-font-family: "Consolas", "Menlo", "Cascadia Code", var(--monospace, monospace), var(--smaller-ja, var(--sans-serif-ja, "IBM Plex Sans JP"));
}
:root {
	--c-blue-1: #75d3f4;
	--c-blue-2: #47c4f1;
	--c-blue-3: #19B6EE;
	--c-blue-4: #007aa6;
	--c-blue-5: #335280;

	--c-green-1: #5AED70;
	--c-green-2: #47D35C;
	--c-green-3: #34B948;
	--c-green-4: #219E34;
	--c-green-5: #0e8420;

	--c-orange-1: #F29879;
	--c-orange-2: #F08763;
	--c-orange-3: #ED764D;
	--c-orange-4: #EB6536;
	--c-orange-5: #E95420;

	--c-yellow-1: #FCCD87;
	--c-yellow-2: #FBC16A;
	--c-yellow-3: #FBB44C;
	--c-yellow-4: #FAA82F;
	--c-yellow-5: #F99B11;
}