@charset "UTF-8";

/* 色とりどりのイメージ The Webmaster Shiny Colors: Shinymas Everywhere! */

a[data-note]::after {
	background: var(--bg);
	border: 1px solid var(--winkie);
	box-shadow: 4px 4px 0 var(--fg);
	color: var(--winkie);
	font-size: 0.75rem;
	opacity: 0;
	padding: 0.5ch 1ch;
	white-space: normal;
}

a[data-note]:focus::after, a[data-note]:hover::after {
	opacity: 1;
}

/* For when a link is either a quick stroll or an unexpected trip to another world. */

a.isekai:active, a.isekai:link, a.isekai:visited {
	color: var(--oz);
	text-decoration: underline;
	text-decoration-color: var(--oz);
	text-decoration-style: dotted;
	text-underline-offset: 0.2em;
	transition: color 0.42s ease, text-decoration-color 0.42s ease; 
}

a.isekai:focus {
	border-radius: 0.1em;
	color: var(--winkie);
	outline-offset: 0.21em;
	outline: 2px solid var(--winkie);
	text-decoration-color: var(--winkie);
}

a.isekai:hover {
	color: var(--winkie);
	text-decoration: underline;
	text-decoration-color: var(--winkie);
	text-underline-offset: 0.2em;
}

a.sanpo:active, a.sanpo:link, a.sanpo:visited {
	color: var(--gillikin);
	text-decoration: underline;
	text-decoration-color: var(--gillikin);
	text-decoration-style: dotted;
	text-underline-offset: 0.2em;
	transition: color 0.42s ease, text-decoration-color 0.42s ease; 
}

a.sanpo:focus {
	border-radius: 0.1em;
	color: var(--munchkin);
	outline-offset: 0.21em;
	outline: 2px solid var(--munchkin);
	text-decoration-color: var(--munchkin);
}

a.sanpo:hover {
	color: var(--munchkin);
	text-decoration: underline;
	text-decoration-color: var(--munchkin);
	text-underline-offset: 0.2em;
}

.abstract
	{
	color: var(--winkie);	
	}

address { /* I’ve got mail. */
	font-style: normal;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.21rem;
	line-height: 1.42;
	-moz-osx-font-smoothing: grayscale; /* For the kitsune brigade. */
	-webkit-font-smoothing: antialiased; /* Mac Inside! */
}

.date {
	color: var(--oz);
	opacity: 0.7;
}

.date-list {
	color: var(--quadling);
	opacity: 0.7;
}

.depa-kosu {
	color: var(--winkie); 
	/* A modest hint of gold. */
}

details > summary {
	list-style: none;
}

details > summary::-webkit-details-marker {
	display: none; 
}

details[open] .floppydisk span {
	display: inline-block;
	transform: rotate(180deg);
}

.emerald {
	color: var(--oz); 
	/* Just a bit of hope. */
}

.event-title {
	font-style: italic;
}

.fakelink {
	color: var(--gillikin);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-underline-offset: 0.2em;
}

figcaption {
	font-size: 0.84rem;
	opacity: 0.84;
	text-align: center;
}

.floppydisk {
	color: var(--winkie);
	font-weight: bold;
	user-select: none;
}

.floppydisk:hover {
	opacity: 0.8;
}

.helpwantedtranslator {
	font-style: italic;	
}


html {
	background-color: var(--bg);
}

h1, h2, h3 {
	color: var(--munchkin);
	font-size: inherit;
	font-weight: inherit;
}

h1::after { /* Because nothing says “terminal” like a blinking cursor. */
	content: "_";
	color: var(--fg);
	font-weight: bold;
	animation: blink 1s step-end infinite;
} 

/* Markdown vibes, lightly applied. */

h1::before {
	content: "#" / "";
	opacity: 0.42;
	margin-right: 1ch;
}

h2::before {
	content: "##" / "";
	opacity: 0.42;
	margin-right: 1ch;
}

h3::before {
	content: "###" / "";
	opacity: 0.42;
	margin-right: 1ch;
}

img {
	border-radius: 0.2em;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.list::before {
	content: "*" / "";
	opacity: 0.42;
	margin-right: 1ch;	
}

li.starcatcher-anya::before {
	color: var(--quadling);
	content: "*";
	font-weight: bold;
}

nav ul li:not(.back):not(.starcatcher-anya)::before {
	content: "[>]" / "";
	opacity: 0.84;
}

:root { /* Hex is fine. Oklab is nicer. Because if you’ve paid for a modern monitor, you may as well give it something to do. */
	--bg: color-mix(in oklab, midnightblue 42%, black);
	--fg: color-mix(in oklab, azure 42%, lavender);
	--gillikin: color-mix(in oklab, magenta 42%, mistyrose);
	--munchkin: color-mix(in oklab, cyan 42%, dodgerblue);
	--oz: color-mix(in oklab, palegreen 42%, mediumaquamarine);
	--quadling: color-mix(in oklab, chocolate 42%, coral);
	--winkie: color-mix(in oklab, blanchedalmond 42%, gold);
}

small {
	color: var(--winkie);
	font-size: 0.84rem;
	opacity: 0.84;
}

.tagline {
	opacity: 0.6;
}

dt {
	color: var(--munchkin);
	opacity: 0.84;
	text-underline-offset: 0.2em;
}

dt::before {
	color: var(--munchkin);
	content: "- ";
	font-weight: bold;
}

.underline {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}