site, branding: skeuomorphic marks, and the new Niveus components

The marks are now drawn the way Niveus draws its keys: one light from the
upper left, gloss on the faces that catch it, a specular line on the edges
that face it, and soft contact shadows.

- Shift: shaded slabs, each casting onto the one below. shift-mask.svg is
  untouched, so the kernel's logo.h coverage mask is unchanged.
- Uberblock: bevelled slots in a groove; the newest slot and the root glow.
- USB stick: moulded body, steel connector, a lit activity LED.
- Pride flag: cloth folds and a hem over the flag's own colours.

The pages use the components the new Niveus added: both terminals are
.nv-window frames, the origin and first-boot sequences are .nv-steps, the
numbers are a .nv-stat-group, and each feature card has an .nv-tile glyph.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4

docs/Website/app.css

@@ -90,20 +90,14 @@
 
 /* --- The console ----------------------------------------------------------- */
 /*
-   A terminal is a recess, not a card that happens to hold monospace: the
-   material says "this is a window into the machine" before the text does.
+   A terminal is a window into the machine, so it is drawn as one: a solid
+   .nv-window whose body is a recess the log is typed into. The traffic lights
+   are decoration here -- nothing on this page can be closed -- so they are
+   spans, hidden from assistive tech, rather than buttons that do nothing.
 */
 
 .console {
-  overflow: hidden;
-}
-
-.console__bar {
-  display: flex;
-  align-items: center;
-  gap: var(--nv-space-3);
-  padding: var(--nv-space-2) var(--nv-space-3);
-  border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
+  min-inline-size: 0;
 }
 
 .console__log {
@@ -118,7 +112,7 @@
 }
 
 /* The cursor the boot log types behind. */
-.console__log::after {
+#bootlog::after {
   content: "";
   display: inline-block;
   inline-size: 0.6em;
@@ -128,50 +122,38 @@
   animation: console-blink 1.1s steps(2, start) infinite;
 }
 
+/* Only the boot log types; a finished transcript is as tall as it is. */
+.console__log:not(#bootlog) { min-block-size: 0; }
+
 @keyframes console-blink { 50% { opacity: 0; } }
 
 @media (prefers-reduced-motion: reduce) {
-  .console__log::after { animation: none; }
+  #bootlog::after { animation: none; }
 }
 
-/* --- Origin, as a timeline -------------------------------------------------- */
+/* --- Origin, as steps ------------------------------------------------------- */
 /*
    The rail is not decoration: these steps happened in this order, and the
-   order is the claim the section makes. A grid would lose it.
+   order is the claim the section makes. A grid would lose it. .nv-steps cuts
+   the rail into the surface and lights what is done; all this adds is the
+   measure, because a step is a paragraph and not a label.
 */
 
-.timeline {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--nv-space-8);
-  border-inline-start: var(--nv-border-width) solid var(--nv-color-border);
-  padding-inline-start: var(--nv-space-6);
-}
-
-.timeline__step {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nv-space-2);
+.origin .nv-steps__body {
   max-inline-size: var(--nv-measure);
-  position: relative;
+  padding-block-end: var(--nv-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nv-space-1);
 }
 
-.timeline__step::before {
-  content: "";
-  position: absolute;
-  inline-size: var(--nv-space-2);
-  block-size: var(--nv-space-2);
-  border-radius: var(--nv-radius-full);
-  background: var(--nv-color-accent);
-  inset-inline-start: calc(var(--nv-space-6) * -1 - var(--nv-space-1));
-  inset-block-start: var(--nv-space-1);
+.origin .nv-steps__title {
+  font-size: var(--nv-font-size-lg);
 }
 
-.timeline__when {
-  color: var(--nv-color-text-tertiary);
+.origin .nv-steps__text {
+  font-size: var(--nv-font-size-md);
+  color: var(--nv-color-text-secondary);
 }
 
 /* --- The stack -------------------------------------------------------------- */
@@ -226,29 +208,6 @@
   .needs { grid-template-columns: repeat(2, 1fr); }
 }
 
-/* --- Numbers ---------------------------------------------------------------- */
-
-.figures {
-  display: grid;
-  gap: var(--nv-space-4);
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-}
-
-/* A card carries no padding of its own -- its parts do -- and a stat tile has
-   no parts. */
-.figure {
-  display: flex;
-  flex-direction: column;
-  gap: var(--nv-space-1);
-  align-items: flex-start;
-  padding: var(--nv-space-5);
-}
-
-.figure__value {
-  font-variant-numeric: tabular-nums;
-  letter-spacing: var(--nv-letter-spacing-tight);
-}
-
 /* --- PSOGM ------------------------------------------------------------------ */
 
 .crash {
@@ -309,18 +268,15 @@
 
 /* --- Cards ------------------------------------------------------------------- */
 
-/* Niveus's reset makes images block-level, which is right nearly everywhere
-   and wrong for a mark that belongs beside a title. A flex row rather than
+/* A feature's tile belongs beside its title, not above it. A flex row rather than
    `display: inline`, so the two stay aligned whatever the title does. */
-.nv-card__title:has(.cardmark) {
+.nv-card__title:has(.nv-tile) {
   display: flex;
   align-items: center;
-  gap: var(--nv-space-2);
+  gap: var(--nv-space-3);
 }
 
-.cardmark {
-  inline-size: 1.2em;
-  block-size: 1.2em;
+.nv-card__title .nv-tile {
   flex: none;
 }