:root { color-scheme: dark; --bg: #69615c; --text: #f6f3ee; --line: #a39a93; --link: #c4e2ff; --hover: #6f7b8c; --panel: #4a4440; --pending: #ffb877; --tone0: #675f5a; --tone1: #68605b; --tone2: #69615c; --tone3: #6a625d; --tone4: #6b635e; --tone5: #6c625c; --tone6: #665d58; --faint: rgba(255, 255, 255, 0.3); --shade: rgba(0, 0, 0, 0.1); }
html { background: var(--bg); font-size: 13px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* 13px is what the generic "monospace" font used to give; all sizes are in em. Never let a browser enlarge small text. */
/* The font: Chivo Mono, then Cousine (both from Google Fonts, linked in every page's head), then the browser's own monospace. */
*, *::before, *::after, ::marker, ::placeholder { font-family: "Chivo Mono", "Cousine", monospace !important; }  /* every element */
input, button, select, textarea { font: inherit; }  /* form controls ignore inheritance by default (their font-family comes from the rule above) */
body { --pad: clamp(0.4em, 0.8vw, 0.6em); margin: 0; padding: 0.15em var(--pad) var(--pad); background: var(--bg); color: var(--text); line-height: 1.4; }  /* fills the window; thin margins at the sides and bottom, almost none at the top */
/* The calendar is a grid of 7 equal columns; every square is locked to a 1:1 ratio, so all squares are
   perfect squares of the same size at any window width. Their content is out of the flow (or clipped), so
   it can never stretch one. */
.monthbox { width: min(100%, max(20em, calc((100vh - 14.5em) * 7 / 6 * 0.9333))); margin: 0 auto 3.5em; }  /* centred; capped by the window HEIGHT, so a whole month always fits on screen (the squares stay square) */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* A year on the main page: 12 month squares in 4 columns (3 rows), the same square style as the days, centred and
   capped by the window height so a whole year fits on screen. */
.yearbox { width: min(100%, max(16em, calc((100vh - 12em) * 4 / 3 * 0.6))); margin: 0 auto; }
.yeargrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dow { text-transform: uppercase; padding: 4px 2px; font-size: calc(0.85em * 1.5); line-height: 1; color: var(--faint); }  /* Sun Mon ...: the same style as the day numbers */
.day { position: relative; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; font-size: 0.85em; }
.day.empty::after { content: ""; position: absolute; left: 50%; top: 50%; width: 55%; height: 4px; background: rgba(255, 255, 255, 0.15);
                   transform: translate(-50%, -50%) rotate(-45deg); }  /* a day that does not exist (outside the month): a short slash from bottom left to top right, fainter than the day numbers */
.day.tone0 { background: var(--tone0); } .day.tone1 { background: var(--tone1); } .day.tone2 { background: var(--tone2); }
.day.tone3 { background: var(--tone3); } .day.tone4 { background: var(--tone4); }
.day.tone5 { background: var(--tone5); } .day.tone6 { background: var(--tone6); }  /* each real square gets one of seven close shades (see tone()), before today/hover so those win */
.dow.now, h4.month.now { color: var(--text); }  /* the current year, month and weekday headings: the normal white */
.day.today .daynum, .day.today .dtitle, .day.today .blk { color: var(--text); }  /* the current day (or month): ALL the text in its square (number, title, dots) is the normal white; the square itself is not coloured */
.day.has { cursor: pointer; user-select: none; -webkit-user-select: none; }  /* hovering says "click"; the text can't be selected */
.day.has:hover { background: var(--hover); }
/* The day number is a faint label in the corner, out of the flow (it takes no space) and behind
   the content. A day with content is clickable all over through an invisible link. */
.daynum { position: absolute; top: 2px; left: 2px; z-index: 0; font-size: 1.5em;
          line-height: 1; color: var(--faint); pointer-events: none; }
a.cell-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; cursor: pointer; -webkit-user-drag: none; }
/* Browsers refuse to draw text under about 6px however small the font-size is, so the title is laid out at 0.7em in a box
   4/3 as wide and then shrunk to 0.75 with a transform, which has no such floor: it ends up about 5.8px. */
.dtitle { flex: 0 1 auto; min-height: 0; overflow: hidden; text-align: center; font-style: italic; font-size: 0.7em; color: var(--faint); overflow-wrap: anywhere;
          width: 133%; margin-left: -16.5%; transform: scale(0.75); transform-origin: top center;
          display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }  /* top middle, 3 lines at most, shrinks before it could touch the dots */
@media (max-width: 42em) {  /* phone-sized squares have no room for a title between the number and the dots */
  .dtitle { display: none; }
}
.cell { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; padding: calc(1.5em + 4px) 4px 4px; overflow: hidden; }  /* the top padding clears the day number; a layer that fills the square (the dots sit at its bottom, a very busy day is clipped) */
/* The dots are TEXT in the site's font (Chivo Mono): a block is "." ":." or "::" (see dot_block). Chivo Mono's ":" has its two
   dots 0.39em apart and its characters are 0.6em wide, so a letter-spacing of -0.21em makes the horizontal pitch 0.39em
   too, and a line-height of 0.78em (twice the dot gap) makes the vertical pitch the same: one even lattice, so you cannot
   tell where a block or a line of them ends. */
.dots { margin-top: auto; padding-top: 0.3em; font-size: 1.4em; line-height: 0.78;
        display: flex; flex-wrap: wrap-reverse; justify-content: center; }  /* centred, lines stack upwards */
.blk { white-space: pre; letter-spacing: -0.21em; color: var(--faint); }  /* every dot is the faint grey, whatever it counts */
/* A day page: the day's title is big; everything after it is indented, and a section's content is indented once more.
   A heading sits close to its own content, and sections are far apart. */
h2 { font-size: 2em; }
.daybody { margin-left: 1.5em; }
.daybody section { margin: 0 0 3em; }
.daybody h3 { font-size: 1.6em; color: var(--faint); margin: 0 0 0.2em; }  /* section titles: bigger, in the colour of the calendar titles */
.sec { margin-left: 1.5em; }
.msg { margin: 0.2em 0; }  /* one devlog line */
.media figcaption { margin: 0.3em 0 0.1em; }  /* the media title is a caption under the picture, video or model, with its tags on the same line */
.ctitle { font-size: 1em; }  /* the title: a bit bigger than the tags and the find-in-heap link */
.ctags { font-size: 0.7em; margin-left: 0.5em; }  /* the tags run on from the title and wrap to the next line, a whole tag at a time */
.ctags .t { white-space: nowrap; }  /* a tag is never split in the middle: the whole tag moves to the next line */
.media .find { font-size: 0.7em; margin: 0.1em 0 0; }  /* find-in-heap on a line of its own */
.time, .user { display: inline-block; }  /* a devlog line is "15:04 jean > text": the time is always 5 characters and the name always gets 4, so the > lines up in every line */
.time { min-width: 5ch; }
.user { min-width: 4ch; }  /* the name is grey like the time and not bold (class size) */
a, a:visited { color: var(--link); text-decoration: none; }  /* links: blue, never underlined */
video, img { max-width: 100%; }
.model { position: relative; width: 100%; height: 24em; max-height: 70vh; border: 1px solid var(--line); background: var(--panel); }
.model canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.model .note { position: absolute; left: 4px; bottom: 2px; font-size: 0.8em; }
figure.media { margin: 0.6em 0 1em; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5em; align-items: start; }  /* wide enough: 3 across, as many rows as needed */
.media-grid .media { margin: 0.4em 0 1em; min-width: 0; }
@media (max-width: 60em) { .media-grid { grid-template-columns: minmax(0, 1fr); } }  /* narrower: one column */
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-weight: normal; }  /* headings are already capitals: never bold (nothing on the site is bold) */
h4.month { text-align: left; font-size: 2em; color: var(--faint); margin: 0.6em 0 0.3em; }  /* "OCTOBER": big, left over its calendar, in the same faint colour as the day numbers */
/* The title is a header block with a small drop shadow that sets it off from the page below. */
.top { margin: 0 calc(-1 * var(--pad)) 1em; padding: 0 var(--pad) 0.35em; background: var(--bg); box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.35); }  /* spans the whole window; the shadow falls straight down (negative spread: none at the sides) */
.site-title { margin: 0; line-height: 1.2; color: var(--faint); }  /* the path is grey ... */
.site-title a, .site-title a:visited { color: inherit; }
.site-title a.cur, .site-title a.cur:visited { color: var(--text); }  /* ... except the last word, the page you are on, which is white */
.daytitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.8em; margin: 0.4em 0 1em; }  /* the day title and "(yesterday)" on one line */
.daytitle h2 { margin: 0; }
.ago { color: var(--faint); }  /* "(yesterday)": next to the day title, in the faint colour */
.was { margin: -0.7em 0 1em; color: var(--faint); }  /* the day's earlier titles under it, one per line */
/* The main page: square buttons in a row, capped by the window height. */
.tiles { display: flex; gap: 0.6em; width: min(100%, calc((100vh - 8em) * 4)); margin: 1em auto; }
a.tile { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--panel);
         font-size: clamp(0.8em, 2.6vw, 1.6em); overflow: hidden; }
a.tile:hover { background: var(--hover); }
.tile .dots { position: absolute; left: 6%; right: 6%; bottom: 6%; margin: 0; padding: 0; font-size: 0.85em; }  /* the dots at the bottom of a button, like a calendar square's */
.tile .tname { position: absolute; top: 2px; left: 2px; font-size: 1.275rem; line-height: 1; color: var(--faint); }  /* the word sits in the top left corner, the size of a calendar square's day number, grey ... */
.tile.now .tname, .tile.now .blk { color: var(--text); }  /* ... except TODAY, which is white */
.filter { line-height: 1.8; white-space: pre-wrap; }  /* keeps the two spaces between the tags; the row still wraps */
.frow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8em; margin: 0.3em 0; }  /* a filter row: its label, then its box (or the tags) */
.chip { white-space: nowrap; }  /* a tag and its (x4) never split across two lines */
.tagbox { margin: 0.6em 0 1em; }
.file[hidden] { display: none; }
.heap { margin: 1em 0; max-height: 65vh; overflow-y: auto; }  /* the table scrolls inside itself instead of growing with the files */
.heap-head { position: sticky; top: 0; z-index: 1; background: var(--bg); box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.35); }  /* the column heads stay put while the rows scroll, with the same drop shadow as the header at the top of the page */
.joined { display: inline-flex; align-items: stretch; }  /* the number box and MAX look like one control */
.joined input { border-radius: 0; }
.joined button { border-radius: 0; border-left: 1px solid var(--bg); }
button.pending { background: var(--pending); color: #000; }  /* the search button turns orange (with a *) when something changed that it has not applied */
.countline { display: flex; justify-content: space-between; margin: 0.6em 0; color: var(--faint); }  /* all grey: the selection ("2 files selected 5.0MB") at the left, the files shown ("46/128 files 848.8MB") at the right */
/* The heap is a table made of grid rows: checkbox, date, file, extension, tags, size. */
.heap-head, .file { display: grid; grid-template-columns: 3ch 12ch minmax(0, 1fr) 10ch minmax(0, 1.8fr) 11ch;  /* file and tags share the spare width, tags get the bigger share */
                    gap: 0 1.2ch; align-items: start; padding: 4px 6px; }
.heap-head > span, .file > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* one line per cell: too long ends in ... */
.heap-head { text-transform: uppercase; color: var(--faint); }  /* a table header: capitals, not bold, the faint grey of the dates; the rows have no borders */
.c-size { text-align: right; white-space: nowrap; }
.c-check input { margin: 0; vertical-align: middle; }
button { background: var(--panel); color: var(--text); border: 0; padding: 2px 8px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
button:enabled:hover { background: var(--hover); }
@media (max-width: 42em) {  /* narrow screens: file and size on the first line, date and tags under it */
  .heap-head { grid-template-columns: 3ch; }
  .heap-head > span:not(.c-check) { display: none; }  /* only the select-all box stays */
  .file { grid-template-columns: 3ch minmax(0, 1fr) 5ch 11ch; }
  .file .c-check { grid-column: 1; grid-row: 1 / span 2; }
  .file .c-file { grid-column: 2; grid-row: 1; }
  .file .c-ext { grid-column: 3; grid-row: 1; }
  .file .c-size { grid-column: 4; grid-row: 1; }
  .file .c-date { grid-column: 2; grid-row: 2; }
  .file .c-tags { grid-column: 3 / span 2; grid-row: 2; text-align: right; }
}
.c-date a { color: var(--faint); }  /* dates in the heap: the faint colour, still links */
input { background: var(--panel); color: var(--text); border: 0; padding: 1px 4px; }
/* A build's page: the embedded web version, centred, 16:9, as large as the window height allows. */
.player { width: min(100%, calc((100vh - 12em) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0.5em auto; background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The BUILDS table: date, file, play link, download link (the same look as the heap's rows). */
.btable { margin: 1em 0; }
.bhead, .brow { display: grid; grid-template-columns: 12ch minmax(0, 1fr) 10ch 18ch 14ch; gap: 0 1.2ch; padding: 4px 6px; }
.bhead > span, .brow > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhead { text-transform: uppercase; color: var(--faint); }  /* the column heads: the faint grey, like the heap's */
@media (max-width: 42em) {  /* narrow: date, file and extension on the first line, web and download under them */
  .bhead, .brow { grid-template-columns: 11ch minmax(0, 1fr) 10ch; }
  .brow > span:nth-child(4) { grid-column: 2; grid-row: 2; }
  .brow > span:nth-child(5) { grid-column: 3; grid-row: 2; }
  .bhead > span:nth-child(n+4) { display: none; }
}
.tag, .size { color: var(--faint); }  /* one dimmed colour for tags, sizes, (x4) counts, devlog times, heap dates and the "(yesterday)" line: --faint, the colour of the calendar titles */
.filter a.on .tag { color: var(--text); }  /* ...except a selected filter tag, which is white and stands out */
.foot { margin-top: 3em; font-size: 0.75em; }
.swatch { display: inline-block; white-space: nowrap; margin: 0 1.6em 0.4em 0; color: var(--faint); }  /* the hex digits are the faint grey (the # keeps its own colour) */
.hash { padding: 0 0.2em; }  /* every # is framed in the "lines" grey (#a39a93, one of the theme colours; less glaring than white) so any colour shows: a bright colour gets a border, a dark one a background */
.hash.hi { border: 1px solid var(--line); }
.hash.lo { background: var(--line); border: 1px solid var(--line); }
.kind-image { color: #c4e2ff; }
.kind-video { color: #ff9e9e; }
.kind-model { color: #c9adff; }
.kind-devlog { color: #ffe08a; }
.kind-build { color: #8ff0a4; }
#clear { background: #ff9e9e; color: #000; }
#clear:hover { opacity: 0.85; }