/* Flexoki palette (MIT License) — github.com/kepano/flexoki
   Layout & typography patterned on stephango.com */

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

:root {
  --font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: var(--font-content);
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", Menlo, Monaco, Consolas, "Source Code Pro", monospace;

  --border-radius: 4px;
  --image-radius: 6px;
  --font-small: 0.875em;
  --font-smaller: 0.8em;
  --wrap-wide: 54em;
  --wrap-normal: 37em;
  --heading-weight: 500;
  --line-height: 1.5;

  --flexoki-black: #100F0F;
  --flexoki-paper: #FFFCF0;
  --flexoki-50:  #F2F0E5; --flexoki-100: #E6E4D9; --flexoki-150: #DAD8CE;
  --flexoki-200: #CECDC3; --flexoki-300: #B7B5AC; --flexoki-400: #9F9D96;
  --flexoki-500: #878580; --flexoki-600: #6F6E69; --flexoki-700: #575653;
  --flexoki-800: #403E3C; --flexoki-850: #343331; --flexoki-900: #282726;
  --flexoki-950: #1C1B1A;

  --flexoki-red-400: #D14D41; --flexoki-red-600: #AF3029;
  --flexoki-orange-400: #DA702C; --flexoki-orange-600: #BC5215;
  --flexoki-yellow-100: #F6E2A0; --flexoki-yellow-400: #D0A215; --flexoki-yellow-600: #AD8301; --flexoki-yellow-900: #3A2D04;
  --flexoki-green-400: #879A39; --flexoki-green-600: #66800B;
  --flexoki-cyan-50:  #DDF1E4; --flexoki-cyan-400: #3AA99F; --flexoki-cyan-600: #24837B; --flexoki-cyan-950: #101F1D;
  --flexoki-blue-400: #4385BE; --flexoki-blue-600: #205EA6;
  --flexoki-purple-400: #8B7EC8; --flexoki-purple-600: #5E409D;
  --flexoki-magenta-400: #CE5D97; --flexoki-magenta-600: #A02F6F;

  --color-bg-primary: var(--flexoki-paper);
  --color-bg-secondary: var(--flexoki-50);
  --color-tx-normal: var(--flexoki-black);
  --color-tx-muted: var(--flexoki-600);
  --color-tx-faint: var(--flexoki-300);
  --color-ui-normal: var(--flexoki-100);
  --color-ui-hover: var(--flexoki-150);
  --color-ui-active: var(--flexoki-200);
  --color-highlight: var(--flexoki-yellow-100);
  --color-action: var(--flexoki-cyan-600);
  --color-bg-hover: var(--flexoki-cyan-50);
  --color-selection: rgba(187, 220, 206, 0.3);
}

.theme-dark {
  --color-bg-primary: var(--flexoki-black);
  --color-bg-secondary: var(--flexoki-950);
  --color-tx-normal: var(--flexoki-200);
  --color-tx-muted: var(--flexoki-500);
  --color-tx-faint: var(--flexoki-700);
  --color-ui-normal: var(--flexoki-900);
  --color-ui-hover: var(--flexoki-850);
  --color-ui-active: var(--flexoki-800);
  --color-highlight: var(--flexoki-yellow-900);
  --color-action: var(--flexoki-cyan-400);
  --color-bg-hover: var(--flexoki-cyan-950);
  --color-selection: rgba(30, 95, 91, 0.3);
}

@media (max-width: 860px) {
  :root {
    --wrap-normal: 88vw;
    --wrap-wide: 100vw;
    --heading-weight: 600;
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--color-bg-primary);
  color: var(--color-tx-normal);
  font-family: var(--font-content);
  font-size: calc(1rem + 0.2vw);
  line-height: var(--line-height);
  margin: 2vw auto 0 auto;
  padding: 2rem 0 12rem;
  overflow-x: hidden;
}

::selection { background-color: var(--color-selection); }

nav {
  margin: 0 auto 3em;
  width: var(--wrap-normal);
  max-width: var(--wrap-wide);
}

main, article, footer, heading {
  display: block;
  width: var(--wrap-normal);
  max-width: var(--wrap-wide);
  margin-left: auto;
  margin-right: auto;
}

footer { margin-top: 4em; padding-top: 1em; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  position: relative;
}
h1 { font-size: calc(1.35em + 0.55vw); letter-spacing: -0.02em; line-height: 1.25; }
h2 { font-size: calc(1em + 0.2vw); margin-top: 2em; }
h3 { font-size: 1em; }

heading h1 { margin-top: 0; }

p { margin-block-start: 0.5em; margin-block-end: 0.5em; }

a {
  color: var(--color-tx-normal);
  text-decoration: underline;
  text-decoration-color: var(--color-ui-active);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--color-action);
  text-decoration-color: var(--color-action);
}
a:focus { outline: none; background-color: var(--color-bg-hover); }

a.plain, a.muted { text-decoration: none; }
.muted, a.muted { color: var(--color-tx-muted); }
.muted:hover, a.muted:hover { color: var(--color-tx-normal); }

article a[href^="http"]:not([href*="ziyzhu.com"]):not(.plain) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25'/%3E%3C/svg%3E");
  background-position: right 33%;
  background-repeat: no-repeat;
  background-size: 0.7em;
  padding-right: 0.75em;
}

.small { font-size: var(--font-small); line-height: 1.4; }
.font-ui { font-family: var(--font-ui); }

.flex { display: flex; }
.align-center { align-items: center; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.mh { margin-left: 1em; }
.bt { border-top: 1px solid var(--color-ui-normal); }
.pn2 { padding-top: 2rem; }
.mn2 { margin-top: 2rem; }

hr {
  border: none;
  border-top: 1px solid var(--color-ui-normal);
  margin: 2em 0;
}

img { max-width: 100%; border-radius: var(--image-radius); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
  background-color: var(--color-bg-secondary);
  padding: 0.1em 0.3em;
  border-radius: var(--border-radius);
}
pre {
  background-color: var(--color-bg-secondary);
  padding: 1em;
  border-radius: var(--border-radius);
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 2px solid var(--color-ui-active);
  color: var(--color-tx-muted);
}

ul, ol { padding-left: 1.2em; }
li { margin: 0.25em 0; }

table {
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--font-small);
  font-variant-numeric: tabular-nums;
}
th { text-align: left; font-weight: 600; padding-bottom: 0.5em; }
td { padding: 0.5em 1em 0.5em 0; line-height: 1.3; vertical-align: top; }
tr { border-bottom: 1px solid var(--color-ui-normal); }

/* Theme toggle (sun/moon) */
#theme-toggle {
  height: 20px;
  width: 36px;
  display: inline-block;
  position: relative;
  border: none;
  cursor: pointer;
  margin-left: 1em;
}
#theme-toggle:hover .theme-toggle-switch { background-color: var(--color-action); }
.theme-toggle-slide {
  height: 20px;
  width: 100%;
  border: 1px solid var(--color-ui-normal);
  border-radius: 24px;
  position: absolute;
}
.theme-toggle-switch {
  position: absolute;
  z-index: 9;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background-color: var(--color-tx-muted);
  transition: left 0.1s linear;
  -webkit-mask-size: 14px;
          mask-size: 14px;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.theme-dark .theme-toggle-switch {
  left: 16px;
  background-color: var(--color-tx-normal);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
}

/* Heading anchor links */
h2, h3, h4, h5, h6 { position: relative; }
.anchor {
  opacity: 0;
  position: absolute;
  left: -1em;
  padding-right: 0.5em;
  color: var(--color-tx-faint);
  text-decoration: none;
  font-weight: 400;
  user-select: none;
  transition: opacity 0.1s ease-in-out;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor,
h5:hover .anchor, h6:hover .anchor,
.anchor:focus { opacity: 1; }
.anchor:hover { color: var(--color-tx-muted); }

/* Plain list + writing index — stephango.com home style */
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { margin: 0.2em 0; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.align-baseline { align-items: baseline; }
.nowrap { white-space: nowrap; }
.mh-r { margin-right: 0.75em; }

.list-plain a.plain { text-decoration: none; color: var(--color-tx-normal); }
.list-plain a.plain u {
  text-decoration: underline;
  text-decoration-color: var(--color-ui-active);
  text-underline-offset: 2px;
}
.list-plain a.plain:hover u {
  color: var(--color-action);
  text-decoration-color: var(--color-action);
}