/* h0ffmann. A dark sea at night, and four lights on it, as the owner set them: blue for the sea
   and what is made for it, green for an idea, orange for Ouroboric, red for closed source. The
   lights glow a little, like a tube of neon. The manner is still picasso's (h0ffmann/picasso):
   lower case, one-line drawings, few things on the page, and nothing that moves by itself.
   The one bold thing is the knowledge graph. Type: Bricolage Grotesque for the name and the
   headings, Newsreader for the story, JetBrains Mono only for what is data. */
:root {
  --night: #05090E;
  --deep: #0A121B;
  --surface: #0E1924;
  --ink: #E7F2EF;
  --muted: #8FA3AD;
  --rule: #1C2B38;
  --water: #36B7FF;
  --ideas: #3DFF96;
  --ouro: #FF8A1F;
  --closed: #FF4D62;
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --data: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 20px/1.55 var(--text); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--ideas); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--water); color: #fff; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }

/* The cover */
.cover { padding: 36px 0 0; background: radial-gradient(90rem 34rem at 78% -10%, rgba(54, 183, 255, .13), transparent 62%), radial-gradient(60rem 30rem at 0% 0%, rgba(61, 255, 150, .08), transparent 60%); }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: end; }
.imprint { margin: 0 0 54px; font: 500 14px/1 var(--data); color: var(--muted); }
.cover h1 { margin: 0; font: 800 clamp(64px, 14vw, 176px)/.86 var(--display); letter-spacing: -.03em; color: var(--ideas); text-shadow: 0 0 18px rgba(61, 255, 150, .55), 0 0 60px rgba(61, 255, 150, .25); }
.epithet { margin: 16px 0 0; font: 600 clamp(26px, 4.4vw, 50px)/1.02 var(--display); letter-spacing: -.02em; color: var(--water); text-shadow: 0 0 16px rgba(54, 183, 255, .5); }
.motto { margin: 10px 0 0; font: italic 400 clamp(21px, 2.6vw, 28px)/1.2 var(--text); color: var(--ink); }
.lede { margin: 28px 0 0; max-width: 34em; color: #C9D8D6; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.button { display: inline-block; padding: 12px 18px; border: 2px solid var(--ideas); background: var(--ideas); color: #03130A; font: 700 16px/1 var(--display); text-decoration: none; border-radius: 999px; box-shadow: 0 0 18px rgba(61, 255, 150, .35); }
.button:hover { background: #7BFFB8; border-color: #7BFFB8; color: #03130A; }
.button.quiet { background: transparent; color: var(--water); border-color: var(--water); box-shadow: 0 0 14px rgba(54, 183, 255, .22), inset 0 0 12px rgba(54, 183, 255, .12); }
.button.quiet:hover { background: rgba(54, 183, 255, .12); color: #fff; }
/* A one-line drawing, used as a mask so that it takes a colour of the page (picasso's site). */
.drawing { display: block; background: var(--water); -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; }
.drawing.prometheus { --src: url(drawings/prometheus.svg); aspect-ratio: 6 / 7; width: 100%; filter: drop-shadow(0 0 10px rgba(54, 183, 255, .6)); }
.jump { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 44px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--rule); }
.jump a { font: 500 14px/1.4 var(--data); text-decoration: none; color: var(--muted); }
.jump a:hover { color: var(--ideas); }

/* Sections */
main section { padding: 76px 0 0; }
main section:last-child { padding-bottom: 92px; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.head h2 { margin: 0; font: 800 clamp(34px, 5.4vw, 64px)/.98 var(--display); letter-spacing: -.035em; max-width: 14em; color: #fff; }
.head > a { font: 400 14px/1.4 var(--data); color: var(--muted); }
.prose { max-width: 37em; margin: 20px 0 0; color: #C9D8D6; }
.note { max-width: 44em; margin: 22px 0 0; font-size: 17px; color: var(--muted); }

/* The arc: the names of the trade, then the marks */
.eras { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font: 600 clamp(16px, 2vw, 21px)/1.2 var(--display); }
.eras li { padding: 8px 0; color: var(--muted); }
.eras li:not(:last-child)::after { content: "→"; margin: 0 12px; color: var(--rule); }
.eras li:last-child { color: var(--ideas); text-shadow: 0 0 12px rgba(61, 255, 150, .5); }
.timeline { list-style: none; margin: 34px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 207px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--rule), var(--water) 55%, var(--ideas)); opacity: .7; }
.event { display: grid; grid-template-columns: 150px 116px minmax(0, 1fr); gap: 0; align-items: start; padding: 0 0 30px; position: relative; }
.when { font: 500 14px/1.6 var(--data); color: var(--muted); padding-top: 4px; }
.dot, .logo, .medal, .glyph { justify-self: center; position: relative; z-index: 1; }
.dot { width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: var(--night); border: 3px solid var(--muted); }
/* A logo keeps its own colours, so it sits on a white chip. */
.logo { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 46px; padding: 7px 9px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 4px var(--night); }
.logo img { display: block; max-width: 100%; max-height: 100%; height: auto; width: auto; }
/* A logo that its owner drew for a dark ground keeps that ground, and is larger (DESIGN.md). */
.event.is-wide .logo { width: 108px; height: 60px; padding: 9px 10px; background: var(--deep); border: 1px solid var(--rule); }
.medal { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--night); color: var(--water); border: 3px solid var(--water); font: 800 42px/1 var(--display); box-shadow: 0 0 0 6px var(--night), 0 0 26px rgba(54, 183, 255, .8), inset 0 0 18px rgba(54, 183, 255, .35); text-shadow: 0 0 14px rgba(54, 183, 255, .9); }
.glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 50px; padding: 0 12px; border-radius: 12px; background: var(--night); border: 2px solid var(--ideas); color: var(--ideas); font: 600 26px/1 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; box-shadow: 0 0 0 4px var(--night), 0 0 18px rgba(61, 255, 150, .45); text-shadow: 0 0 10px rgba(61, 255, 150, .7); }
.what h3 { margin: 0; font: 600 24px/1.2 var(--display); letter-spacing: -.015em; color: #fff; }
.what p { margin: 4px 0 0; max-width: 32em; font-size: 18px; color: var(--muted); }
.era { display: inline-block; margin-top: 8px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 999px; font: 500 12px/1.2 var(--data); color: var(--muted); }
.event.is-big { padding: 14px 0 44px; }
.event.is-big .what h3 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--water); text-shadow: 0 0 18px rgba(54, 183, 255, .55); }
.event.is-big .what p { font-size: 20px; color: var(--ink); }
.event.is-big .when { font-size: 16px; color: var(--ink); padding-top: 28px; }
.event.is-quiet .what h3 { font: italic 400 26px/1.2 var(--text); color: var(--ideas); }
.event.era-sea .era, .event.era-athlete .era { border-color: var(--water); color: var(--water); }
.event.era-research .dot { border-color: var(--ideas); box-shadow: 0 0 12px rgba(61, 255, 150, .7); }
.event.era-research .era { border-color: var(--ideas); color: var(--ideas); }
/* What has not happened: dashed, and it says so. */
.event.is-prophecy .glyph { border-style: dashed; border-color: var(--water); color: var(--water); box-shadow: 0 0 0 4px var(--night), 0 0 18px rgba(54, 183, 255, .4); text-shadow: 0 0 10px rgba(54, 183, 255, .7); font-family: var(--display); }
.event.is-prophecy .what h3 { color: var(--water); font-style: italic; }
.event.is-prophecy .era { border-style: dashed; border-color: var(--water); color: var(--water); }
/* The arc, sideways (app.gleam, arc_ffi.mjs): the section is as tall as the timeline is wide, its
   stage stays on the screen, and scrolling down moves the timeline to the left. Only when the
   script has said so; without it the arc is the list above. */
.arc-scroll[data-flow="row"] { height: var(--len, auto); }
.arc-scroll[data-flow="row"] .arc-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.arc-scroll[data-flow="row"] .eras li:last-child { color: var(--muted); text-shadow: none; }
.arc-scroll[data-flow="row"] .eras li { transition: color .3s ease, text-shadow .3s ease; }
.arc-scroll[data-flow="row"] .eras li[data-now] { color: var(--ideas); text-shadow: 0 0 12px rgba(61, 255, 150, .5); }
.arc-scroll[data-flow="row"] .timeline { display: flex; width: max-content; padding: 0 48px 0 0; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.arc-scroll[data-flow="row"] .timeline::before { left: 0; right: 0; top: 68px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--rule), var(--water) 55%, var(--ideas)); }
/* Every mark is as wide as the others: app.gleam finds the reader's mark from that width. */
.arc-scroll[data-flow="row"] .event { grid-template-columns: none; grid-template-rows: 28px 80px auto; box-sizing: border-box; width: min(72vw, 320px); padding: 0 32px 0 0; opacity: .45; transition: opacity .4s ease; }
.arc-scroll[data-flow="row"] .event[data-now] { opacity: 1; }
.arc-scroll[data-flow="row"] .event.is-big { padding: 0 32px 0 0; }
.arc-scroll[data-flow="row"] .event > * { grid-column: 1; grid-row: auto; }
.arc-scroll[data-flow="row"] .event .when { padding-top: 0; }
.arc-scroll[data-flow="row"] .event .dot, .arc-scroll[data-flow="row"] .event .logo, .arc-scroll[data-flow="row"] .event .medal, .arc-scroll[data-flow="row"] .event .glyph { justify-self: start; align-self: center; margin-top: 0; }
.arc-scroll[data-flow="row"] .what p { max-width: none; }

/* The four colours, as buttons */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.filters button { padding: 10px 16px; border: 2px solid currentColor; border-radius: 999px; background: transparent; font: 700 16px/1 var(--display); cursor: pointer; }
.filters .topic-water { color: var(--water); }
.filters .topic-ideas { color: var(--ideas); }
.filters .topic-ouroboric { color: var(--ouro); }
.filters .topic-closed { color: var(--closed); }
.filters button[aria-pressed="true"] { color: #05090E; box-shadow: 0 0 22px currentColor; }
.filters button[aria-pressed="true"].topic-water { background: var(--water); border-color: var(--water); box-shadow: 0 0 22px rgba(54, 183, 255, .7); }
.filters button[aria-pressed="true"].topic-ideas { background: var(--ideas); border-color: var(--ideas); box-shadow: 0 0 22px rgba(61, 255, 150, .7); }
.filters button[aria-pressed="true"].topic-ouroboric { background: var(--ouro); border-color: var(--ouro); box-shadow: 0 0 22px rgba(255, 138, 31, .7); }
.filters button[aria-pressed="true"].topic-closed { background: var(--closed); border-color: var(--closed); box-shadow: 0 0 22px rgba(255, 77, 98, .7); }

/* The knowledge graph */
.graph { margin: 22px 0 0; padding: 12px; background: var(--deep); border: 1px solid var(--rule); border-radius: 28px; box-shadow: inset 0 0 80px rgba(54, 183, 255, .06); }
.graph svg { display: block; width: 100%; height: auto; }
.graph figcaption { margin: 10px 12px 6px; font: 400 13px/1.5 var(--data); color: var(--muted); max-width: 60em; }
.edge path { fill: none; stroke: #4D6475; stroke-width: 1.6; }
.edge text { font: 500 12px var(--data); fill: var(--muted); paint-order: stroke; stroke: var(--deep); stroke-width: 6px; }
#arrow path { fill: #6F8798; stroke: none; }
.node rect { fill: var(--night); stroke: var(--ideas); stroke-width: 2.5; }
.node .name { font: 700 19px var(--display); fill: #fff; }
.node .standing { font: 400 11.5px var(--data); fill: var(--muted); }
.node.topic-water rect { stroke: var(--water); fill: #071A28; filter: drop-shadow(0 0 7px rgba(54, 183, 255, .75)); }
.node.topic-ideas rect { stroke: var(--ideas); fill: #06190F; filter: drop-shadow(0 0 7px rgba(61, 255, 150, .7)); }
.node.topic-ouroboric rect { stroke: var(--ouro); fill: #1F1004; filter: drop-shadow(0 0 7px rgba(255, 138, 31, .7)); }
.node.topic-closed rect { stroke: var(--closed); fill: #1F070B; filter: drop-shadow(0 0 7px rgba(255, 77, 98, .75)); }
.node.kind-friend rect, .node.kind-private rect { stroke-dasharray: 7 6; }
a.node { text-decoration: none; cursor: pointer; }
a.node:hover rect, a.node:focus-visible rect { stroke-width: 4.5; }
a.node:focus-visible { outline: none; }
.is-dim { opacity: .16; }
/* 無 (mu) at the centre of the graph, drawn as the arc's glyph for 名残: green, an idea. */
.mu rect { fill: var(--night); stroke: var(--ideas); stroke-width: 2.5; filter: drop-shadow(0 0 9px rgba(61, 255, 150, .5)); }
.mu text { font: 600 34px 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; fill: var(--ideas); filter: drop-shadow(0 0 6px rgba(61, 255, 150, .7)); }
.mu-tie path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 6; }
.mu-tie text { font: 400 11.5px var(--data); fill: var(--muted); }
.works { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.works li { padding: 16px 0 16px 16px; border-left: 3px solid var(--ideas); margin-bottom: 18px; }
.works li.topic-water { border-color: var(--water); box-shadow: -6px 0 14px -8px var(--water); }
.works li.topic-ideas { border-color: var(--ideas); box-shadow: -6px 0 14px -8px var(--ideas); }
.works li.topic-ouroboric { border-color: var(--ouro); box-shadow: -6px 0 14px -8px var(--ouro); }
.works li.topic-closed { border-color: var(--closed); box-shadow: -6px 0 14px -8px var(--closed); }
.works h3 { margin: 0; font: 700 24px/1.15 var(--display); letter-spacing: -.02em; color: #fff; }
.works p { margin: 4px 0 0; font-size: 18px; color: var(--muted); }
.works .facts { font: 400 13px/1.5 var(--data); overflow-wrap: anywhere; }

/* Everything, indexed */
.index { list-style: none; margin: 30px 0 0; padding: 0; columns: 2; column-gap: 44px; }
.index li { break-inside: avoid; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 10px; padding: 9px 0 9px 12px; border-left: 2px solid var(--ideas); margin-bottom: 8px; }
.index li.topic-water { border-color: var(--water); }
.index li.topic-ouroboric { border-color: var(--ouro); }
.index li.topic-closed { border-color: var(--closed); }
.index .year { font: 400 13px/1.7 var(--data); color: var(--muted); grid-row: 1 / span 2; }
.index a { font: 600 19px/1.25 var(--display); text-decoration: none; color: #fff; overflow-wrap: anywhere; }
.index li.topic-water a:hover { color: var(--water); }
.index li.topic-ideas a:hover { color: var(--ideas); }
.index li.topic-closed a:hover { color: var(--closed); }
.index .owner { color: var(--muted); font-weight: 400; }
.index .says { grid-column: 2; font: 400 15px/1.4 var(--text); color: var(--muted); }

/* The README's history */
.snapshots { list-style: none; margin: 30px 0 0; padding: 0; }
.snapshots li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.snapshots li:last-child { border-bottom: 1px solid var(--rule); }
.snapshots .when { padding-top: 6px; }
.snapshots p { margin: 0; }
.said { font: 400 clamp(20px, 2.4vw, 26px)/1.25 var(--text); color: var(--ink); }
.stack { margin-top: 6px !important; font: 400 14px/1.5 var(--data); color: var(--muted); }
.stack b { font-weight: 500; color: var(--water); }

/* Friends, ways */
.stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin: 28px 0 0; }
.stamps a { display: inline-flex; padding: 8px 12px; background: #fff; border-radius: 12px; text-decoration: none; box-shadow: 0 0 22px rgba(255, 138, 31, .18); }
.stamps img { display: block; height: 44px; width: auto; }
.friends { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.friends li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.friends a { font: 600 21px/1.2 var(--display); text-decoration-color: var(--ouro); }
.friends span { font: 400 13px/1.4 var(--data); color: var(--muted); }
.ways { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ways li { padding: 10px 16px; border: 2px solid var(--water); color: var(--water); border-radius: 999px; font: 600 18px/1 var(--display); box-shadow: inset 0 0 12px rgba(54, 183, 255, .14); }

/* The notice, and the foot */
.notice .head h2 { color: var(--closed); text-shadow: 0 0 18px rgba(255, 77, 98, .5); }
.foot { background: #020508; color: var(--muted); padding: 34px 0 44px; border-top: 1px solid var(--rule); font: 400 16px/1.55 var(--text); }
.foot p { margin: 0 0 10px; max-width: 54em; }

@media (max-width: 900px) {
  .cover-grid { grid-template-columns: 1fr; }
  .drawing.prometheus { max-width: 220px; margin: 8px 0 0; order: -1; }
  .works, .friends { grid-template-columns: 1fr; }
  .index { columns: 1; }
  .snapshots li { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .wrap { padding: 0 16px; }
  .imprint { margin-bottom: 30px; }
  main section { padding-top: 56px; }
  .timeline::before { left: 39px; }
  .event { grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; }
  .event .when { grid-column: 2; grid-row: 1; padding-top: 0; }
  .event .dot, .event .logo, .event .medal, .event .glyph { grid-column: 1; grid-row: 1 / span 2; }
  .event .what { grid-column: 2; grid-row: 2; }
  .logo { width: 78px; height: 40px; padding: 5px 6px; }
  .event.is-wide .logo { width: 78px; height: 46px; padding: 6px 7px; }
  .medal { width: 62px; height: 62px; font-size: 32px; }
  .glyph { min-width: 62px; height: 44px; font-size: 21px; padding: 0 8px; }
  .event.is-big .when { padding-top: 0; }
  .graph { padding: 6px; border-radius: 18px; margin-left: -8px; margin-right: -8px; }
  .node .name { font-size: 24px; }
  .node .standing { font-size: 15px; }
  .edge text { font-size: 15px; }
}

/* The numbers, live */
.counters { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.counters li { padding: 16px 0 0; border-top: 2px solid var(--ideas); }
.counters li.topic-water { border-color: var(--water); }
.counters li.topic-ouroboric { border-color: var(--ouro); }
.counters b { display: block; font: 800 clamp(34px, 4.6vw, 58px)/1 var(--display); letter-spacing: -.03em; color: var(--ideas); text-shadow: 0 0 16px rgba(61, 255, 150, .5); }
.counters li.topic-water b { color: var(--water); text-shadow: 0 0 16px rgba(54, 183, 255, .5); }
.counters li.topic-ouroboric b { color: var(--ouro); text-shadow: 0 0 16px rgba(255, 138, 31, .45); }
.counters span { display: block; margin-top: 8px; font: 400 13px/1.45 var(--data); color: var(--muted); }
.languages { list-style: none; margin: 34px 0 0; padding: 0; max-width: 46em; display: grid; gap: 9px; }
.languages li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 4.6em; gap: 12px; align-items: center; font: 500 14px/1.2 var(--data); }
.languages .name { color: var(--ink); }
.languages .bar { height: 8px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.languages .bar span { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--water), var(--ideas)); box-shadow: 0 0 12px rgba(61, 255, 150, .6); }
.languages .share { color: var(--muted); text-align: right; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; max-width: 46em; }
.checks li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 17px; color: var(--muted); }
.checks li:last-child { border-bottom: 1px solid var(--rule); }
.checks a { display: inline-flex; width: max-content; text-decoration: none; }
.checks img { display: block; height: 20px; }
@media (max-width: 900px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .checks li { grid-template-columns: 1fr; } }

/* The three questions: the areas of research, each in its light, each a link to where it lives. */
.questions { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.questions li { padding: 20px 20px 22px; border: 2px solid currentColor; border-radius: 24px; }
.questions li.topic-water { color: var(--water); box-shadow: 0 0 22px rgba(54, 183, 255, .22), inset 0 0 26px rgba(54, 183, 255, .08); }
.questions li.topic-ideas { color: var(--ideas); box-shadow: 0 0 22px rgba(61, 255, 150, .2), inset 0 0 26px rgba(61, 255, 150, .07); }
.questions li.topic-ouroboric { color: var(--ouro); box-shadow: 0 0 26px rgba(255, 138, 31, .32), inset 0 0 26px rgba(255, 138, 31, .1); }
.questions h3 { margin: 0; font: 800 clamp(24px, 2.8vw, 32px)/1.05 var(--display); letter-spacing: -.025em; text-shadow: 0 0 14px currentColor; }
.questions p { margin: 10px 0 0; font: 400 17px/1.45 var(--text); color: var(--ink); }
.questions a { display: inline-block; margin-top: 14px; font: 500 14px/1.3 var(--data); color: inherit; text-decoration-color: currentColor; overflow-wrap: anywhere; }
.questions a:hover { color: #fff; }
@media (max-width: 900px) { .questions { grid-template-columns: 1fr; } }

/* The stack now: two names with their owners' icons, as on the site of closed source. */
.made-with { margin-top: 22px; font: 400 16px/1.6 var(--text); color: var(--ink); }
.made-with b { font: 500 14px/1.5 var(--data); color: var(--water); }
.made-with a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.made-with img { vertical-align: -3px; background: #fff; border-radius: 5px; padding: 1px; }

/* The owner's sentence under the epithet: orange, because it says what makes him Ouroboric. */
.ouro-line { margin: 14px 0 0; max-width: 34ch; font: 600 clamp(18px, 2.3vw, 26px)/1.25 var(--display); letter-spacing: -.01em; color: var(--ouro); text-shadow: 0 0 14px rgba(255, 138, 31, .45); }

/* The two languages: two small pills on the cover. The pressed one is the page's language. */
.tongues { display: flex; gap: 8px; margin: 0 0 22px; }
.tongue { padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 400 13px/1.3 var(--data); cursor: pointer; }
.tongue:hover { color: var(--ink); border-color: var(--muted); }
.tongue[aria-pressed="true"] { color: var(--night); background: var(--ink); border-color: var(--ink); }
.tongue:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; }

/* The forks: the index's list, with the word PUBLIC in the heading kept in capitals. */
.forks .says a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.forks .mark { display: inline-block; margin: 0 8px 4px 0; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 999px; font: 400 12px/1.6 var(--data); color: var(--muted); }
.forks .says a { font: inherit; font-weight: 500; }