:root {
  --uchu-yin-1-raw: 91.87% 0.003 264.54;
  --uchu-yin-1: oklch(var(--uchu-yin-1-raw));
  --uchu-yin-2-raw: 84.61% 0.004 286.31;
  --uchu-yin-2: oklch(var(--uchu-yin-2-raw));
  --uchu-yin-3-raw: 76.89% 0.004 247.87;
  --uchu-yin-3: oklch(var(--uchu-yin-3-raw));
  --uchu-yin-4-raw: 69.17% 0.004 247.88;
  --uchu-yin-4: oklch(var(--uchu-yin-4-raw));
  --uchu-yin-5-raw: 61.01% 0.005 271.34;
  --uchu-yin-5: oklch(var(--uchu-yin-5-raw));
  --uchu-yin-6-raw: 52.79% 0.005 271.32;
  --uchu-yin-6: oklch(var(--uchu-yin-6-raw));
  --uchu-yin-7-raw: 43.87% 0.005 271.3;
  --uchu-yin-7: oklch(var(--uchu-yin-7-raw));
  --uchu-yin-8-raw: 35.02% 0.005 236.66;
  --uchu-yin-8: oklch(var(--uchu-yin-8-raw));
  --uchu-yin-9-raw: 25.11% 0.006 258.36;
  --uchu-yin-9: oklch(var(--uchu-yin-9-raw));
  --uchu-yin-raw: 14.38% 0.007 256.88;
  --uchu-yin: oklch(var(--uchu-yin-raw));
  --uchu-yang-raw: 99.4% 0 0;
  --uchu-yang: oklch(var(--uchu-yang-raw));

  --solid-primary:   oklch(72% 0.10 240);
  --solid-secondary: oklch(55% 0.07 255);
  --math-accent:     oklch(78% 0.12 200);
  --math-dim:        oklch(60% 0.05 260);

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg: 12px;

  --content-width: 760px;
  --sidebar-width: 160px;
  --sidebar-gap:    24px;
}

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

/* ============================================================
   BODY
   ============================================================ */

body {
  font-family: Verdana, sans-serif;
  margin: auto;
  padding: 20px;
  max-width: var(--content-width);
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  background-color: var(--uchu-yin);
  color: var(--uchu-yin-1);
}

h1, h2, h3, h4, h5, h6, strong, b { color: var(--uchu-yin-1); }

h2 {
  
}

p {
    margin: 0 0 1rem;
}

/* ============================================================
   GLOBAL LINKS
   ============================================================ */

a,a:visited     { color: #6e8af3;}
a:hover,
a:visited:hover { color: #7f9fff; }

/* ============================================================
   TITLE / NAV
   ============================================================ */

h1.page-title { text-decoration: none;
                border-bottom: 1px solid #555;
                font-weight: 800;
                margin-top: 0px}

.page-title {
  font-family: serif;
  font-style: italic;
  font-size: 2em;
  color: var(--uchu-yin-1);
  text-align: center;
}

nav a { margin-right: 0; }

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}

footer {
  width: fit-content;
  margin-left: auto;
  padding: 0px;
  font-size: 0.5rem;
  color: var(--uchu-yin-6);
}

/* ============================================================
   MAIN
   ============================================================ */

main {
  background-color: oklch(from var(--uchu-yin) calc(l + 0.04) c h / 0.6);
  padding: 0 0 20 0;
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 4px oklch(from var(--uchu-yin) l c h / 0.3);
}

main a {
    font-weight: inherit;
    text-decoration: none;
    display: inline;
}

h1.page-title, article h1, main h1 { text-align: center; }

content { line-height: 1.6; }

/* ============================================================
   BLOG LIST
   ============================================================ */

ul.blog-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.blog-posts li {
  display: inline;
}

ul.blog-posts li a,
ul.blog-posts li a:visited {
  color: #fff ;
  display: inline;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  text-decoration: none;
  font-size: inherit;
  white-space: normal;
  word-break: break-all;
}
ul.blog-posts li a:hover,
ul.blog-posts li a:visited:hover {
  color: #eee ;
  text-decoration: none;
}

ul.blog-posts li + li::before {
  content: "/";
  color: var(--uchu-yin-7);
}

/* ============================================================
   LINKMAP SIDEBAR
   ============================================================ */

.linkmap {
  display: none;
  position: fixed;
  top: 40px;
  left: calc(50% + var(--content-width) / 2 + var(--sidebar-gap));
  width: var(--sidebar-width);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background-color: oklch(from var(--uchu-yin) calc(l + 0.03) c h);
  padding: 12px;
}

@media (min-width: 1100px) {
  .linkmap { display: block; }
}

.linkmap section + section {
  margin-top: 0;
  padding-top: 14px;
  border-top: none;
}

.linkmap section::before {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  border-radius: 0px;
  margin-bottom: 0px;
}

.linkmap-out::before  { background: oklch(55% 0.18 250); }
.linkmap-back::before { background: oklch(55% 0.18 20);  }

.linkmap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.linkmap li {
  display: inline;
}
.linkmap li a,
.linkmap li a:visited {
  display: inline;
  padding: 0;
  background: none;
  text-decoration: none;
  font-size: 0.5rem;
  white-space: normal;
  word-break: break-all;
}
.linkmap li + li::before {
  content: "/";
  color: var(--uchu-yin-5);
}

/* ============================================================
   CODE
   ============================================================ */

code {
  padding: 2px 5px;
  color: var(--uchu-yin-1);
  background-color: var(--uchu-yin-9);
  border: 1px solid var(--uchu-yin-6);
  border-radius: var(--r-sm);
}

pre code {
  display: block;
  padding: 20px;
  white-space: pre-wrap;
  font-size: 14px;
  overflow-x: auto;
  text-wrap: nowrap;
}

/* ============================================================
   TABLE
   ============================================================ */

table { width: 100%; }
table, th, td {
  border: 1px solid var(--uchu-yin-5);
  border-collapse: collapse;
  padding: 5px;
}

/* ============================================================
   FORMS
   ============================================================ */

textarea {
  background-color: var(--uchu-yin-9);
  color: var(--uchu-yin-1);
  width: 100%;
  font-size: 16px;
  border: 1px solid var(--uchu-yin-5);
}

input {
  background-color: var(--uchu-yin-9);
  color: var(--uchu-yin-1);
  font-size: 16px;
  border: 1px solid var(--uchu-yin-5);
}

/* ============================================================
   BLOCKQUOTE / IMAGES / FIGURES
   ============================================================ */

blockquote {
  border-left: 1px solid var(--uchu-yin-5);
  color: var(--uchu-yin-2);
  padding-left: 20px;
  font-style: italic;
}

img { max-width: 100%; height: auto;}
figure { margin-inline-start: 0; margin-inline-end: 0; }
figcaption > p {
  margin-block-start: 0;
  text-align: center;
  font-style: italic;
  color: var(--uchu-yin-3);
}

/* ============================================================
   TAGS / MISC
   ============================================================ */

ul.blog-posts li a.tag-haskell,
.linkmap li a.tag-haskell {
    background: oklch(28% 0.18 300);
    border : solid 1px;
    border-color: oklch(62% 0.22 300);
    color: oklch(85% 0.12 300) !important;
}

ul.blog-posts li a.tag-internet {
    background: oklch(24% 0.08 230);
    color: oklch(87% 0.08 225) !important;
}

a.blog-tags { line-height: 2; margin-right: 5px; }
h3.blog-filter { margin-bottom: 0; }
.helptext  { color: var(--uchu-yin-3); font-size: small; }
.errorlist { color: var(--uchu-yin-3); font-size: small; }
.disabled  { color: currentColor; cursor: not-allowed; opacity: 0.7; }
p.byline   { font-style: italic; }

.skip-link {
  position: absolute;
  top: 5px;
  transform: translateY(-600%);
  transition: transform 0.5s;
  background-color: var(--uchu-yin);
  padding: 6px;
}
.skip-link:focus { transform: translateY(0%); }

/* ============================================================
   VIDEO BACKGROUND
   ============================================================ */

.video-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }

#bv {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   MATH — KaTeX
   ============================================================ */

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  margin: 1.25rem 0;
}
.katex-display > .katex { display: block; text-align: center; }
.katex { font-size: 1.05em; }

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  body { color: #000; background: #fff; }
  .linkmap, .video-container { display: none; }
  main { background: none; box-shadow: none; backdrop-filter: none; }
}