/* docs.koiayame.com: water at night, as Mizu's boot picture has it. One
   theme on purpose; every colour is set here. */
@font-face {
  font-family: "Mizu Mono";
  src: url("mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --deep: #061230;     /* the shadow under the boot picture's letters */
  --ground: #0A1B3D;
  --panel: #0E2449;
  --line: #1F3C68;
  --text: #E6F0FA;
  --dim: #A3BCD8;
  --faint: #6482A8;
  --sky: #6FA8DC;
  --ice: #5BCEFA;
  --rose: #F5A9B8;
  --band: #1E5AA8;
  --mono: "Mizu Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  scrollbar-color: var(--line) var(--deep);
}
* { box-sizing: border-box; }
html { background: var(--deep); }
body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, var(--ground) 0, var(--deep) 900px) var(--deep);
  font: 16.5px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The band along the bottom of the boot picture, here at the top. */
.ribbon {
  height: 4px;
  background: linear-gradient(90deg, var(--band), var(--ice), #fff, var(--rose), var(--band),
                              var(--ice), #fff, var(--rose), var(--band));
  background-size: 50% 100%;
  animation: band 6s linear infinite;
}
@keyframes band { to { background-position: 100% 0; } }

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 56px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Sidebar. */
.side {
  padding: 40px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.brand {
  font: 600 22px/1 var(--mono);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
}
.brand .dot { color: var(--rose); }
.links { display: flex; flex-direction: column; gap: 2px; }
.links a {
  color: var(--dim);
  text-decoration: none;
  padding: 7px 12px;
  border-left: 2px solid transparent;
  font-size: 15px;
}
.links a:hover { color: var(--text); border-left-color: var(--line); }
.links a[aria-current="page"] { color: var(--text); border-left-color: var(--ice); background: rgba(91, 206, 250, .06); }
.out { margin-top: auto; font-size: 13px; color: var(--faint); }
.out a { color: var(--faint); }
.out a:hover { color: var(--dim); }

main { padding: 44px 0 90px; min-width: 0; max-width: 780px; }

h1, h2, h3 { font-family: var(--mono); text-wrap: balance; color: var(--text); }
h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.15; margin: 0 0 14px; font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: 22px; margin: 52px 0 12px; font-weight: 620; padding-top: 16px; border-top: 1px solid var(--line); }
h3 { font-size: 17px; margin: 32px 0 8px; font-weight: 600; color: var(--ice); }
p, li { color: var(--dim); max-width: 68ch; }
p.lead { color: var(--text); font-size: 18.5px; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--ice); }
a:focus-visible, .links a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

code, pre, kbd { font-family: var(--mono); }
code { font-size: .9em; color: var(--text); background: rgba(111, 168, 220, .12); padding: 1px 5px; border-radius: 3px; }
pre {
  background: var(--deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--band);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
  color: #C9DAEE;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
pre .c { color: var(--faint); }
pre .k { color: var(--rose); }
kbd {
  font-size: .85em;
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--panel);
  white-space: nowrap;
}

.note {
  border-left: 3px solid var(--rose);
  background: rgba(245, 169, 184, .06);
  padding: 10px 16px;
  margin: 22px 0;
}
.note p { margin: 4px 0; }

/* Tables: wide ones scroll on their own, never the page. */
.table { overflow-x: auto; margin: 18px 0 26px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: var(--panel); }
td { color: var(--dim); }
td code { white-space: nowrap; }
tr:target td { background: rgba(91, 206, 250, .08); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-variant-numeric: tabular-nums; }

/* System calls: one entry each, number and name on top. */
.calls { display: flex; flex-direction: column; margin: 22px 0; border-top: 1px solid var(--line); }
.call { padding: 12px 4px 12px; border-bottom: 1px solid var(--line); }
.call:target { background: rgba(91, 206, 250, .07); }
.call .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.call .no { font-variant-numeric: tabular-nums; color: var(--faint); background: none; padding: 0; }
.call b { font: 600 15px/1.4 var(--mono); color: var(--text); }
.call .wrap { font: 13.5px/1.4 var(--mono); color: var(--sky); margin-left: auto; }
.call .sig { display: inline-block; margin-top: 6px; background: none; padding: 0; color: #C9DAEE; font-size: 14px; }
.call p { margin: 4px 0 0; font-size: 14.5px; }

/* MIZU_API members. */
.member { margin: 14px 0 18px; }
.member pre { margin: 0; }
.member p { margin: 6px 0 0 4px; font-size: 15px; }

/* The front page. */
.hero {
  position: relative;
  padding: 40px 0 30px;
  margin-bottom: 10px;
  overflow: hidden;
}
.hero h1 { font-size: clamp(46px, 9vw, 78px); margin: 0; position: relative; }
.hero h1 .dot { color: var(--rose); }
.hero p { position: relative; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 26px 0; }
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--sky); transform: translateY(-2px); }
.card b { font: 600 17px/1.3 var(--mono); color: var(--text); }
.card span { color: var(--dim); font-size: 14.5px; line-height: 1.55; }

.next { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 15px; }

/* Beside the text, as tall as the window and staying put: only where the
   grid above puts it beside the text. A browser without grids (NetSurf,
   Mizu's own) skips this and has the menu above the text, its own height. */
@supports (display: grid) {
  .side { position: sticky; top: 0; align-self: start; height: 100vh; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
  .side { position: static; height: auto; padding: 22px 0 6px; gap: 14px; }
  .links { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .links a { border-left: 0; border-bottom: 2px solid transparent; padding: 5px 8px; font-size: 14px; }
  .links a[aria-current="page"] { border-bottom-color: var(--ice); }
  .out { display: none; }
  main { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon { animation: none; }
  .card { transition: none; }
}