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/Assets/usb.svg

@@ -4,24 +4,87 @@
   no optical drive in the plan -- the stick is the machine's second disk, and on
   a Chromebox it is the only one that matters.
 
-  Drawn to the same rule as the other marks here: two tones, geometry only, and
-  the accent spent in exactly one place. That place is the activity light,
-  because it is the part of a USB stick that tells you something is happening --
-  the same job the accent does everywhere else in this palette.
+  Drawn as an object, the way Niveus draws its controls: a moulded body lit from
+  the upper left, with a soft rim of light along the edges that face it and a
+  contact shadow on the ground; a brushed-steel connector whose two contact
+  windows are cut into it rather than painted on. The accent is still spent in
+  exactly one place, the activity light -- the part of a USB stick that tells
+  you something is happening -- and here it glows.</desc>
 
-  The connector's two contact windows are real holes (fill-rule evenodd) rather
-  than shapes filled with the background colour, so the mark survives being put
-  on a surface that is not the page background.</desc>
+  <defs>
+    <linearGradient id="body" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#5B48B8"/>
+      <stop offset="0.5" stop-color="#3E2F8C"/>
+      <stop offset="1" stop-color="#2A1F66"/>
+    </linearGradient>
+    <linearGradient id="bodygloss" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.30"/>
+      <stop offset="0.28" stop-color="#FFFFFF" stop-opacity="0.06"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="collar" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4A3AA0"/>
+      <stop offset="1" stop-color="#2E2270"/>
+    </linearGradient>
+    <linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#9A9AAE"/>
+      <stop offset="0.25" stop-color="#E9E9F2"/>
+      <stop offset="0.5" stop-color="#B9B9C9"/>
+      <stop offset="0.8" stop-color="#D8D8E4"/>
+      <stop offset="1" stop-color="#85859A"/>
+    </linearGradient>
+    <linearGradient id="hole" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#1A1830"/>
+      <stop offset="1" stop-color="#3A3852"/>
+    </linearGradient>
+    <radialGradient id="led" cx="0.4" cy="0.35" r="0.65">
+      <stop offset="0" stop-color="#FFFFFF"/>
+      <stop offset="0.25" stop-color="#C9B9FF"/>
+      <stop offset="0.7" stop-color="#7C5CFF"/>
+      <stop offset="1" stop-color="#5236D6"/>
+    </radialGradient>
+    <radialGradient id="ledglow" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="#9F86FF" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#7C5CFF" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="5"/>
+    </filter>
+  </defs>
 
-  <g fill="#3C2E85">
-    <path fill-rule="evenodd" d="M70 14 h60 v58 h-60 Z
-                                 M82 30 h13 v26 h-13 Z
-                                 M105 30 h13 v26 h-13 Z"/>
-    <rect x="62" y="72" width="76" height="15" rx="3"/>
-    <rect x="54" y="87" width="92" height="99" rx="12"/>
-  </g>
+  <!-- the shadow it casts -->
+  <ellipse cx="104" cy="186" rx="44" ry="7" fill="#000" opacity="0.4" filter="url(#soft)"/>
 
-  <g fill="#7C5CFF">
-    <circle cx="100" cy="162" r="9"/>
-  </g>
+  <!-- connector: steel shell with two windows cut through it -->
+  <path fill="url(#steel)" fill-rule="evenodd"
+        d="M70 18 a4 4 0 0 1 4 -4 h52 a4 4 0 0 1 4 4 v44 h-60 Z
+           M82 30 h10 v14 h-10 Z M108 30 h10 v14 h-10 Z"/>
+  <path fill="url(#hole)" d="M82 30 h10 v14 h-10 Z M108 30 h10 v14 h-10 Z" opacity="0.9"/>
+  <path fill="none" stroke="#FFFFFF" stroke-opacity="0.7" stroke-width="1"
+        d="M71 62 V18 a3 3 0 0 1 3 -3 h52"/>
+
+  <!-- collar where the shell meets the body -->
+  <rect x="62" y="56" width="76" height="14" rx="3" fill="url(#collar)"/>
+  <path fill="none" stroke="#FFFFFF" stroke-opacity="0.25" stroke-width="1"
+        d="M63 69 V59 a2.5 2.5 0 0 1 2.5 -2.5 H135"/>
+
+  <!-- the body -->
+  <rect x="54" y="64" width="92" height="116" rx="16" fill="url(#body)"/>
+  <rect x="54" y="64" width="92" height="116" rx="16" fill="url(#bodygloss)"/>
+  <path fill="none" stroke="#FFFFFF" stroke-opacity="0.35" stroke-width="1.4"
+        stroke-linecap="round" d="M55 170 V80 a15 15 0 0 1 15 -15 h60"/>
+  <path fill="none" stroke="#000" stroke-opacity="0.35" stroke-width="1.4"
+        stroke-linecap="round" d="M145 80 v84 a15 15 0 0 1 -15 15 h-60"/>
+
+  <!-- a moulded grip: two shallow grooves -->
+  <path fill="none" stroke="#1E1650" stroke-opacity="0.8" stroke-width="2"
+        stroke-linecap="round" d="M84 96 h32 M84 106 h32"/>
+  <path fill="none" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.2"
+        stroke-linecap="round" d="M84 98.2 h32 M84 108.2 h32"/>
+
+  <!-- the activity light, lit -->
+  <circle cx="100" cy="150" r="22" fill="url(#ledglow)"/>
+  <circle cx="100" cy="150" r="9" fill="#1C1448"/>
+  <circle cx="100" cy="150" r="7" fill="url(#led)"/>
+  <ellipse cx="97.5" cy="147" rx="2.6" ry="1.8" fill="#FFFFFF" opacity="0.85"/>
 </svg>