/*! initialize.css v0.1 | MIT License | https://github.com/nov-jp/initialize-css */

/*************
 * Variables *
 *************/

:root {
	--alpha_xl: calc(100% * 1 / 8);
	--alpha_l: calc(100% * 1 / 4);
	--alpha_m: calc(100% * 1 / 2);
	--alpha_h: calc(100% * 3 / 4);
	--alpha_xh: calc(100% * 7 / 8);

	--clamp_s: calc((100% - max(480px, 30rem)) * 1e6);
	--clamp_m: calc((100% - max(720px, 45rem)) * 1e6);
	--clamp_l: calc((100% - max(960px, 60rem)) * 1e6);
	--clamp_xl: calc((100% - max(1200px, 75rem)) * 1e6);
	--clamp_rev-s: calc((max(480px, 30rem) + 1px - 100%) * 1e6);
	--clamp_rev-m: calc((max(720px, 45rem) + 1px - 100%) * 1e6);
	--clamp_rev-l: calc((max(960px, 60rem) + 1px - 100%) * 1e6);
	--clamp_rev-xl: calc((max(1200px, 75rem) + 1px - 100%) * 1e6);
	--clamp_cqi-s: calc((100cqi - max(480px, 30rem)) * 1e6);
	--clamp_cqi-m: calc((100cqi - max(720px, 45rem)) * 1e6);
	--clamp_cqi-l: calc((100cqi - max(960px, 60rem)) * 1e6);
	--clamp_cqi-xl: calc((100cqi - max(1200px, 75rem)) * 1e6);
	--clamp_cqi-rev-s: calc((max(480px, 30rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-m: calc((max(720px, 45rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-l: calc((max(960px, 60rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-xl: calc((max(1200px, 75rem) + 1px - 100cqi) * 1e6);

	--elev_xl: 0 1px 4px -1px;
	--elev_l: 0 2px 8px -2px;
	--elev_m: 0 4px 16px -4px;
	--elev_h: 0 8px 32px -8px;
	--elev_xh: 0 16px 64px -16px;

	--em_h1: calc(1em * 12 / 6);
	--em_h2: calc(1em * 12 / 7);
	--em_h3: calc(1em * 12 / 8);
	--em_h4: calc(1em * 12 / 9);
	--em_h5: calc(1em * 12 / 10);
	--em_h6: calc(1em * 12 / 11);
	--em_xxs: calc(1em * 6 / 9);
	--em_xs: calc(1em * 6 / 8);
	--em_s: calc(1em * 6 / 7);
	--em_m: calc(1em * 6 / 6);
	--em_l: calc(1em * 6 / 5);
	--em_xl: calc(1em * 6 / 4);
	--em_xxl: calc(1em * 6 / 3);
	--em_xxxl: calc(1em * 6 / 2);

	--font_serif: ui-serif, serif;
	--font_sans: ui-sans-serif, sans-serif;
	--font_mono: ui-monospace, monospace;
	--font_default: var(--font_sans);

	--line_xf: max(1px, 0.0625rem);
	--line_f: max(1px, 0.125rem);
	--line_m: max(1px, 0.25rem);
	--line_b: max(1px, 0.5rem);
	--line_xb: max(1px, 1rem);

	--radius_xs: max(1px, 0.125rem);
	--radius_s: max(1px, 0.25rem);
	--radius_m: max(1px, 0.5rem);
	--radius_l: max(1px, 1rem);
	--radius_xl: max(1px, 2rem);

	--sp_xxs: max(1px, 1rem / 8);
	--sp_xs: max(1px, 1rem / 4);
	--sp_s: max(1px, 1rem / 2);
	--sp_m: max(1px, 1rem);
	--sp_l: max(1px, 1rem * 2);
	--sp_xl: max(1px, 1rem * 4);
	--sp_xxl: max(1px, 1rem * 8);

	--letter-spacing: normal;

	--outline-style: solid;
	--outline-width: var(--line_m);
	--outline-color: color-mix(in srgb, transparent, Highlight var(--alpha_m));
	--outline-offset: calc(var(--line_m) / -2);

	--red: #fc7459;
	--yellow: #df9a11;
	--green: #45b40e;
	--blue: #6194fa;
	--gray: #909090;
	--black: #202020;
	--white: #fff;
	--dark-light: light-dark(var(--black), var(--white));
	--light-dark: light-dark(var(--white), var(--black));

	--sheer-red: color-mix(in srgb, transparent, var(--red) var(--alpha_m));
	--sheer-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_m));
	--sheer-green: color-mix(in srgb, transparent, var(--green) var(--alpha_m));
	--sheer-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_m));
	--sheer-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_m));
	--sheer-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_m));
	--sheer-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_m));
	--sheer-text: color-mix(in srgb, transparent, currentcolor var(--alpha_m));
	--sheerer-red: color-mix(in srgb, transparent, var(--red) var(--alpha_l));
	--sheerer-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_l));
	--sheerer-green: color-mix(in srgb, transparent, var(--green) var(--alpha_l));
	--sheerer-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_l));
	--sheerer-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_l));
	--sheerer-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_l));
	--sheerer-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_l));
	--sheerer-text: color-mix(in srgb, transparent, currentcolor var(--alpha_l));
	--sheerest-red: color-mix(in srgb, transparent, var(--red) var(--alpha_xl));
	--sheerest-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_xl));
	--sheerest-green: color-mix(in srgb, transparent, var(--green) var(--alpha_xl));
	--sheerest-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_xl));
	--sheerest-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_xl));
	--sheerest-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_xl));
	--sheerest-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_xl));
	--sheerest-text: color-mix(in srgb, transparent, currentcolor var(--alpha_xl));
}

/**************
 * Properties *
 **************/

/**
 * border
 * border-spacing
 * margin
 * padding
 */
* {
	--sp-scale: 1;
	--sp: calc(var(--sp-size, var(--sp_m)) * var(--sp-scale) * var(--sp-ratio, 1));
	margin: 0;
}
:where(article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre, blockquote, ol, ul, menu, dl, figure, main, search, div, table, form, fieldset, details) {
	--sp-scale: 2;

	&:where(article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, hr, main) {
		--sp-scale: 4;
	}
	& ~ & {
		margin-block-start: var(--sp);
	}
	:where(article, section, nav, aside, header, footer, hr, main):has(~ &) {
		margin-block-end: var(--sp);
	}
	:where(article, nav, aside, header, footer, blockquote, ol, ul, menu, dl, figure, table, fieldset, details) & {
		--sp-ratio: calc(1 / 2);
	}
}
:where(hgroup, dl) > *, :where(div:not([class^="_"], [class*=" _"], [style*="--:"])) {
	margin-block: 0;
}
dialog, :where([popover]) {
	border: none;
	margin: auto;
	padding-block: calc(1.5lh - 1.5em);
	padding-inline: calc(2lh - 2em);
}
iframe, fieldset {
	border: none;
}
table {
	border-spacing: 2em 0;
}
hr {
	margin-inline: auto;
}
li, dd {
	margin-inline: 2em 0;
}
pre, blockquote {
	padding-inline: 2em;
}
ol, ul, menu, td, th, fieldset, legend {
	padding: 0;
}

/**
 * cursor
 */
:is(dfn, abbr):where([title]) {
	cursor: help;
}
label:where([for], :has(:enabled)), input:where([type="range"], [type="color"], [type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="image"], [type="reset"], [type="button"]), button, select, option, summary {
	cursor: pointer;
}
optgroup, :disabled, :disabled * {
	cursor: default;
}
::file-selector-button {
	cursor: inherit;
}

/**
 * display
 */
:where(option[selected][disabled], dialog:not([open], [popover]), [popover]:not(:popover-open), [hidden]:not([hidden="until-found"])):not(#_) {
	display: none;
}

/**
 * font
 * letter-spacing
 */
pre, code, samp, kbd {
	--letter-spacing: normal;
	font-family: var(--font_mono);
}
input, button, select, textarea, ::file-selector-button {
	--letter-spacing: normal;
	font-family: inherit;
	font-size: inherit;
}
rt, rp {
	font-size: 0.5em;
	font-style: normal;
	font-weight: normal;
}
html {
	font-family: var(--font_default);
}
h1 {
	font-size: var(--em_h1);
}
h2 {
	font-size: var(--em_h2);
}
h3 {
	font-size: var(--em_h3);
}
h4 {
	font-size: var(--em_h4);
}
h5 {
	font-size: var(--em_h5);
}
h6 {
	font-size: var(--em_h6);
}
figcaption, caption, small {
	font-size: var(--em_s);
}
sub, sup {
	font-size: var(--em_xs);
}
address, optgroup {
	font-style: inherit;
}
h1, h2, h3, h4, h5, h6, dt, th, optgroup, legend, summary, strong, b {
	font-weight: bolder;
}
option {
	font-weight: normal;
}

/**
 * (min-|max-)?(block|inline)-size
 */
dialog, :where([popover]) {
	max-block-size: 100%;
	max-inline-size: 100%;
}
hr, img, embed, object, video, input:where([type="image"]) {
	block-size: auto;
}
img, iframe, embed, object, video, audio, input, button, select, textarea, progress, meter, canvas {
	max-inline-size: 100%;
}

/**
 * text-align
 */
caption, td, th {
	text-align: inherit;
}

/**
 * vertical-align
 */
img, iframe, embed, object, video, audio, input, button, select, textarea, progress, meter, canvas {
	vertical-align: middle;
}
tbody, thead, tfoot, tr {
	vertical-align: top;
}
:is(tbody, thead, tfoot, tr) > * {
	vertical-align: inherit;
}

/************
 * Elements *
 ************/

/**
 * Universal, Attribute, Pseudo-class, Pseudo-element
 */
*, ::before, ::after, ::file-selector-button, ::details-content {
	box-sizing: border-box;
	letter-spacing: var(--letter-spacing, normal);
	line-height: var(--line-height, calc(var(--leading, var(--leading-size, var(--sp_m)) * var(--leading-scale, 1) * var(--leading-ratio, 1)) + 1em));
	min-inline-size: 0;
}
:focus-visible {
	outline: var(--outline-style) var(--outline-width) var(--outline-color);
	outline-offset: var(--outline-offset);
}
:target {
	scroll-margin-block-start: calc(100dvb / 3);
}
:where(:modal)::backdrop {
	background: var(--sheerest-dark-light);
}

/**
 * The document element
 */
html {
	background: var(--light-dark);
	color: var(--dark-light);
	container: root / inline-size;
	min-inline-size: 320px;
	overflow-wrap: anywhere;
	tab-size: 4;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	&:where(:lang(ja, ko, zh)) {
		line-break: strict;
		word-break: auto-phrase;
	}
	&:where(:has(:modal)) {
		overflow: hidden;
		scrollbar-gutter: stable;
	}
	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
		scroll-behavior: smooth;
	}
}

/**
 * Grouping content
 */
hr {
	border: var(--line_xf) var(--sheer-text);
	border-block-start-style: solid;
	color: inherit;
	overflow: visible;
}
pre {
	white-space: pre-wrap;
}
ul, menu {
	list-style-type: disc;
}

/**
 * Text-level semantics
 */
a:where([href]) {
	color: var(--blue);
}
a:where(:not(:hover)) {
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	a:where([href^="tel:"], [href^="sms:"]) {
		color: inherit;
		pointer-events: none;
	}
}
rt, rp, sub, sup {
	--leading: 0px;
}
mark {
	background: var(--sheer-yellow);
	color: inherit;
}

/**
 * Embedded content
 */
iframe:where([style~="--aspect-ratio--:"]) {
	aspect-ratio: var(--aspect-ratio--);
	block-size: auto;
}

/**
 * Tabular data
 */
:where(td, th):not(#_) {
	background-clip: padding-box;
}

/**
 * Forms
 */
input:where(:not([type]), [type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="date"], [type="month"], [type="week"], [type="time"], [type|="datetime"], [type="number"], [type="submit"], [type="reset"], [type="button"]), button, select, textarea, ::file-selector-button {
	appearance: none;
	border-style: solid;
	border-width: var(--line_xf);
	border-radius: calc(var(--line_xf) * 2);
	padding-block: 0;
	padding-inline: calc(0.5lh - 0.5em);
}
textarea {
	min-block-size: 2lh;
	resize: block;
}
::-webkit-inner-spin-button {
	height: auto;
}
::-webkit-search-decoration {
	appearance: none;
}

/**
 * Interactive elements
 * Popover API
 */
details:where([name]) {
	:where(&) + & {
		margin-block-start: 0;
	}
}
dialog, :where([popover]) {
	--inline-size: fit-content;
	background: var(--light-dark);
	box-shadow: var(--elev_xh) var(--dark-light);
	color: var(--dark-light);
	inline-size: var(--inline-size);
	overflow: auto;
	overscroll-behavior: contain;
	z-index: calc(infinity);
}