aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/prototypes/waybar-redesign-prototype.html853
1 files changed, 853 insertions, 0 deletions
diff --git a/docs/prototypes/waybar-redesign-prototype.html b/docs/prototypes/waybar-redesign-prototype.html
new file mode 100644
index 0000000..2307b69
--- /dev/null
+++ b/docs/prototypes/waybar-redesign-prototype.html
@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Waybar redesign — six directions</title>
+<style>
+/* ============ kit tokens (from tokens.json) ============ */
+:root{
+ --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
+ --silver:#bfc4d0; --cream:#f3e7c5; --steel:#969385; --dim:#7c838a;
+ --slate:#424f5e; --slate-hi:#54677d; --wash:#2c2f32;
+ --pass:#74932f; --fail:#cb6b4d; --phos:#7fe0a0; --phos-dim:#1c3626;
+ --vfd:#63e6c8; --sevgrn:#57d357; --sevred:#e2543f; --sevoff:#1a1613;
+ --jewel-r:#ff5b45; --jewel-a:#ffb43a; --jewel-g:#6fce33;
+ --gold:#e2a038; --gold-hi:#ffbe54; --amber-warn:#f0b552; --amber-edge:#7d5c16;
+ --mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
+ --chrome:linear-gradient(180deg,#f2f4f6 0%,#a9b1b8 26%,#62686d 48%,#cfd4da 72%,#7e858b 100%);
+ --chrome-soft:linear-gradient(180deg,#d9dde1 0%,#8f969c 40%,#565b60 55%,#aab0b6 100%);
+ --brush:repeating-linear-gradient(90deg,#c7cbd0 0 2px,#b2b7bd 2px 3px,#bfc4ca 3px 5px);
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--ground);color:var(--silver);font-family:var(--mono);padding:34px 4vw 120px}
+h1{color:var(--cream);font-size:21px;letter-spacing:.04em;margin-bottom:6px}
+.sub{color:var(--steel);font-size:12.5px;max-width:900px;line-height:1.55;margin-bottom:8px}
+.swatches{display:flex;gap:6px;margin:14px 0 34px}
+.swatches i{width:22px;height:14px;border-radius:3px;border:1px solid #000}
+section.var{margin:0 0 58px}
+h2{font-size:14px;color:var(--gold-hi);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
+h2 .n{color:var(--steel);margin-right:8px}
+.cap{color:var(--steel);font-size:12px;line-height:1.55;max-width:980px;margin:6px 0 12px}
+.cap b{color:var(--silver);font-weight:600}
+/* true-proportion full-bar miniature */
+.minibar{width:100%;aspect-ratio:3440/54;min-height:26px;border-radius:999px;display:flex;align-items:center;
+ padding:0 1.1%;gap:.55%;font-size:9.5px;overflow:hidden;margin-bottom:14px}
+.minibar .sp{flex:1}
+.minibar span{white-space:nowrap;line-height:1}
+/* the large right-cluster stage */
+.stage{border-radius:14px;padding:26px 28px 22px;display:inline-flex;align-items:center;gap:18px;max-width:100%;overflow-x:auto}
+.lbl{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;text-align:center;margin-bottom:6px;white-space:nowrap}
+.mod{display:flex;flex-direction:column;align-items:center}
+.jewel{width:9px;height:9px;border-radius:50%;display:inline-block;border:1.5px solid #05050588;
+ box-shadow:inset 0 -2px 3px #0009, inset 0 1px 2px #fff5, 0 0 6px 0 currentColor}
+/* drum counters */
+.dgroup{display:flex;align-items:center;border-radius:11px;padding:5px 7px}
+.drum{min-width:26px;padding:7px 5px;text-align:center;font-size:19px;font-weight:700;color:#e9e9e9;
+ background:linear-gradient(180deg,#000 0%,#181818 12%,#3d3d3d 46%,#2b2b2b 60%,#0c0c0c 88%,#000 100%);
+ border-left:1px solid #000;border-right:1px solid #333;
+ text-shadow:0 1px 1px #000;line-height:1}
+.drum:first-child{border-radius:6px 0 0 6px}.drum:last-child{border-radius:0 6px 6px 0}
+.knurl{width:7px;align-self:stretch;border-radius:3px;margin:2px 1px;
+ background:repeating-linear-gradient(0deg,#101010 0 2px,#3c3c3c 2px 4px)}
+.sep-dot{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),#7d5c16 70%);margin:0 4px}
+/* knobs */
+.knob{width:30px;height:30px;border-radius:50%;
+ background:radial-gradient(circle at 34% 28%,#e8ecef,#9aa1a7 45%,#4d5257 78%,#31353a);
+ border:2px solid #1c1e20;position:relative;box-shadow:0 2px 5px #000a, inset 0 1px 1px #fff8}
+.knob::after{content:"";position:absolute;left:50%;top:3px;width:2px;height:8px;background:#17191b;transform:translateX(-50%);border-radius:1px}
+.knob.brass{background:radial-gradient(circle at 34% 28%,#ffdf9a,var(--gold) 45%,#8f671f 80%,#5c4212)}
+/* vfd window */
+.vfdwin{background:#031311;border-radius:6px;padding:7px 12px;color:var(--vfd);
+ box-shadow:inset 0 2px 8px #000, inset 0 0 24px #063a31, 0 0 1px #000;
+ text-shadow:0 0 7px #2ee6c266;font-size:18px;letter-spacing:.08em}
+svg{display:block}
+.note{margin-top:44px;border-top:1px solid #2a2724;padding-top:16px;color:var(--steel);font-size:12px;line-height:1.6;max-width:980px}
+.note b{color:var(--cream)}
+</style>
+</head>
+<body>
+
+<!-- ===== custom weather glyph set (stroke/fill = currentColor, recolour per module) =====
+ Live snapshot 2026-07-18: New Orleans, clear, 82°F (feels 92°F), humidity 88%, wind 6 WNW.
+ A real module maps the provider's condition code to one of these symbols; the sun is
+ the current reading. Drawn custom (not Nerd Font / emoji) so they sit in the kit. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
+ <symbol id="wx-sun" viewBox="0 0 24 24">
+ <circle cx="12" cy="12" r="4.3" fill="currentColor"/>
+ <g stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+ <line x1="12" y1="1.5" x2="12" y2="4.6"/><line x1="12" y1="19.4" x2="12" y2="22.5"/>
+ <line x1="1.5" y1="12" x2="4.6" y2="12"/><line x1="19.4" y1="12" x2="22.5" y2="12"/>
+ <line x1="4.6" y1="4.6" x2="6.8" y2="6.8"/><line x1="17.2" y1="17.2" x2="19.4" y2="19.4"/>
+ <line x1="4.6" y1="19.4" x2="6.8" y2="17.2"/><line x1="17.2" y1="6.8" x2="19.4" y2="4.6"/>
+ </g>
+ </symbol>
+ <symbol id="wx-partly" viewBox="0 0 24 24">
+ <circle cx="8.5" cy="8" r="3.2" fill="currentColor"/>
+ <g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+ <line x1="8.5" y1="1.5" x2="8.5" y2="3.4"/><line x1="1.7" y1="8" x2="3.6" y2="8"/>
+ <line x1="3.7" y1="3.2" x2="5" y2="4.5"/><line x1="13.3" y1="3.2" x2="12" y2="4.5"/>
+ </g>
+ <g fill="currentColor"><circle cx="12" cy="15" r="3.6"/><circle cx="16.5" cy="13" r="4.4"/><circle cx="20" cy="15.6" r="3.1"/><rect x="11" y="15" width="10" height="4" rx="2"/></g>
+ </symbol>
+ <symbol id="wx-cloud" viewBox="0 0 24 24">
+ <g fill="currentColor"><circle cx="7.5" cy="13" r="4"/><circle cx="12.5" cy="10.5" r="5.2"/><circle cx="17" cy="13.5" r="3.6"/><rect x="6.5" y="13" width="11.5" height="4.2" rx="2.1"/></g>
+ </symbol>
+ <symbol id="wx-rain" viewBox="0 0 24 24">
+ <g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g>
+ <g stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="8" y1="15.5" x2="6.6" y2="19.5"/><line x1="12" y1="15.5" x2="10.6" y2="19.5"/><line x1="16" y1="15.5" x2="14.6" y2="19.5"/></g>
+ </symbol>
+ <symbol id="wx-storm" viewBox="0 0 24 24">
+ <g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g>
+ <path d="M12.5 14 L9 19.5 h3 L10.5 23.5 L15.5 17.5 h-3 L14 14 Z" fill="currentColor"/>
+ </symbol>
+ <symbol id="wx-snow" viewBox="0 0 24 24">
+ <g fill="currentColor"><circle cx="7.5" cy="9" r="3.6"/><circle cx="12.5" cy="7" r="4.6"/><circle cx="16.5" cy="9.6" r="3.1"/><rect x="6.5" y="9" width="10.5" height="3.8" rx="1.9"/></g>
+ <g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+ <g transform="translate(9,17.5)"><line x1="-2" y1="0" x2="2" y2="0"/><line x1="0" y1="-2" x2="0" y2="2"/><line x1="-1.4" y1="-1.4" x2="1.4" y2="1.4"/><line x1="-1.4" y1="1.4" x2="1.4" y2="-1.4"/></g>
+ <g transform="translate(15,18.5)"><line x1="-2" y1="0" x2="2" y2="0"/><line x1="0" y1="-2" x2="0" y2="2"/><line x1="-1.4" y1="-1.4" x2="1.4" y2="1.4"/><line x1="-1.4" y1="1.4" x2="1.4" y2="-1.4"/></g>
+ </g>
+ </symbol>
+ <symbol id="wx-fog" viewBox="0 0 24 24">
+ <g stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
+ <line x1="3" y1="7" x2="21" y2="7"/><line x1="5" y1="11.5" x2="19" y2="11.5"/><line x1="3" y1="16" x2="18" y2="16"/><line x1="7" y1="20.5" x2="21" y2="20.5"/>
+ </g>
+ </symbol>
+ <!-- wind vane: arrow points UP = north at 0deg; rotate by the source bearing (WNW = 293deg) -->
+ <symbol id="wx-vane" viewBox="0 0 24 24">
+ <path d="M12 2.4 L15.6 9 L12.9 9 L12.9 21 L11.1 21 L11.1 9 L8.4 9 Z" fill="currentColor" stroke="currentColor" stroke-width=".8" stroke-linejoin="round"/>
+ </symbol>
+ <!-- wind (windy condition): flowing gust lines, each ending in a curl -->
+ <symbol id="wx-wind" viewBox="0 0 24 24">
+ <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
+ <path d="M2.5 8 H13.5 a2.6 2.6 0 1 0 -2.55 -3.1"/>
+ <path d="M2.5 12.5 H18 a2.9 2.9 0 1 1 -2.85 3.45"/>
+ <path d="M2.5 17 H10.5 a2.3 2.3 0 1 1 -2.25 2.75"/>
+ </g>
+ </symbol>
+</defs></svg>
+
+<h1>Waybar redesign — six directions</h1>
+<p class="sub">Chronograph date/time as the anchor, whole-bar aesthetic around it. Each direction shows the full bar at true
+proportion (3440×54), then the right cluster enlarged. Left-side functionality is unchanged everywhere — only the skin varies.
+Right cluster everywhere: AUX (the future desktop-settings module) · network · audio · bluetooth · maint · timer · tray · <b>weather</b> · date · time.
+The <b>weather module is new</b>: current conditions for the location, drawn with a custom glyph set (below) rather than Nerd Font icons.
+The reading is a live snapshot — New Orleans, clear, 82°/feels 92°. All colours are kit tokens from the widget gallery.</p>
+<div class="swatches">
+ <i style="background:#100f0f" title="panel"></i><i style="background:#e2a038" title="gold"></i>
+ <i style="background:#f3e7c5" title="cream"></i><i style="background:#bfc4d0" title="silver"></i>
+ <i style="background:#63e6c8" title="vfd"></i><i style="background:#7fe0a0" title="phos"></i>
+ <i style="background:#ffb43a" title="jewel-a"></i><i style="background:#6fce33" title="jewel-g"></i>
+ <i style="background:#ff5b45" title="jewel-r"></i><i style="background:#e2543f" title="sevred"></i>
+</div>
+<div style="display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,#1a1917,#100f0f);border:1px solid #262320;border-radius:11px;padding:14px 20px;margin:0 0 34px">
+ <div style="color:var(--steel);font-size:11px;letter-spacing:.24em;text-transform:uppercase;line-height:1.5">Custom weather<br>glyph set</div>
+ <div style="display:flex;gap:20px;color:var(--cream)">
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">CLEAR</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--cream)"><use href="#wx-partly"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">PARTLY</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--silver)"><use href="#wx-cloud"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">CLOUD</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--slate-hi)"><use href="#wx-rain"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">RAIN</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--jewel-a)"><use href="#wx-storm"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">STORM</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--vfd)"><use href="#wx-snow"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">SNOW</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--dim)"><use href="#wx-fog"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">FOG</div></div>
+ <div style="text-align:center"><svg width="28" height="28" style="color:var(--silver)"><use href="#wx-wind"/></svg><div style="color:var(--steel);font-size:9px;letter-spacing:.1em;margin-top:4px">WINDY</div></div>
+ </div>
+</div>
+
+<!-- ================= W WEATHER WIDGET DIRECTIONS ================= -->
+<section class="var">
+<h2><span class="n">W</span>Weather widget — directions</h2>
+<p class="cap">Standalone takes on the weather widget, every one showing the same live reading (<b>New Orleans · clear · 82° / feels 92° · wind 6</b>). Same custom glyph set, six different instrument idioms. The bar modules below use the compact chip; the others are candidates for a fuller panel or a click-to-expand.
+<br><b>Wind collapses into one slot, constant width:</b> below ~15 mph it shows the vane + speed (direction is the interesting part when it's calm); at ~15 mph and up it flips to the gust glyph + speed (when it's windy, "windy" is the headline, not the compass point). The two minimal chips show the calm and windy states at identical footprint.</p>
+<div style="display:flex;flex-wrap:wrap;gap:30px 34px;align-items:flex-start;background:linear-gradient(180deg,#151413,#0e0d0d);border:1px solid #262320;border-radius:14px;padding:30px 30px 26px">
+
+ <!-- 1. compact chip -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="display:flex;align-items:center;gap:9px;background:#080808;border-radius:9px;padding:8px 13px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f">
+ <svg width="30" height="30" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#e9e9e9;font-size:19px">82°</span><span style="color:var(--gold);font-size:8px;letter-spacing:.12em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#33290f;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="20" height="20" style="color:var(--gold-hi);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05"><span style="color:#e9e9e9;font-size:12px">WNW</span><span style="color:var(--gold);font-size:8px">6 mph</span></div>
+ </div>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Compact chip</figcaption>
+ </figure>
+
+ <!-- 1b. minimal chip — symbol · degrees · direction-arrow · mph -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="display:flex;align-items:center;gap:7px;background:#080808;border-radius:8px;padding:6px 11px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f">
+ <svg width="24" height="24" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg>
+ <span style="color:#e9e9e9;font-size:17px">82°</span>
+ <svg width="17" height="17" style="color:var(--gold-hi);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <span style="color:var(--gold);font-size:13px">6</span>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Chip — calm · 6 mph</figcaption>
+ </figure>
+
+ <!-- 1c. minimal chip, windy state — gust glyph replaces the vane above the threshold -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="display:flex;align-items:center;gap:7px;background:#080808;border-radius:8px;padding:6px 11px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f">
+ <svg width="24" height="24" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg>
+ <span style="color:#e9e9e9;font-size:17px">82°</span>
+ <svg width="20" height="20" style="color:var(--gold-hi)"><use href="#wx-wind"/></svg>
+ <span style="color:var(--gold);font-size:13px">22</span>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Chip — windy · 22 mph</figcaption>
+ </figure>
+
+ <!-- 2. round instrument gauge -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <svg width="130" height="130" viewBox="0 0 130 130">
+ <circle cx="65" cy="65" r="62" fill="#100f0e" stroke="var(--amber-edge)" stroke-width="1.4"/>
+ <circle cx="65" cy="65" r="57" fill="#0c0b0a" stroke="#241c14" stroke-width="1"/>
+ <g stroke="var(--gold)" stroke-width="1.6">
+ <line x1="65" y1="13" x2="65" y2="7"/><line x1="106" y1="24" x2="101.8" y2="28.2"/>
+ <line x1="123" y1="65" x2="117" y2="65"/><line x1="106" y1="106" x2="101.8" y2="101.8"/>
+ <line x1="65" y1="123" x2="65" y2="117"/><line x1="24" y1="106" x2="28.2" y2="101.8"/>
+ <line x1="7" y1="65" x2="13" y2="65"/><line x1="24" y1="24" x2="28.2" y2="28.2"/>
+ </g>
+ <use href="#wx-sun" x="53" y="21" width="24" height="24" style="color:var(--amber-warn)"/>
+ <line x1="65" y1="65" x2="85" y2="31" stroke="var(--sevred)" stroke-width="2" stroke-linecap="round"/>
+ <line x1="65" y1="65" x2="59" y2="75" stroke="var(--sevred)" stroke-width="2" stroke-linecap="round"/>
+ <circle cx="65" cy="65" r="3.2" fill="#1c1c1c" stroke="#000"/>
+ <text x="65" y="90" text-anchor="middle" fill="var(--cream)" font-family="monospace" font-size="17">82°</text>
+ <g transform="rotate(293 55 106)"><use href="#wx-vane" x="49" y="100" width="12" height="12" style="color:var(--gold-hi)"/></g>
+ <text x="72" y="110" text-anchor="middle" fill="var(--steel)" font-family="monospace" font-size="9">WNW 6</text>
+ </svg>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Round gauge</figcaption>
+ </figure>
+
+ <!-- 3. split-flap board -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="display:flex;flex-direction:column;align-items:center;gap:5px;background:#070707;border-radius:9px;padding:11px 13px;box-shadow:inset 0 0 16px #000, 0 0 0 1px #222">
+ <div style="display:flex;gap:4px;align-items:center">
+ <svg width="26" height="26" style="color:var(--cream)"><use href="#wx-sun"/></svg>
+ <span style="position:relative;display:inline-grid;place-items:center;width:22px;height:30px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:19px;border-radius:3px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000;box-shadow:0 -1px 0 #ffffff10"></span>8</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:22px;height:30px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:19px;border-radius:3px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000;box-shadow:0 -1px 0 #ffffff10"></span>2</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:16px;height:30px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:15px;border-radius:3px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>°</span>
+ </div>
+ <div style="display:flex;gap:2px">
+ <span style="position:relative;display:inline-grid;place-items:center;width:15px;height:21px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>C</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:15px;height:21px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>L</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:15px;height:21px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>E</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:15px;height:21px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>A</span>
+ <span style="position:relative;display:inline-grid;place-items:center;width:15px;height:21px;background:linear-gradient(180deg,#242424,#0b0b0b);color:var(--cream);font-size:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #000"><span style="position:absolute;left:1px;right:1px;top:50%;height:1px;background:#000"></span>R</span>
+ </div>
+ <div style="display:flex;gap:5px;align-items:center;color:var(--steel);font-size:9px;letter-spacing:.08em;margin-top:1px">
+ <svg width="13" height="13" style="color:var(--cream);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>WNW · 6 MPH
+ </div>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Split-flap</figcaption>
+ </figure>
+
+ <!-- 4. VFD screen -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="position:relative;overflow:hidden;min-width:158px;background:linear-gradient(180deg,#041210,#020a09);border:1px solid #0e3028;border-radius:8px;padding:12px 16px;box-shadow:inset 0 0 22px #063a31, inset 0 2px 8px #000">
+ <div style="display:flex;align-items:center;gap:11px;color:var(--vfd);text-shadow:0 0 8px #2ee6c2aa">
+ <svg width="30" height="30" style="color:var(--vfd)"><use href="#wx-sun"/></svg>
+ <div style="line-height:1.15"><div style="font-size:21px;letter-spacing:.05em">82°F</div><div style="font-size:10px;letter-spacing:.16em;opacity:.85">CLEAR</div></div>
+ </div>
+ <div style="margin-top:8px;display:flex;align-items:center;gap:6px;color:var(--vfd);text-shadow:0 0 8px #2ee6c2aa;font-size:11px;letter-spacing:.1em">
+ <svg width="14" height="14" style="color:var(--vfd);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>WIND WNW 6 MPH
+ </div>
+ <div style="position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,#00000030 2px 3px);pointer-events:none"></div>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">VFD screen</figcaption>
+ </figure>
+
+ <!-- 5. nixie tubes -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:11px">
+ <div style="display:flex;align-items:center;gap:11px;background:radial-gradient(120% 100% at 50% 0%,#171310,#0a0806);border-radius:9px;padding:10px 14px;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #241a10">
+ <svg width="30" height="30" style="color:#ff8a3a"><use href="#wx-sun"/></svg>
+ <div style="display:flex;gap:4px">
+ <span style="display:inline-grid;place-items:center;width:25px;height:37px;border-radius:5px;background:radial-gradient(circle at 50% 38%,#2c1708,#0a0604);border:1px solid #1c0f06;color:#ff8a3a;font-size:23px;text-shadow:0 0 11px #ff6a1ecc, 0 0 4px #ffb070">8</span>
+ <span style="display:inline-grid;place-items:center;width:25px;height:37px;border-radius:5px;background:radial-gradient(circle at 50% 38%,#2c1708,#0a0604);border:1px solid #1c0f06;color:#ff8a3a;font-size:23px;text-shadow:0 0 11px #ff6a1ecc, 0 0 4px #ffb070">2</span>
+ <span style="display:inline-grid;place-items:center;width:18px;height:37px;border-radius:5px;background:radial-gradient(circle at 50% 38%,#2c1708,#0a0604);border:1px solid #1c0f06;color:#ff8a3a;font-size:16px;text-shadow:0 0 10px #ff6a1ecc">°</span>
+ </div>
+ <div style="display:flex;flex-direction:column;align-items:center;gap:2px;color:#ff8a3a;text-shadow:0 0 8px #ff6a1e99">
+ <svg width="18" height="18" style="color:#ff8a3a;transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <span style="font-size:8px;letter-spacing:.06em">WNW 6</span>
+ </div>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Nixie</figcaption>
+ </figure>
+
+ <!-- 6. barometer-style condition dial -->
+ <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:9px">
+ <svg width="140" height="140" viewBox="0 0 140 140">
+ <circle cx="70" cy="70" r="66" fill="#100f0e" stroke="var(--gold)" stroke-width="1.4"/>
+ <circle cx="70" cy="70" r="61" fill="#0b0a09" stroke="#241c14" stroke-width="1"/>
+ <circle cx="70" cy="70" r="52" fill="none" stroke="#241c14" stroke-width=".8" stroke-dasharray="1.5 3.4"/>
+ <use href="#wx-sun" x="60" y="8" width="20" height="20" style="color:var(--gold-hi)"/>
+ <use href="#wx-partly" x="100.7" y="27.6" width="20" height="20" style="color:#5a5650"/>
+ <use href="#wx-cloud" x="110.7" y="71.6" width="20" height="20" style="color:#5a5650"/>
+ <use href="#wx-rain" x="82.6" y="106.8" width="20" height="20" style="color:#5a5650"/>
+ <use href="#wx-storm" x="37.4" y="106.8" width="20" height="20" style="color:#5a5650"/>
+ <use href="#wx-snow" x="9.3" y="71.6" width="20" height="20" style="color:#5a5650"/>
+ <use href="#wx-fog" x="19.3" y="27.6" width="20" height="20" style="color:#5a5650"/>
+ <line x1="70" y1="70" x2="70" y2="26" stroke="var(--gold-hi)" stroke-width="2.4" stroke-linecap="round"/>
+ <line x1="70" y1="70" x2="70" y2="80" stroke="var(--gold-hi)" stroke-width="2.4" stroke-linecap="round"/>
+ <circle cx="70" cy="70" r="3.4" fill="var(--gold)" stroke="#000"/>
+ </svg>
+ <div style="display:flex;align-items:center;gap:8px;color:var(--cream);font-family:var(--mono);font-size:13px">
+ 82°F<span style="color:#3a3630">·</span>
+ <svg width="14" height="14" style="color:var(--gold-hi);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <span style="color:var(--steel)">WNW 6</span>
+ </div>
+ <figcaption style="color:var(--steel);font-size:10px;letter-spacing:.16em;text-transform:uppercase">Condition dial</figcaption>
+ </figure>
+
+</div>
+</section>
+
+<!-- ================= V1 GOLD PINSTRIPE ODOMETER ================= -->
+<section class="var">
+<h2><span class="n">1</span>Gold-pinstripe odometer console</h2>
+<div class="minibar" style="background:#0c0b0b;border:1px solid var(--amber-edge);box-shadow:0 0 0 2px #000,inset 0 0 0 1.5px #00000000, inset 0 0 18px #000;outline:1px solid #3a2c10;outline-offset:-4px">
+ <span style="color:var(--steel)">▶ ✦</span><span style="color:var(--gold-hi)">1 2 3 4 5</span>
+ <span style="color:var(--steel)">▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:var(--steel)">AUX ᯤ ♪ ᛒ ⛭ ⏱ ⋮⋮</span>
+ <span style="color:#e9e9e9;background:#000;border-radius:3px;padding:1px 4px">SAT JUL 18</span>
+ <span style="color:#e9e9e9;background:#000;border-radius:3px;padding:1px 4px">07:55 PM CDT</span>
+</div>
+<div class="stage" style="background:linear-gradient(180deg,#141212,#0d0c0c);border:1px solid var(--amber-edge);box-shadow:inset 0 0 0 3px #060505, inset 0 0 0 4px #4a3814, inset 0 1px 14px #000, 0 4px 18px #000">
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Aux</div><div class="knob brass"></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Net</div>
+ <div style="display:flex;gap:3px;align-items:flex-end;height:26px;padding-top:4px">
+ <i style="width:5px;height:8px;background:var(--gold)"></i><i style="width:5px;height:13px;background:var(--gold)"></i>
+ <i style="width:5px;height:18px;background:var(--gold-hi)"></i><i style="width:5px;height:23px;background:#3a332a"></i>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Volume</div>
+ <svg width="52" height="30" viewBox="0 0 52 30">
+ <path d="M4 28 A25 25 0 0 1 48 28" fill="none" stroke="#3a332a" stroke-width="3"/>
+ <path d="M4 28 A25 25 0 0 1 34 7.5" fill="none" stroke="var(--gold)" stroke-width="3"/>
+ <line x1="26" y1="28" x2="37" y2="8" stroke="var(--sevred)" stroke-width="2"/>
+ <circle cx="26" cy="28" r="3" fill="#2b2b2b" stroke="#000"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Bluetooth</div>
+ <div style="display:flex;gap:7px;align-items:center;padding-top:5px">
+ <span style="color:var(--silver);font-size:17px">ᛒ</span><span class="jewel" style="color:var(--jewel-g);background:var(--jewel-g)"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Maint</div>
+ <div style="display:flex;gap:7px;align-items:center;padding-top:5px">
+ <span style="color:var(--silver);font-size:16px">⛭</span><span class="jewel" style="color:var(--jewel-a);background:var(--jewel-a)"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Timer</div>
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f">
+ <div class="drum" style="font-size:15px;min-width:20px;padding:5px 4px">12</div>
+ <div class="drum" style="font-size:15px;min-width:20px;padding:5px 4px">34</div>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:6px;height:6px;border-radius:50%;background:#3f3a32"></i><i style="width:6px;height:6px;border-radius:50%;background:#3f3a32"></i><i style="width:6px;height:6px;border-radius:50%;background:#3f3a32"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Weather</div>
+ <div style="display:flex;align-items:center;gap:9px;background:#080808;border-radius:9px;padding:6px 11px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #33290f">
+ <svg width="28" height="28" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#e9e9e9;font-size:17px">82°</span>
+ <span style="color:var(--gold);font-size:8px;letter-spacing:.12em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#33290f;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:var(--gold-hi);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#e9e9e9;font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="color:var(--gold);font-size:8px">6 mph</span>
+ </div>
+ </div></div></div>
+ <div style="width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--amber-edge),transparent)"></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold-hi)">Day&nbsp;&nbsp;·&nbsp;&nbsp;Month&nbsp;&nbsp;·&nbsp;&nbsp;Date</div>
+ <div style="display:flex;align-items:center;gap:10px">
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f, 0 1px 0 #ffffff10">
+ <div class="knurl"></div><div class="drum">S</div><div class="drum">A</div><div class="drum">T</div><div class="knurl"></div>
+ </div>
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f">
+ <div class="knurl"></div><div class="drum">J</div><div class="drum">U</div><div class="drum">L</div><div class="knurl"></div>
+ </div>
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f">
+ <div class="knurl"></div><div class="drum">1</div><div class="drum">8</div><div class="knurl"></div>
+ </div>
+ </div></div>
+ <div class="sep-dot"></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold-hi)">Hour&nbsp;·&nbsp;Min&nbsp;·&nbsp;AM/PM&nbsp;·&nbsp;TZ</div>
+ <div style="display:flex;align-items:center;gap:10px">
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f">
+ <div class="knurl"></div><div class="drum">0</div><div class="drum">7</div>
+ <div style="color:#777;font-size:17px;padding:0 2px">:</div>
+ <div class="drum">5</div><div class="drum">5</div><div class="knurl"></div>
+ </div>
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f">
+ <div class="drum" style="font-size:15px">P</div><div class="drum" style="font-size:15px">M</div>
+ </div>
+ <div class="dgroup" style="background:#080808;box-shadow:inset 0 2px 10px #000, 0 0 0 1px #33290f">
+ <div class="drum" style="font-size:15px">C</div><div class="drum" style="font-size:15px">D</div><div class="drum" style="font-size:15px">T</div>
+ </div>
+ </div></div>
+</div>
+<p class="cap"><b>Your 11:46 concept, extended to the whole bar.</b> One continuous black panel with the double gold pinstripe;
+engraved gold labels over every module so the bar reads as a single machined faceplate. Date and time are drum groups with
+knurled end-caps; the timer is a smaller drum pair; volume is a needle meter; statuses are jewel lamps. Warmest and most
+unified of the six — the pinstripe frames the entire bar, not each module.</p>
+</section>
+
+<!-- ================= V2 CHROME BEZEL CONSOLE ================= -->
+<section class="var">
+<h2><span class="n">2</span>Chrome-bezel instrument row</h2>
+<div class="minibar" style="background:#111010;border:1px solid #2e3134;box-shadow:inset 0 1px 8px #000">
+ <span style="color:var(--steel)">▶ ✦ 1 <b style="color:var(--cream)">2</b> 3 4 5 ▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:var(--steel)">AUX ᯤ ♪ ᛒ ⛭ ⏱ ⋮⋮</span>
+ <span style="color:#e9e9e9;background:#000;border:1px solid #888;border-radius:4px;padding:1px 4px">SAT JUL 18</span>
+ <span style="color:#e9e9e9;background:#000;border:1px solid #888;border-radius:4px;padding:1px 4px">07:55 PM</span>
+</div>
+<div class="stage" style="background:linear-gradient(180deg,#171515,#0e0d0d 60%,#131211);border:1px solid #2c2e30;box-shadow:inset 0 1px 10px #000, 0 4px 18px #000">
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Aux</div><div class="knob"></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Net</div>
+ <div style="border-radius:9px;padding:3px;background:var(--chrome-soft);box-shadow:0 2px 5px #000a">
+ <div style="background:#050607;border-radius:6px;padding:5px 9px;color:var(--vfd);font-size:14px;text-shadow:0 0 6px #2ee6c255">▂▄▆█</div>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Volume</div>
+ <div style="border-radius:9px;padding:3px;background:var(--chrome-soft);box-shadow:0 2px 5px #000a">
+ <svg width="56" height="26" viewBox="0 0 56 26" style="background:#0a0a09;border-radius:6px">
+ <path d="M6 22 A26 26 0 0 1 50 22" fill="none" stroke="#2c2a24" stroke-width="2.5"/>
+ <path d="M6 22 A26 26 0 0 1 38 5.5" fill="none" stroke="var(--cream)" stroke-width="2.5"/>
+ <line x1="28" y1="23" x2="40" y2="6" stroke="var(--sevred)" stroke-width="1.8"/>
+ </svg></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Blue</div>
+ <div style="border-radius:9px;padding:3px;background:var(--chrome-soft);box-shadow:0 2px 5px #000a">
+ <div style="background:#050607;border-radius:6px;padding:4px 8px;display:flex;gap:6px;align-items:center">
+ <span style="color:var(--silver);font-size:15px">ᛒ</span><span class="jewel" style="color:var(--vfd);background:var(--vfd);width:7px;height:7px"></span>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Maint</div>
+ <div style="border-radius:9px;padding:3px;background:var(--chrome-soft);box-shadow:0 2px 5px #000a">
+ <div style="background:#050607;border-radius:6px;padding:4px 8px;display:flex;gap:6px;align-items:center">
+ <span style="color:var(--silver);font-size:14px">⛭</span><span class="jewel" style="color:var(--jewel-g);background:var(--jewel-g);width:7px;height:7px"></span>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Timer</div>
+ <div style="border-radius:9px;padding:3px;background:var(--chrome-soft);box-shadow:0 2px 5px #000a">
+ <div style="background:#050607;border-radius:6px;padding:5px 8px;color:var(--cream);font-size:14px">--:--</div>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:6px;height:6px;border-radius:50%;background:#43464a"></i><i style="width:6px;height:6px;border-radius:50%;background:#43464a"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--steel)">Weather</div>
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div style="display:flex;align-items:center;gap:9px;background:#000;border-radius:7px;padding:6px 10px">
+ <svg width="26" height="26" style="color:var(--cream)"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:var(--cream);font-size:16px">82°</span>
+ <span style="color:var(--steel);font-size:8px;letter-spacing:.1em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#2a2a2a;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:var(--cream);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:var(--cream);font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="color:var(--steel);font-size:8px">6 mph</span>
+ </div>
+ </div></div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--silver)">Sat · Jul · 18</div>
+ <div style="display:flex;gap:8px">
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum">S</div><div class="drum">A</div><div class="drum">T</div></div></div>
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum">J</div><div class="drum">U</div><div class="drum">L</div></div></div>
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum">1</div><div class="drum">8</div></div></div>
+ </div>
+ <div style="width:60%;height:2px;background:var(--vfd);opacity:.55;border-radius:2px;margin-top:5px;box-shadow:0 0 6px var(--vfd)"></div>
+ </div>
+ <div class="mod"><div class="lbl" style="color:var(--silver)">07 : 55 · PM · CDT</div>
+ <div style="display:flex;gap:8px">
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum">0</div><div class="drum">7</div>
+ <div style="color:#888;font-size:17px;padding:0 2px">:</div>
+ <div class="drum">5</div><div class="drum">5</div></div></div>
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum" style="font-size:15px">P</div><div class="drum" style="font-size:15px">M</div></div></div>
+ <div style="border-radius:11px;padding:4px;background:var(--chrome);box-shadow:0 3px 7px #000c, inset 0 1px 1px #fff">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum" style="font-size:15px">C</div><div class="drum" style="font-size:15px">D</div><div class="drum" style="font-size:15px">T</div></div></div>
+ </div>
+ <div style="width:60%;height:2px;background:var(--vfd);opacity:.55;border-radius:2px;margin-top:5px;box-shadow:0 0 6px var(--vfd)"></div>
+ </div>
+</div>
+<p class="cap"><b>Your first concept sheet, with every module earning a chrome bezel.</b> Individual polished frames on a
+leather-black ground; silver engraved labels; the lume underline (vfd family — Super-LumiNova blue-green) marks the two
+time modules as the "hands" of the bar. Cooler and more mechanical than V1: each module is its own instrument, the way
+the drum-variation sheet grouped them. Net becomes a VFD signal ladder to put one lit window on the bar's left half.</p>
+</section>
+
+<!-- ================= V3 TOOL WATCH ================= -->
+<section class="var">
+<h2><span class="n">3</span>Tool-watch dial (Speedmaster steel)</h2>
+<div class="minibar" style="background:var(--brush);border:1px solid #55595e;box-shadow:inset 0 -2px 6px #0008">
+ <span style="color:#26282a">▶ ✦ 1 <b>2</b> 3 4 5 ▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:#26282a">AUX ᯤ ♪ ᛒ ⛭ ⏱ ⋮⋮</span>
+ <span style="color:#e9e9e9;background:#0b0b0b;border-radius:3px;padding:1px 5px">SAT 18 · 19:55</span>
+</div>
+<div class="stage" style="background:var(--brush);border-radius:16px;border:1px solid #595e63;box-shadow:inset 0 1px 1px #fff8, inset 0 -3px 8px #0007, 0 5px 18px #000">
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Aux</div><div class="knob"></div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Net</div>
+ <div style="background:#0c0d0d;border-radius:8px;padding:6px 9px;box-shadow:inset 0 2px 6px #000, 0 1px 0 #fff6">
+ <div style="display:flex;gap:3px;align-items:flex-end;height:18px">
+ <i style="width:4px;height:6px;background:#e9e9e9"></i><i style="width:4px;height:10px;background:#e9e9e9"></i>
+ <i style="width:4px;height:14px;background:#e9e9e9"></i><i style="width:4px;height:18px;background:#3a3d3f"></i>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Volume</div>
+ <svg width="46" height="46" viewBox="0 0 46 46">
+ <circle cx="23" cy="23" r="21" fill="#0c0d0d" stroke="#585d62" stroke-width="1.6"/>
+ <g stroke="#e9e9e9" stroke-width="1.4">
+ <line x1="23" y1="4" x2="23" y2="9"/><line x1="42" y1="23" x2="37" y2="23"/>
+ <line x1="23" y1="42" x2="23" y2="37"/><line x1="4" y1="23" x2="9" y2="23"/>
+ </g>
+ <line x1="23" y1="23" x2="33" y2="10" stroke="#e9e9e9" stroke-width="2"/>
+ <circle cx="23" cy="23" r="2.2" fill="#e9e9e9"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Blue</div>
+ <div style="background:#0c0d0d;border-radius:8px;padding:6px 8px;display:flex;gap:6px;align-items:center;box-shadow:inset 0 2px 6px #000, 0 1px 0 #fff6">
+ <span style="color:#e9e9e9;font-size:15px">ᛒ</span><span class="jewel" style="color:var(--phos);background:var(--phos);width:7px;height:7px"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Maint</div>
+ <div style="background:#0c0d0d;border-radius:8px;padding:6px 8px;display:flex;gap:6px;align-items:center;box-shadow:inset 0 2px 6px #000, 0 1px 0 #fff6">
+ <span style="color:#e9e9e9;font-size:14px">⛭</span><span class="jewel" style="color:var(--jewel-a);background:var(--jewel-a);width:7px;height:7px"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Timer 30-min register</div>
+ <svg width="46" height="46" viewBox="0 0 46 46">
+ <circle cx="23" cy="23" r="21" fill="#0c0d0d" stroke="#585d62" stroke-width="1.6"/>
+ <g stroke="#9aa0a5" stroke-width="1">
+ <line x1="23" y1="5" x2="23" y2="10"/><line x1="38.6" y1="14" x2="34.3" y2="16.5"/>
+ <line x1="38.6" y1="32" x2="34.3" y2="29.5"/><line x1="23" y1="41" x2="23" y2="36"/>
+ <line x1="7.4" y1="32" x2="11.7" y2="29.5"/><line x1="7.4" y1="14" x2="11.7" y2="16.5"/>
+ </g>
+ <line x1="23" y1="23" x2="29" y2="9" stroke="var(--sevred)" stroke-width="1.8"/>
+ <circle cx="23" cy="23" r="2" fill="#e9e9e9"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:6px;height:6px;border-radius:50%;background:#53585d"></i><i style="width:6px;height:6px;border-radius:50%;background:#53585d"></i><i style="width:6px;height:6px;border-radius:50%;background:#53585d"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Weather</div>
+ <div style="background:#0c0d0d;border-radius:8px;padding:6px 11px;display:flex;align-items:center;gap:9px;box-shadow:inset 0 2px 6px #000, 0 1px 0 #fff6">
+ <svg width="26" height="26" style="color:#e9e9e9"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#e9e9e9;font-size:16px">82°</span>
+ <span style="color:#8b9095;font-size:8px;letter-spacing:.1em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#2a2c2e;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:#e9e9e9;transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#e9e9e9;font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="color:#8b9095;font-size:8px">6 mph</span>
+ </div>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Date aperture</div>
+ <div style="background:#0c0d0d;border-radius:9px;padding:8px 10px;display:flex;gap:8px;align-items:center;box-shadow:inset 0 2px 8px #000, 0 1px 0 #fff6">
+ <span style="color:#e9e9e9;letter-spacing:.14em;font-size:15px">SAT</span>
+ <div style="background:#f2f2ee;color:#111;border-radius:3px;padding:2px 7px;font-size:17px;font-weight:700;border:1.5px solid #63686d;box-shadow:inset 0 -2px 3px #0003">18</div>
+ <span style="color:#9aa0a5;letter-spacing:.14em;font-size:13px">JUL</span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:#2b2d2f">Time dial</div>
+ <div style="display:flex;align-items:center;gap:10px">
+ <svg width="62" height="62" viewBox="0 0 62 62">
+ <circle cx="31" cy="31" r="29" fill="#0c0d0d" stroke="#63686d" stroke-width="2"/>
+ <g stroke="#e9e9e9" stroke-width="2">
+ <line x1="31" y1="5" x2="31" y2="12"/><line x1="57" y1="31" x2="50" y2="31"/>
+ <line x1="31" y1="57" x2="31" y2="50"/><line x1="5" y1="31" x2="12" y2="31"/>
+ </g>
+ <g stroke="#8b9095" stroke-width="1.2">
+ <line x1="44" y1="8.5" x2="40.5" y2="14.6"/><line x1="53.5" y1="18" x2="47.4" y2="21.5"/>
+ <line x1="53.5" y1="44" x2="47.4" y2="40.5"/><line x1="44" y1="53.5" x2="40.5" y2="47.4"/>
+ <line x1="18" y1="53.5" x2="21.5" y2="47.4"/><line x1="8.5" y1="44" x2="14.6" y2="40.5"/>
+ <line x1="8.5" y1="18" x2="14.6" y2="21.5"/><line x1="18" y1="8.5" x2="21.5" y2="14.6"/>
+ </g>
+ <g fill="var(--phos)">
+ <circle cx="31" cy="14" r="1.5"/><circle cx="48" cy="31" r="1.5"/><circle cx="31" cy="48" r="1.5"/><circle cx="14" cy="31" r="1.5"/>
+ </g>
+ <line x1="31" y1="31" x2="20" y2="21" stroke="#e9e9e9" stroke-width="3.4" stroke-linecap="round"/>
+ <line x1="31" y1="31" x2="42" y2="13" stroke="#e9e9e9" stroke-width="2.2" stroke-linecap="round"/>
+ <line x1="31" y1="31" x2="26" y2="45" stroke="var(--sevred)" stroke-width="1.4" stroke-linecap="round"/>
+ <circle cx="31" cy="31" r="2.6" fill="#e9e9e9"/>
+ </svg>
+ <div style="background:#0c0d0d;border-radius:8px;padding:6px 9px;color:#e9e9e9;font-size:16px;box-shadow:inset 0 2px 6px #000, 0 1px 0 #fff6">19:55<span style="color:#8b9095;font-size:11px"> CDT</span></div>
+ </div></div>
+</div>
+<p class="cap"><b>The Speedmaster direction: brushed-steel bar, black dial insets, lume dots.</b> Time is an actual analog
+dial with baton hands plus a small digital repeater; the date is a framed white aperture (the Submariner cyclops date, flattened).
+Audio and timer become chronograph sub-registers — the timer literally is a 30-minute register. The steel ground makes this
+the lightest bar of the six; icons engrave dark into the metal rather than glowing.</p>
+</section>
+
+<!-- ================= V4 NAVITIMER ================= -->
+<section class="var">
+<h2><span class="n">4</span>Navitimer registers (cream on bronze)</h2>
+<div class="minibar" style="background:linear-gradient(180deg,#2b2119,#1c1611);border:1px solid #4a3a28;box-shadow:inset 0 1px 6px #000">
+ <span style="color:#c9b795">▶ ✦ 1 <b style="color:var(--cream)">2</b> 3 4 5 ▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:#c9b795">AUX ᯤ ♪ ᛒ ⛭ ⏱ ⋮⋮</span>
+ <span style="background:var(--cream);color:#1c1611;border-radius:3px;padding:1px 5px">SAT JUL 18 · 07:55 PM</span>
+</div>
+<div class="stage" style="background:linear-gradient(180deg,#2e231a,#1e1812 65%,#241c14);border-radius:16px;border:1px solid #574430;box-shadow:inset 0 1px 2px #ffedc411, inset 0 -4px 12px #000, 0 5px 18px #000">
+ <div class="mod"><div class="lbl" style="color:#c9b795">Aux</div><div class="knob brass"></div></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Net · slide rule</div>
+ <div style="background:var(--cream);border-radius:7px;padding:5px 8px;box-shadow:inset 0 -2px 4px #0004, 0 2px 5px #000a">
+ <svg width="58" height="16" viewBox="0 0 58 16">
+ <g stroke="#241c14" stroke-width="1"><line x1="3" y1="2" x2="3" y2="14"/><line x1="12" y1="5" x2="12" y2="14"/><line x1="21" y1="2" x2="21" y2="14"/><line x1="30" y1="5" x2="30" y2="14"/><line x1="39" y1="2" x2="39" y2="14"/><line x1="48" y1="5" x2="48" y2="14"/><line x1="55" y1="2" x2="55" y2="14"/></g>
+ <line x1="33" y1="0" x2="33" y2="16" stroke="var(--sevred)" stroke-width="1.6"/>
+ </svg></div></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Volume</div>
+ <svg width="48" height="48" viewBox="0 0 48 48">
+ <circle cx="24" cy="24" r="22" fill="var(--cream)" stroke="#574430" stroke-width="1.6"/>
+ <g stroke="#241c14" stroke-width="1.2">
+ <line x1="24" y1="4" x2="24" y2="10"/><line x1="44" y1="24" x2="38" y2="24"/>
+ <line x1="24" y1="44" x2="24" y2="38"/><line x1="4" y1="24" x2="10" y2="24"/>
+ </g>
+ <line x1="24" y1="24" x2="34" y2="11" stroke="#241c14" stroke-width="2"/>
+ <circle cx="24" cy="24" r="2" fill="#241c14"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Blue</div>
+ <svg width="34" height="34" viewBox="0 0 34 34">
+ <circle cx="17" cy="17" r="15" fill="var(--cream)" stroke="#574430" stroke-width="1.4"/>
+ <text x="17" y="22" text-anchor="middle" fill="#241c14" font-size="14" font-family="monospace">ᛒ</text>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Maint</div>
+ <svg width="34" height="34" viewBox="0 0 34 34">
+ <circle cx="17" cy="17" r="15" fill="var(--cream)" stroke="#574430" stroke-width="1.4"/>
+ <text x="17" y="22" text-anchor="middle" fill="#241c14" font-size="13" font-family="monospace">⛭</text>
+ <circle cx="26" cy="8" r="3" fill="var(--jewel-a)" stroke="#241c14" stroke-width=".8"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Timer</div>
+ <svg width="48" height="48" viewBox="0 0 48 48">
+ <circle cx="24" cy="24" r="22" fill="var(--cream)" stroke="#574430" stroke-width="1.6"/>
+ <g stroke="#241c14" stroke-width="1">
+ <line x1="24" y1="4" x2="24" y2="9"/><line x1="41.3" y1="14" x2="37" y2="16.5"/>
+ <line x1="41.3" y1="34" x2="37" y2="31.5"/><line x1="24" y1="44" x2="24" y2="39"/>
+ <line x1="6.7" y1="34" x2="11" y2="31.5"/><line x1="6.7" y1="14" x2="11" y2="16.5"/>
+ </g>
+ <line x1="24" y1="24" x2="31" y2="10" stroke="var(--sevred)" stroke-width="1.8"/>
+ <circle cx="24" cy="24" r="2" fill="#241c14"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:6px;height:6px;border-radius:50%;background:#574430"></i><i style="width:6px;height:6px;border-radius:50%;background:#574430"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:#c9b795">Weather</div>
+ <div style="background:var(--cream);border-radius:9px;padding:6px 11px;display:flex;align-items:center;gap:9px;box-shadow:inset 0 -2px 4px #0004, 0 2px 5px #000a">
+ <svg width="26" height="26" style="color:#241c14"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#241c14;font-size:16px;font-weight:700">82°</span>
+ <span style="color:#574430;font-size:8px;letter-spacing:.1em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#b8ac8c;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:#241c14;transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:#241c14;font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="color:#574430;font-size:8px">6 mph</span>
+ </div>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--cream)">Date · beads-of-rice frame</div>
+ <div style="display:flex;align-items:center;gap:8px;background:#170f09;border-radius:9px;padding:7px 12px;box-shadow:inset 0 2px 8px #000, 0 0 0 1px #574430">
+ <span style="color:var(--cream);letter-spacing:.12em;font-size:15px">SAT</span>
+ <div style="background:var(--cream);color:#170f09;border-radius:3px;padding:2px 7px;font-size:17px;font-weight:700;box-shadow:inset 0 -2px 3px #0004">18</div>
+ <span style="color:#c9b795;letter-spacing:.12em;font-size:13px">JUL</span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--cream)">Time · big register</div>
+ <div style="display:flex;align-items:center;gap:10px">
+ <svg width="60" height="60" viewBox="0 0 60 60">
+ <circle cx="30" cy="30" r="28" fill="var(--cream)" stroke="#574430" stroke-width="2"/>
+ <circle cx="30" cy="30" r="21" fill="none" stroke="#241c14" stroke-width=".8" stroke-dasharray="1.5 3.2"/>
+ <g fill="#241c14" font-size="8" font-family="monospace" text-anchor="middle">
+ <text x="30" y="12">12</text><text x="49" y="33">3</text><text x="30" y="54">6</text><text x="11" y="33">9</text>
+ </g>
+ <line x1="30" y1="30" x2="20" y2="20" stroke="#241c14" stroke-width="3" stroke-linecap="round"/>
+ <line x1="30" y1="30" x2="41" y2="13" stroke="#241c14" stroke-width="2" stroke-linecap="round"/>
+ <line x1="30" y1="30" x2="26" y2="44" stroke="var(--sevred)" stroke-width="1.3" stroke-linecap="round"/>
+ <circle cx="30" cy="30" r="2.4" fill="#241c14"/>
+ </svg>
+ <div style="background:#170f09;border-radius:8px;padding:6px 9px;color:var(--cream);font-size:16px;box-shadow:inset 0 2px 6px #000, 0 0 0 1px #574430">07:55<span style="color:#c9b795;font-size:11px"> PM</span></div>
+ </div></div>
+</div>
+<p class="cap"><b>The Navitimer direction: cream registers on a dark bronze dial.</b> Every instrument is a cream sub-dial with
+black markings — the inverse polarity of every other variation, so statuses read as printed gauge faces, not glowing lamps.
+Net is a slide-rule strip with the red index needle; the date sits in a dark framed aperture like the Navitimer's 3-o'clock
+window. Warm, aviation-flavored, and the busiest of the six — closest to a real cockpit cluster.</p>
+</section>
+
+<!-- ================= V5 DASHBOARD ================= -->
+<section class="var">
+<h2><span class="n">5</span>Auto dashboard (gauges + tell-tales + odometer)</h2>
+<div class="minibar" style="background:linear-gradient(180deg,#191715,#0f0e0d);border-top:2px solid #8a8f94;border-bottom:2px solid #6a6f74;box-shadow:inset 0 0 12px #000">
+ <span style="color:var(--steel)">▶ ✦ <b style="color:var(--jewel-a)">1 2 3 4 5</b> ▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:var(--jewel-a)">AUX NET VOL BT SVC ⏱ ⋮⋮</span>
+ <span style="color:#e9e9e9;background:#000;border-radius:3px;padding:1px 4px">SAT 18 JUL · 07:55 PM</span>
+</div>
+<div class="stage" style="background:linear-gradient(180deg,#1b1917,#100f0e 70%);border-radius:16px;border-top:3px solid #90959a;border-bottom:3px solid #5e6368;box-shadow:inset 0 0 18px #000, 0 5px 18px #000">
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Aux</div><div class="knob"></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Net signal</div>
+ <svg width="52" height="52" viewBox="0 0 52 52">
+ <circle cx="26" cy="26" r="24" fill="#0d0c0b" stroke="#90959a" stroke-width="2.4"/>
+ <g stroke="var(--jewel-a)" stroke-width="1.3" opacity=".9">
+ <line x1="26" y1="6" x2="26" y2="12"/><line x1="43" y1="13" x2="38.5" y2="17"/>
+ <line x1="46" y1="26" x2="40" y2="26"/><line x1="9" y1="13" x2="13.5" y2="17"/><line x1="6" y1="26" x2="12" y2="26"/>
+ </g>
+ <text x="26" y="45" text-anchor="middle" fill="var(--jewel-a)" font-size="7" font-family="monospace" letter-spacing="1">SIG</text>
+ <line x1="26" y1="26" x2="37" y2="13" stroke="var(--sevred)" stroke-width="2"/>
+ <circle cx="26" cy="26" r="3" fill="#1c1c1c" stroke="#000"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Volume</div>
+ <svg width="52" height="52" viewBox="0 0 52 52">
+ <circle cx="26" cy="26" r="24" fill="#0d0c0b" stroke="#90959a" stroke-width="2.4"/>
+ <g stroke="var(--jewel-a)" stroke-width="1.3" opacity=".9">
+ <line x1="26" y1="6" x2="26" y2="12"/><line x1="43" y1="13" x2="38.5" y2="17"/>
+ <line x1="46" y1="26" x2="40" y2="26"/><line x1="9" y1="13" x2="13.5" y2="17"/><line x1="6" y1="26" x2="12" y2="26"/>
+ </g>
+ <text x="26" y="45" text-anchor="middle" fill="var(--jewel-a)" font-size="7" font-family="monospace" letter-spacing="1">VOL</text>
+ <line x1="26" y1="26" x2="14" y2="14" stroke="var(--sevred)" stroke-width="2"/>
+ <circle cx="26" cy="26" r="3" fill="#1c1c1c" stroke="#000"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Tell-tales</div>
+ <div style="display:grid;grid-template-columns:auto auto;gap:5px 10px;background:#0d0c0b;border:2px solid #4b5055;border-radius:9px;padding:7px 10px;box-shadow:inset 0 2px 8px #000">
+ <span style="color:var(--jewel-g);font-size:11px;text-shadow:0 0 6px var(--jewel-g)">ᛒ BT</span>
+ <span style="color:var(--jewel-a);font-size:11px;text-shadow:0 0 6px var(--jewel-a)">⛭ SVC</span>
+ <span style="color:#3c3a36;font-size:11px">🔇 MUTE</span>
+ <span style="color:#3c3a36;font-size:11px">⚠ NET</span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Timer</div>
+ <div style="background:#0d0c0b;border:2px solid #4b5055;border-radius:9px;padding:6px 9px;color:var(--jewel-a);font-size:15px;text-shadow:0 0 7px var(--jewel-a);box-shadow:inset 0 2px 8px #000">12:34</div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:6px;height:6px;border-radius:50%;background:#44403a"></i><i style="width:6px;height:6px;border-radius:50%;background:#44403a"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Weather</div>
+ <div style="border-radius:10px;padding:4px;background:var(--chrome-soft);box-shadow:0 3px 7px #000c">
+ <div style="background:#0d0c0b;border-radius:7px;padding:6px 11px;display:flex;align-items:center;gap:9px;color:var(--jewel-a);text-shadow:0 0 8px var(--jewel-a);box-shadow:inset 0 3px 9px #000">
+ <svg width="26" height="26" style="color:var(--jewel-a)"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="font-size:17px">82°</span>
+ <span style="font-size:8px;letter-spacing:.1em;color:#8a6f33;text-shadow:none">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#3a2f14;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:var(--jewel-a);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="font-size:8px;color:#8a6f33;text-shadow:none">6 mph</span>
+ </div>
+ </div></div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Odometer date</div>
+ <div style="border-radius:10px;padding:4px;background:var(--chrome-soft);box-shadow:0 3px 7px #000c">
+ <div class="dgroup" style="background:#000;border-radius:7px;box-shadow:inset 0 3px 9px #000">
+ <div class="drum" style="font-size:16px">S</div><div class="drum" style="font-size:16px">A</div><div class="drum" style="font-size:16px">T</div>
+ <div class="drum" style="font-size:16px;background:linear-gradient(180deg,#eee,#bbb 50%,#999);color:#111">1</div>
+ <div class="drum" style="font-size:16px;background:linear-gradient(180deg,#eee,#bbb 50%,#999);color:#111">8</div>
+ <div class="drum" style="font-size:16px">J</div><div class="drum" style="font-size:16px">U</div><div class="drum" style="font-size:16px">L</div>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--jewel-a)">Clock · backlit</div>
+ <div style="border-radius:10px;padding:4px;background:var(--chrome-soft);box-shadow:0 3px 7px #000c">
+ <div style="background:#0d0c0b;border-radius:7px;padding:6px 11px;color:var(--jewel-a);font-size:19px;text-shadow:0 0 9px var(--jewel-a);box-shadow:inset 0 3px 9px #000">
+ 07:55 <span style="font-size:12px">PM</span> <span style="font-size:11px;color:#8a6f33">CDT</span>
+ </div></div></div>
+</div>
+<p class="cap"><b>The dashboard direction: amber-backlit gauge cluster with chrome top/bottom trim rails.</b> Net and volume are
+round needle gauges; bluetooth/maint/mute/net-fail live in a tell-tale block (lit = active, dark = off) exactly like a
+cluster's warning lamps; the date is a mixed odometer — white digits on the day drums (a real trip-counter trick); the clock
+glows amber behind chrome. The bar's top and bottom edges get the chrome rails, which is what makes the whole strip read
+"dashboard" at a glance. The amber family is the kit's existing panel amber, so this is the variation closest to the widget gallery.</p>
+</section>
+
+<!-- ================= V6 PERPETUAL CALENDAR ================= -->
+<section class="var">
+<h2><span class="n">6</span>Perpetual-calendar dress (guilloché + apertures)</h2>
+<div class="minibar" style="background:radial-gradient(circle at 50% 120%,#1d1a16,#0d0c0b 70%);border:1px solid #6e5a2e;box-shadow:inset 0 0 14px #000">
+ <span style="color:var(--steel)">▶ ✦ 1 <b style="color:var(--gold-hi)">2</b> 3 4 5 ▦ emacs — widgets.js</span><span class="sp"></span>
+ <span style="color:var(--steel)">AUX ᯤ ♪ ᛒ ⛭ ☾ ⋮⋮</span>
+ <span style="color:var(--cream);border:1px solid #6e5a2e;border-radius:3px;padding:1px 5px">SAT JUL · 18 · 7:55</span>
+</div>
+<div class="stage" style="background:repeating-radial-gradient(circle at 50% 260%,#161311 0 3px,#0f0d0b 3px 6px);border-radius:16px;border:1px solid #6e5a2e;box-shadow:inset 0 0 0 3px #060505, inset 0 1px 16px #000, 0 5px 18px #000">
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Aux</div><div class="knob brass" style="width:26px;height:26px"></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Net</div>
+ <div style="display:flex;gap:4px;padding-top:6px;align-items:center">
+ <span style="color:var(--cream);font-size:14px">ᯤ</span>
+ <span class="jewel" style="color:var(--gold-hi);background:radial-gradient(circle at 35% 30%,#ffe9b0,var(--gold) 60%,#7d5c16);width:8px;height:8px"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Volume</div>
+ <svg width="44" height="44" viewBox="0 0 44 44">
+ <circle cx="22" cy="22" r="20" fill="#0b0a09" stroke="#6e5a2e" stroke-width="1.4"/>
+ <circle cx="22" cy="22" r="14" fill="none" stroke="#3a301c" stroke-width=".8"/>
+ <line x1="22" y1="22" x2="31" y2="10" stroke="var(--gold-hi)" stroke-width="1.6"/>
+ <circle cx="22" cy="22" r="1.8" fill="var(--gold-hi)"/>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Blue</div>
+ <div style="display:flex;gap:4px;padding-top:6px;align-items:center">
+ <span style="color:var(--cream);font-size:14px">ᛒ</span>
+ <span class="jewel" style="color:var(--slate-hi);background:radial-gradient(circle at 35% 30%,#9db4cc,var(--slate-hi) 60%,#232c36);width:8px;height:8px"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Maint</div>
+ <div style="display:flex;gap:4px;padding-top:6px;align-items:center">
+ <span style="color:var(--cream);font-size:13px">⛭</span>
+ <span class="jewel" style="color:var(--jewel-a);background:radial-gradient(circle at 35% 30%,#ffd48a,var(--jewel-a) 60%,#6b4a12);width:8px;height:8px"></span>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Timer · moonphase</div>
+ <svg width="58" height="34" viewBox="0 0 58 34">
+ <defs><clipPath id="moonwin"><path d="M6 30 A24 24 0 0 1 52 30 Z"/></clipPath></defs>
+ <path d="M4 31 A26 26 0 0 1 54 31 Z" fill="#0b0a09" stroke="#6e5a2e" stroke-width="1.4"/>
+ <g clip-path="url(#moonwin)">
+ <rect x="0" y="0" width="58" height="34" fill="var(--slate)"/>
+ <circle cx="36" cy="18" r="9" fill="var(--cream)"/>
+ <circle cx="12" cy="10" r="1" fill="var(--cream)"/><circle cx="20" cy="22" r="1" fill="var(--cream)"/>
+ <circle cx="50" cy="9" r="1" fill="var(--cream)"/>
+ </g>
+ <text x="29" y="32.5" text-anchor="middle" fill="#8f7b48" font-size="6.5" font-family="monospace" letter-spacing="1">12:34</text>
+ </svg></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Tray</div>
+ <div style="display:flex;gap:6px;padding-top:9px"><i style="width:5px;height:5px;border-radius:50%;background:#4a3d22"></i><i style="width:5px;height:5px;border-radius:50%;background:#4a3d22"></i></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold)">Weather</div>
+ <div style="background:#0b0a09;border:1.6px solid var(--gold);border-radius:5px;padding:5px 11px;display:flex;align-items:center;gap:9px;box-shadow:inset 0 2px 8px #000">
+ <svg width="26" height="26" style="color:var(--gold-hi)"><use href="#wx-sun"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:var(--cream);font-size:16px">82°</span>
+ <span style="color:var(--gold);font-size:8px;letter-spacing:.1em">CLEAR</span>
+ </div>
+ <div style="width:1px;align-self:stretch;background:#4a3d22;margin:2px 0"></div>
+ <div style="display:flex;align-items:center;gap:5px">
+ <svg width="18" height="18" style="color:var(--gold-hi);transform:rotate(293deg);transform-origin:center"><use href="#wx-vane"/></svg>
+ <div style="display:flex;flex-direction:column;line-height:1.05">
+ <span style="color:var(--cream);font-size:11px;letter-spacing:.06em">WNW</span>
+ <span style="color:var(--gold);font-size:8px">6 mph</span>
+ </div>
+ </div></div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold-hi)">Day · Month apertures</div>
+ <div style="display:flex;gap:7px">
+ <div style="background:#0b0a09;border:1.6px solid var(--gold);border-radius:4px;padding:4px 9px;color:var(--cream);font-size:15px;letter-spacing:.1em;box-shadow:inset 0 2px 6px #000">SAT</div>
+ <div style="background:#0b0a09;border:1.6px solid var(--gold);border-radius:4px;padding:4px 9px;color:var(--cream);font-size:15px;letter-spacing:.1em;box-shadow:inset 0 2px 6px #000">JUL</div>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold-hi)">Big date</div>
+ <div style="display:flex;gap:3px">
+ <div style="background:var(--cream);color:#171310;border:1.6px solid var(--gold);border-radius:4px 0 0 4px;padding:3px 8px;font-size:20px;font-weight:700;box-shadow:inset 0 -2px 3px #0004">1</div>
+ <div style="background:var(--cream);color:#171310;border:1.6px solid var(--gold);border-radius:0 4px 4px 0;padding:3px 8px;font-size:20px;font-weight:700;box-shadow:inset 0 -2px 3px #0004">8</div>
+ </div></div>
+ <div class="mod"><div class="lbl" style="color:var(--gold-hi)">Time</div>
+ <div style="background:#0b0a09;border:1.6px solid var(--gold);border-radius:5px;padding:5px 11px;color:var(--cream);font-size:18px;letter-spacing:.06em;box-shadow:inset 0 2px 8px #000">
+ 7:55 <span style="font-size:11px;color:var(--gold)">PM CDT</span>
+ </div></div>
+</div>
+<p class="cap"><b>The Patek/AP direction: guilloché ground, gold-framed apertures, a moonphase.</b> Day and month are twin
+apertures (the SAM · NOV window pair), the date is a big-date double disc in cream, and the timer becomes the moonphase —
+the moon crosses the arc as the countdown runs, with the digits small beneath. Statuses are cabochon jewels, not lamps.
+The most jewelry-like and the most restrained: nothing glows except what matters. Least "stereo", most "watch".</p>
+</section>
+
+<div class="note">
+<b>Shared decisions across all six, for discussion:</b>
+(1) AUX knob at the head of the right cluster is the future desktop-settings module (caffeine + dim + touchpad fold in) —
+a knob in every variation since "settings" is the one module that IS a knob.
+(2) Left half stays functionally identical everywhere; it takes each variation's ground treatment only.
+(3) Date and time stay two separate modules (your current click/scroll contracts), even where they visually pair.
+(4) The drum content is the ordinal-free format — drums can't render "18th" gracefully; worth deciding whether the
+chronograph keeps ordinal at all.
+(5) True-proportion strips show the honest 3440×54 balance: the right cluster occupies roughly a quarter of the bar.
+(6) Weather module: the <b>compact chip is the chosen bar form</b> (2026-07-18) — it's the only one of the six weather takes legible at bar scale. The gauge, split-flap, VFD, nixie, and condition dial are kept as candidates for a larger panel or a click-to-expand view, not the bar.
+</div>
+
+</body>
+</html>