= new Map(
+ allColors.map((color) => [color.id, color])
+);
+
+export function color(id: string): DrColor {
+ const found = colorsById.get(id);
+ if (!found) throw new Error(`Unknown Digital Rust colour id: ${id}`);
+ return found;
+}
+
+export function hexToRgba(hex: string, alpha: number): string {
+ const value = parseInt(hex.slice(1), 16);
+ const r = (value >> 16) & 0xff;
+ const g = (value >> 8) & 0xff;
+ const b = value & 0xff;
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function tint(id: string, alpha: number): string {
+ return hexToRgba(color(id).hex, alpha);
+}
+
+function emitNamedColors(): string {
+ const ramp = rustRamp
+ .map((c) => `\t--${c.id}: ${c.hex};`)
+ .join('\n');
+ const accents = accentFamilies
+ .flatMap((f) => [f.base, f.dim, f.bright])
+ .map((c) => `\t--${c.id}: ${c.hex};`)
+ .join('\n');
+ return `\t/* The rust ramp is the neutral scale. There are no separate grays. */\n${ramp}\n\t--${amberAlertText.id}: ${amberAlertText.hex}; /* ${amberAlertText.description} */\n\n\t/* Accent colours, each with dim and bright variants. */\n${accents}`;
+}
+
+export function toTokensCss(): string {
+ return `/* GENERATED FILE. Edit src/lib/palette.ts, not this file. */
+:root {
+ color-scheme: dark;
+${emitNamedColors()}
+
+ /* Semantic surface tokens */
+ --dr-surface-base: var(--event-horizon);
+ --dr-surface-secondary: var(--null-pointer);
+ --dr-surface-elevated: var(--core-meltdown);
+ --dr-surface-highlight: var(--bad-sector);
+ --dr-surface-active: ${internalHex.surfaceActive};
+
+ /* Semantic text tokens */
+ --dr-text-primary: var(--ghost-pixel);
+ --dr-text-secondary: var(--phosphor-smoke);
+ --dr-text-link: var(--phantom-current);
+ --dr-text-link-hover: var(--fatal-error);
+ --dr-text-link-visited: var(--corrupted-cache);
+ --dr-text-on-accent: var(--ghost-pixel);
+
+ /* Semantic action tokens */
+ --dr-accent: var(--digital-rust);
+ --dr-accent-hover: var(--firewall-breach); /* Ghost Pixel on this passes AA (4.66:1); raw Amber Alert does not */
+
+ /* Semantic feedback tokens */
+ --dr-success: var(--memory-leek);
+ --dr-warning: var(--stack-overglow);
+ --dr-danger: var(--amber-alert);
+ --dr-danger-text: var(--amber-alert-text);
+ --dr-info: var(--dead-thread);
+
+ /* Semantic border colour tokens */
+ --dr-border-color: var(--dark-packet); /* the 2px wall on interactive elements */
+ --dr-border-color-well: var(--bad-sector); /* recessed input wells */
+ --dr-border-color-hover: var(--digital-rust); /* ghost-control hover, focused wells */
+ --dr-border-color-invalid: var(--amber-alert);
+
+ /* Border tokens */
+ --dr-border: 2px solid var(--dark-packet);
+ --dr-border-thick: 4px solid var(--dark-packet); /* page/site chrome only (headers, section rules); never on components */
+ --dr-border-subtle: 1px solid var(--bad-sector);
+ --dr-border-focus: 2px solid var(--stack-overglow);
+
+ /* Shadow tokens. No blur shadows: offset solids only. */
+ --dr-shadow-offset-sm: 2px 2px 0 0 var(--dr-surface-highlight);
+ --dr-shadow-offset-md: 3px 3px 0 0 var(--dr-surface-highlight);
+ --dr-shadow-offset-lg: 4px 4px 0 0 var(--dr-surface-highlight);
+ --dr-shadow-hover-md: 4px 4px 0 0 var(--dr-surface-highlight);
+ --dr-shadow-active: 0 0 0 0 var(--dr-surface-highlight);
+ --dr-shadow-glow-sm: 0 0 10px ${tint('digital-rust', 0.4)};
+ --dr-shadow-glow-md: 0 0 20px ${tint('digital-rust', 0.4)};
+ --dr-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ --dr-shadow-inner-lowlight: inset 0 -1px 0 ${tint('event-horizon', 0.6)};
+
+ /* Interaction tokens (the press cycle) */
+ --dr-press-rest: translate(0, 0);
+ --dr-press-hover: translate(-2px, -2px);
+ --dr-press-active: translate(2px, 2px);
+
+ /* Focus ring */
+ --dr-focus-ring: 2px solid var(--stack-overglow);
+ --dr-focus-ring-offset: 2px;
+
+ /* Radius tokens. Nothing above 6px. */
+ --dr-radius-sm: 2px;
+ --dr-radius: 4px;
+ --dr-radius-lg: 6px;
+
+ /* Spacing tokens */
+ --dr-space-xs: 0.25rem;
+ --dr-space-sm: 0.5rem;
+ --dr-space-md: 1rem;
+ --dr-space-lg: 1.5rem;
+ --dr-space-xl: 2.5rem;
+ --dr-space-2xl: 4rem;
+ --dr-space-3xl: 6rem;
+
+ /* Type scale tokens */
+ --dr-text-xs: 0.75rem;
+ --dr-text-sm: 0.875rem;
+ --dr-text-base: 1rem;
+ --dr-text-lg: 1.25rem;
+ --dr-text-xl: 1.75rem;
+ --dr-text-2xl: 2.5rem;
+ --dr-text-3xl: 4rem;
+
+ /* Motion tokens */
+ --dr-duration-fast: 150ms;
+ --dr-duration-normal: 250ms;
+ --dr-duration-slow: 400ms;
+ --dr-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+ --dr-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
+ --dr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ --dr-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ /* Z-index tokens */
+ --dr-z-content: 10;
+ --dr-z-noise: 1000;
+
+ /* Scanline colour */
+ --dr-scanline: ${tint('digital-rust', 0.03)};
+
+ /* Semantic tints (badge/diagnostic backgrounds and borders) */
+ --memory-leek-10: ${tint('memory-leek', 0.1)};
+ --memory-leek-15: ${tint('memory-leek', 0.15)};
+ --memory-leek-30: ${tint('memory-leek', 0.3)};
+ --dead-thread-10: ${tint('dead-thread', 0.1)};
+ --dead-thread-15: ${tint('dead-thread', 0.15)};
+ --dead-thread-30: ${tint('dead-thread', 0.3)};
+ --amber-alert-10: ${tint('amber-alert', 0.1)};
+ --amber-alert-15: ${tint('amber-alert', 0.15)};
+ --amber-alert-25: ${tint('amber-alert', 0.25)};
+ --stack-overglow-10: ${tint('stack-overglow', 0.1)};
+ --stack-overglow-15: ${tint('stack-overglow', 0.15)};
+ --stack-overglow-30: ${tint('stack-overglow', 0.3)};
+ --phantom-current-15: ${tint('phantom-current', 0.15)};
+ --phantom-current-30: ${tint('phantom-current', 0.3)};
+ --core-meltdown-40: ${tint('core-meltdown', 0.4)}; /* translucent panel tint (blockquotes, scrims) */
+ --event-horizon-95: ${tint('event-horizon', 0.95)}; /* near-opaque warm backdrop (lightboxes) */
+ --phosphor-smoke-70: ${tint('phosphor-smoke', 0.7)}; /* de-emphasised body copy (hints) */
+ --dr-text-muted: ${tint('phosphor-smoke', 0.5)};
+
+ /* Font stacks. Illustrative only, NOT a constraint. Any families of
+ equivalent character (condensed uppercase for heading, slab/humanist
+ serif or humanist sans for body, tabular monospace for readouts)
+ satisfy the role; substitute freely to suit the project's font
+ license and locale. */
+ --dr-font-heading: "Rajdhani", "Saira SemiCondensed", "Trebuchet MS", sans-serif;
+ --dr-font-body: "Zilla Slab", "Bitter", "Source Serif 4", Georgia, serif;
+ --dr-font-mono: "IBM Plex Mono", "Space Mono", ui-monospace, "Fira Code",
+ "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
+ monospace;
+}
+`;
+}
diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css
new file mode 100644
index 0000000..9661d86
--- /dev/null
+++ b/src/lib/styles/app.css
@@ -0,0 +1,1052 @@
+@import "/src/lib/styles/normalize.css";
+@import "/src/lib/generated/tokens.css";
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual;
+ font-variant-numeric: oldstyle-nums tabular-nums;
+ hyphens: auto;
+ font-kerning: normal;
+ font-optical-sizing: auto;
+ text-rendering: optimizeLegibility;
+}
+
+
+/* ────────────────────────────────────────────
+ Base
+ ──────────────────────────────────────────── */
+
+body {
+ background: var(--dr-surface-base);
+ color: var(--dr-text-primary);
+ font-family: var(--dr-font-body);
+ font-weight: 500;
+ min-height: 100vh;
+ padding: var(--dr-space-xl);
+ position: relative;
+ overflow-x: hidden;
+ line-height: 1.6;
+}
+
+/* ── Atmospheric noise texture (non-negotiable) ── */
+body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+ opacity: 0.02;
+ pointer-events: none;
+ z-index: var(--dr-z-noise);
+}
+
+/* ── Scanline overlay (non-negotiable) ── */
+body::after {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background: repeating-linear-gradient(0deg,
+ transparent,
+ transparent 2px,
+ var(--dr-scanline) 2px,
+ var(--dr-scanline) 4px);
+ pointer-events: none;
+ z-index: calc(var(--dr-z-noise) - 1);
+}
+
+.container {
+ max-width: 1400px;
+ margin: 0 auto;
+ position: relative;
+ z-index: var(--dr-z-content);
+}
+
+/* ────────────────────────────────────────────
+ Typography
+ ──────────────────────────────────────────── */
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: var(--dr-font-heading);
+ font-variation-settings: "slnt" 0;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+}
+
+/* ────────────────────────────────────────────
+ Section titles (bracket notation)
+ ──────────────────────────────────────────── */
+
+.section-title {
+ color: var(--fatal-error);
+ font-size: var(--dr-text-xl);
+ margin: var(--dr-space-2xl) 0 var(--dr-space-lg);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ border-left: var(--dr-border-thick);
+ border-left-color: var(--digital-rust);
+ padding-left: var(--dr-space-md);
+ font-family: var(--dr-font-heading);
+ font-weight: 700;
+}
+
+.section-copy {
+ color: var(--dr-text-secondary);
+ margin-bottom: var(--dr-space-md);
+ max-width: 70ch;
+}
+
+/* ────────────────────────────────────────────
+ Buttons (unused on main page but kept aligned)
+ ──────────────────────────────────────────── */
+
+.btn {
+ display: inline-block;
+ padding: var(--dr-space-sm) var(--dr-space-lg);
+ border: 2px solid var(--dark-packet);
+ background: transparent;
+ color: var(--dr-text-secondary);
+ font-family: var(--dr-font-heading);
+ font-weight: 600;
+ font-size: var(--dr-text-sm);
+ border-radius: var(--dr-radius);
+ cursor: pointer;
+ transition: transform var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast),
+ background-color var(--dr-transition-fast),
+ border-color var(--dr-transition-fast),
+ color var(--dr-transition-fast);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin: 0.25rem;
+ box-shadow: var(--dr-shadow-offset-sm),
+ var(--dr-shadow-inner-highlight);
+ text-decoration: none;
+}
+
+.btn:hover {
+ background: var(--dr-surface-elevated);
+ border-color: var(--digital-rust);
+ color: var(--dr-text-primary);
+ transform: var(--dr-press-hover);
+ box-shadow: var(--dr-shadow-hover-md),
+ var(--dr-shadow-inner-highlight);
+}
+
+.btn:active {
+ transform: var(--dr-press-active);
+ box-shadow: var(--dr-shadow-active);
+}
+
+.btn:focus-visible {
+ outline: var(--dr-focus-ring);
+ outline-offset: var(--dr-focus-ring-offset);
+}
+
+.btn-primary {
+ background: var(--digital-rust);
+ border-color: var(--digital-rust);
+ color: var(--dr-text-on-accent);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+}
+
+.btn-primary:hover {
+ background: var(--firewall-breach);
+ border-color: var(--firewall-breach);
+ color: var(--dr-text-on-accent);
+ transform: var(--dr-press-hover);
+ box-shadow: var(--dr-shadow-hover-md),
+ var(--dr-shadow-glow-sm),
+ var(--dr-shadow-inner-highlight);
+}
+
+.btn-primary:active {
+ transform: var(--dr-press-active);
+ box-shadow: var(--dr-shadow-active);
+}
+
+.btn-success {
+ border-color: var(--memory-leek);
+ color: var(--memory-leek);
+}
+
+.btn-success:hover {
+ background: var(--memory-leek);
+ border-color: var(--memory-leek);
+ color: var(--dr-surface-base);
+}
+
+.btn-warning {
+ border-color: var(--stack-overglow);
+ color: var(--stack-overglow);
+}
+
+.btn-warning:hover {
+ background: var(--stack-overglow);
+ border-color: var(--stack-overglow);
+ color: var(--dr-surface-base);
+}
+
+.btn-error {
+ border-color: var(--amber-alert);
+ color: var(--amber-alert-text);
+}
+
+.btn-error:hover {
+ background: var(--firewall-breach);
+ border-color: var(--firewall-breach);
+ color: var(--ghost-pixel);
+}
+
+.btn:disabled,
+.btn[disabled] {
+ background: var(--dr-surface-highlight);
+ border-color: var(--dr-surface-highlight);
+ color: var(--dr-text-muted, var(--dr-text-muted));
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+ opacity: 0.7;
+}
+
+/* ────────────────────────────────────────────
+ Links
+ ──────────────────────────────────────────── */
+
+a {
+ color: var(--dr-text-link);
+ text-decoration: underline;
+ text-underline-offset: 3px;
+ text-decoration-thickness: 1px;
+ transition: color var(--dr-transition-fast),
+ text-decoration-thickness var(--dr-transition-fast);
+}
+
+a:hover {
+ color: var(--dr-text-link-hover);
+ text-decoration-thickness: 2px;
+}
+
+a:visited {
+ color: var(--dr-text-link-visited);
+}
+
+a:active {
+ color: var(--digital-rust);
+}
+
+/* ────────────────────────────────────────────
+ Status messages
+ ──────────────────────────────────────────── */
+
+.status {
+ padding: var(--dr-space-md);
+ border-radius: var(--dr-radius);
+ margin: var(--dr-space-sm) 0;
+ border: var(--dr-border);
+ background: var(--dr-surface-elevated);
+}
+
+.status-success {
+ background: var(--memory-leek-10);
+ border-color: var(--memory-leek);
+ color: var(--memory-leek);
+}
+
+.status-warning {
+ background: var(--stack-overglow-10);
+ border-color: var(--stack-overglow);
+ color: var(--stack-overglow);
+}
+
+.status-error {
+ background: var(--amber-alert-10);
+ border-color: var(--amber-alert);
+ color: var(--amber-alert-text);
+}
+
+.status-info {
+ background: var(--dead-thread-10);
+ border-color: var(--dead-thread);
+ color: var(--dead-thread);
+}
+
+/* ────────────────────────────────────────────
+ Cursor & blinking
+ ──────────────────────────────────────────── */
+
+.cursor {
+ display: inline-block;
+ width: 0.6em;
+ height: 1.2em;
+ background: var(--stack-overglow);
+ vertical-align: text-bottom;
+}
+
+@keyframes blink {
+
+ 0%,
+ 50% {
+ opacity: 1;
+ }
+
+ 51%,
+ 100% {
+ opacity: 0;
+ }
+}
+
+.code,
+.code-line,
+pre,
+code {
+ hyphens: none;
+}
+
+/* ────────────────────────────────────────────
+ Glitch animation (title)
+ ──────────────────────────────────────────── */
+
+@keyframes glitch {
+ 0% {
+ text-shadow: 0 0 24px color-mix(in srgb, var(--digital-rust) 70%, transparent), -1px -1px var(--digital-rust),
+ 1px 1px var(--dead-thread);
+ transform: translate3d(0, 0, 0);
+ filter: hue-rotate(0deg) saturate(130%);
+ clip-path: inset(0 0 0 0);
+ }
+
+ 4% {
+ text-shadow: 4px -2px var(--fractured-shell), -4px 2px var(--dead-thread),
+ 0 0 32px color-mix(in srgb, var(--digital-rust) 80%, transparent);
+ transform: translate3d(-2px, 1px, 0) skewX(1deg);
+ filter: hue-rotate(-6deg) saturate(160%);
+ clip-path: inset(12% 0 28% 0);
+ }
+
+ 9% {
+ text-shadow: -6px 0 var(--memory-leek), 6px 0 var(--thermal-throttle),
+ 0 0 18px color-mix(in srgb, var(--digital-rust) 60%, transparent);
+ transform: translate3d(2px, -3px, 0) skewY(-1.5deg);
+ filter: hue-rotate(12deg) saturate(140%);
+ clip-path: inset(0 0 8% 0);
+ }
+
+ 15% {
+ text-shadow: -2px 2px var(--digital-rust), 3px -3px var(--dead-thread),
+ -1px -1px var(--fractured-shell);
+ transform: translate3d(-1px, 2px, 0) scale(1.01);
+ filter: hue-rotate(-18deg) saturate(180%);
+ clip-path: inset(32% 0 6% 0);
+ }
+
+ 24% {
+ text-shadow: 8px 2px var(--amber-alert), -8px -2px var(--dead-thread);
+ transform: translate3d(3px, -2px, 0) skewX(-1.2deg);
+ filter: hue-rotate(25deg) saturate(150%);
+ clip-path: inset(6% 0 40% 0);
+ }
+
+ 38% {
+ text-shadow: -3px 0 var(--fractured-shell), 3px 0 color-mix(in srgb, var(--memory-leek) 60%, transparent),
+ 0 0 26px color-mix(in srgb, var(--digital-rust) 90%, transparent);
+ transform: translate3d(-4px, 1px, 0) skewY(2deg);
+ filter: hue-rotate(-32deg) saturate(170%);
+ clip-path: inset(18% 0 20% 0);
+ }
+
+ 52% {
+ text-shadow: 10px -3px var(--dead-thread), -10px 3px var(--thermal-throttle),
+ 0 0 16px color-mix(in srgb, var(--digital-rust) 40%, transparent);
+ transform: translate3d(5px, -4px, 0) skewX(2deg) skewY(-1deg);
+ filter: hue-rotate(38deg) saturate(150%);
+ clip-path: inset(0 0 0 0);
+ }
+
+ 67% {
+ text-shadow: -5px -1px color-mix(in srgb, var(--fatal-error) 90%, transparent),
+ 5px 1px color-mix(in srgb, var(--dead-thread) 90%, transparent);
+ transform: translate3d(-3px, 4px, 0) scale(1.015);
+ filter: hue-rotate(-48deg) saturate(175%) contrast(115%);
+ clip-path: inset(14% 0 14% 0);
+ }
+
+ 82% {
+ text-shadow: 12px 0 color-mix(in srgb, var(--digital-rust) 90%, transparent), -12px 0 color-mix(in srgb, var(--memory-leek) 70%, transparent),
+ 0 0 40px color-mix(in srgb, var(--digital-rust) 90%, transparent);
+ transform: translate3d(6px, -2px, 0) skewX(-2deg) skewY(2deg);
+ filter: hue-rotate(54deg) saturate(210%);
+ clip-path: inset(48% 0 4% 0);
+ }
+
+ 100% {
+ text-shadow: 0 0 24px color-mix(in srgb, var(--digital-rust) 75%, transparent), -1px 1px var(--digital-rust),
+ 1px -1px var(--dead-thread);
+ transform: translate3d(0, 0, 0);
+ filter: hue-rotate(0deg) saturate(130%);
+ clip-path: inset(0 0 0 0);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ h1:hover {
+ animation: glitch 0.9s steps(2, end) infinite alternate;
+ will-change: transform, text-shadow;
+ }
+
+ .cursor {
+ animation: blink 1s infinite;
+ }
+}
+
+/* ────────────────────────────────────────────
+ Footer
+ ──────────────────────────────────────────── */
+
+footer {
+ margin-top: var(--dr-space-3xl);
+ padding-top: var(--dr-space-xl);
+ border-top: var(--dr-border);
+ text-align: center;
+ color: var(--copper-trace);
+ font-size: var(--dr-text-sm);
+}
+
+.footer-tagline {
+ margin-top: var(--dr-space-md);
+ color: var(--fatal-error);
+ font-family: var(--dr-font-heading);
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+/* ────────────────────────────────────────────
+ UI Components (Digital Rust UI Specification)
+ ──────────────────────────────────────────── */
+
+/* ── Component demo layout ── */
+.ui-components-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: var(--dr-space-lg);
+ margin-top: var(--dr-space-lg);
+}
+
+.component-panel {
+ background: var(--dr-surface-elevated);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-lg);
+}
+
+.component-panel > h3 {
+ color: var(--fatal-error);
+ font-size: var(--dr-text-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin-bottom: var(--dr-space-md);
+ border-bottom: var(--dr-border-subtle);
+ padding-bottom: var(--dr-space-sm);
+}
+
+.component-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--dr-space-sm);
+ margin-bottom: var(--dr-space-md);
+}
+
+.component-row:last-child {
+ margin-bottom: 0;
+}
+
+.component-note {
+ font-family: var(--dr-font-mono);
+ font-size: var(--dr-text-xs);
+ color: var(--dr-text-secondary);
+ margin-top: var(--dr-space-sm);
+}
+
+/* ── Inputs (recessed wells) ── */
+.dr-input,
+.dr-textarea {
+ background: var(--dr-surface-base);
+ border: 2px solid var(--dr-surface-highlight);
+ border-radius: var(--dr-radius);
+ padding: var(--dr-space-sm) 0.75rem;
+ color: var(--dr-text-primary);
+ font-family: var(--dr-font-body);
+ font-size: var(--dr-text-base);
+ font-weight: 500;
+ width: 100%;
+ transition: border-color var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast);
+}
+
+.dr-input:hover:not(:focus),
+.dr-textarea:hover:not(:focus) {
+ border-color: var(--dark-packet);
+}
+
+.dr-input:focus,
+.dr-textarea:focus {
+ outline: var(--dr-focus-ring);
+ outline-offset: var(--dr-focus-ring-offset);
+ border-color: var(--digital-rust);
+}
+
+.dr-input::placeholder,
+.dr-textarea::placeholder {
+ color: var(--dr-text-muted);
+ font-style: italic;
+}
+
+.dr-input:disabled,
+.dr-textarea:disabled {
+ border-color: transparent;
+ color: var(--dr-text-muted);
+ cursor: not-allowed;
+}
+
+.dr-input[aria-invalid="true"] {
+ border-color: var(--amber-alert);
+}
+
+.dr-textarea {
+ min-height: 96px;
+ resize: vertical;
+}
+
+.dr-field {
+ margin-bottom: var(--dr-space-md);
+}
+
+.dr-field > label {
+ display: block;
+ font-family: var(--dr-font-heading);
+ font-size: var(--dr-text-xs);
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--dr-text-secondary);
+ margin-bottom: var(--dr-space-xs);
+}
+
+.dr-field .field-error {
+ font-size: var(--dr-text-xs);
+ color: var(--amber-alert-text);
+ margin-top: var(--dr-space-xs);
+}
+
+/* ── Checkbox ── */
+.dr-checkbox {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--dr-space-sm);
+ cursor: pointer;
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+ user-select: none;
+}
+
+.dr-checkbox input {
+ appearance: none;
+ -webkit-appearance: none;
+ width: 18px;
+ height: 18px;
+ flex: 0 0 18px;
+ border: 2px solid var(--dark-packet);
+ border-radius: var(--dr-radius-sm);
+ background: var(--dr-surface-base);
+ box-shadow: var(--dr-shadow-offset-sm);
+ cursor: pointer;
+ position: relative;
+ margin: 0;
+ transition: transform var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast),
+ background-color var(--dr-transition-fast),
+ border-color var(--dr-transition-fast);
+}
+
+.dr-checkbox input:hover {
+ border-color: var(--digital-rust);
+ transform: var(--dr-press-hover);
+ box-shadow: var(--dr-shadow-hover-md);
+}
+
+.dr-checkbox input:active {
+ transform: var(--dr-press-active);
+ box-shadow: var(--dr-shadow-active);
+}
+
+.dr-checkbox input:focus-visible {
+ outline: var(--dr-focus-ring);
+ outline-offset: var(--dr-focus-ring-offset);
+}
+
+.dr-checkbox input:checked {
+ background: var(--digital-rust);
+ border-color: var(--digital-rust);
+}
+
+.dr-checkbox input:checked::after {
+ content: "✓";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--dr-text-on-accent);
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.dr-checkbox input:disabled {
+ border-color: var(--dr-surface-highlight);
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+/* ── Toggle ── */
+.dr-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--dr-space-sm);
+ cursor: pointer;
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+ user-select: none;
+}
+
+.dr-toggle input {
+ appearance: none;
+ -webkit-appearance: none;
+ width: 40px;
+ height: 22px;
+ flex: 0 0 40px;
+ background: var(--dr-surface-highlight);
+ border: 2px solid var(--dark-packet);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-sm);
+ cursor: pointer;
+ position: relative;
+ margin: 0;
+ transition: background-color var(--dr-transition-fast),
+ border-color var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast);
+}
+
+.dr-toggle input::after {
+ content: "";
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ width: 14px;
+ height: 14px;
+ background: var(--ghost-pixel);
+ border-radius: var(--dr-radius-sm);
+ box-shadow: 1px 1px 0 0 var(--dr-surface-highlight),
+ var(--dr-shadow-inner-lowlight);
+ transition: transform var(--dr-transition-fast);
+}
+
+.dr-toggle input:checked {
+ background: var(--digital-rust);
+ border-color: var(--digital-rust);
+}
+
+.dr-toggle input:checked::after {
+ transform: translateX(18px);
+}
+
+.dr-toggle input:hover {
+ border-color: var(--digital-rust);
+}
+
+.dr-toggle input:focus-visible {
+ outline: var(--dr-focus-ring);
+ outline-offset: var(--dr-focus-ring-offset);
+}
+
+/* ── Slider ── */
+.dr-slider {
+ appearance: none;
+ -webkit-appearance: none;
+ width: 100%;
+ height: 4px;
+ background: var(--dr-surface-base);
+ border: 1px solid var(--dr-surface-highlight);
+ border-radius: var(--dr-radius-sm);
+ cursor: pointer;
+}
+
+.dr-slider::-webkit-slider-thumb {
+ appearance: none;
+ -webkit-appearance: none;
+ width: 16px;
+ height: 16px;
+ background: var(--ghost-pixel);
+ border: 2px solid var(--dark-packet);
+ border-radius: var(--dr-radius-sm);
+ box-shadow: var(--dr-shadow-offset-sm),
+ var(--dr-shadow-inner-lowlight);
+ cursor: pointer;
+ transition: transform var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast);
+}
+
+.dr-slider::-webkit-slider-thumb:hover {
+ transform: var(--dr-press-hover);
+ box-shadow: var(--dr-shadow-hover-md),
+ var(--dr-shadow-inner-lowlight);
+}
+
+.dr-slider::-webkit-slider-thumb:active {
+ transform: var(--dr-press-active);
+ box-shadow: var(--dr-shadow-active);
+}
+
+.dr-slider::-moz-range-thumb {
+ width: 12px;
+ height: 12px;
+ background: var(--ghost-pixel);
+ border: 2px solid var(--dark-packet);
+ border-radius: var(--dr-radius-sm);
+ box-shadow: var(--dr-shadow-offset-sm),
+ var(--dr-shadow-inner-lowlight);
+ cursor: pointer;
+ transition: transform var(--dr-transition-fast),
+ box-shadow var(--dr-transition-fast);
+}
+
+.dr-slider::-moz-range-progress {
+ background: var(--digital-rust);
+ height: 4px;
+}
+
+.dr-slider:focus-visible {
+ outline: var(--dr-focus-ring);
+ outline-offset: 4px;
+}
+
+/* ── Tabs ── */
+.dr-tabs {
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ background: var(--dr-surface-secondary);
+ box-shadow: var(--dr-shadow-offset-sm),
+ var(--dr-shadow-inner-highlight);
+ overflow: hidden;
+}
+
+.dr-tab-bar {
+ display: flex;
+ background: var(--dr-surface-elevated);
+ border-bottom: var(--dr-border);
+}
+
+.dr-tab {
+ padding: var(--dr-space-sm) var(--dr-space-md);
+ font-family: var(--dr-font-heading);
+ font-size: var(--dr-text-xs);
+ font-weight: 600;
+ letter-spacing: 0.05em;
+ color: var(--dr-text-secondary);
+ background: transparent;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ transition: color var(--dr-transition-fast),
+ background-color var(--dr-transition-fast);
+}
+
+.dr-tab:hover {
+ color: var(--dr-text-primary);
+ background: var(--dr-surface-highlight);
+}
+
+.dr-tab[aria-selected="true"],
+.dr-tab.active {
+ background: var(--dr-surface-secondary);
+ color: var(--dr-text-primary);
+ border-bottom-color: var(--digital-rust);
+}
+
+.dr-tab-body {
+ padding: var(--dr-space-md);
+ font-family: var(--dr-font-mono);
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+}
+
+/* ── Menu ── */
+.dr-menu {
+ background: var(--dr-surface-elevated);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-xs);
+ list-style: none;
+ max-width: 260px;
+}
+
+.dr-menu li {
+ padding: var(--dr-space-xs) var(--dr-space-sm);
+ border-radius: var(--dr-radius-sm);
+ color: var(--dr-text-secondary);
+ font-size: var(--dr-text-sm);
+ cursor: pointer;
+ transition: background-color var(--dr-transition-fast),
+ color var(--dr-transition-fast);
+}
+
+.dr-menu li:hover,
+.dr-menu li[aria-selected="true"] {
+ background: var(--dr-surface-highlight);
+ color: var(--dr-text-primary);
+}
+
+.dr-menu .menu-separator {
+ margin: var(--dr-space-xs) calc(var(--dr-space-xs) * -1);
+ border-bottom: 1px solid var(--dr-surface-highlight);
+ padding: 0;
+ cursor: default;
+}
+
+.dr-menu .menu-separator:hover {
+ background: transparent;
+}
+
+/* ── Modal / dialog demo ── */
+.dr-modal-demo {
+ background: var(--dr-surface-elevated);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-lg),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-lg);
+ max-width: 380px;
+}
+
+.dr-modal-demo h4 {
+ color: var(--fatal-error);
+ font-family: var(--dr-font-heading);
+ font-size: var(--dr-text-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin-bottom: var(--dr-space-sm);
+}
+
+.dr-modal-demo p {
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+ margin-bottom: var(--dr-space-md);
+}
+
+.dr-modal-demo .modal-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--dr-space-sm);
+}
+
+/* ── Toasts ── */
+.dr-toast {
+ background: var(--bricked-board);
+ color: var(--dr-text-primary);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-sm) var(--dr-space-md);
+ font-size: var(--dr-text-sm);
+ margin-bottom: var(--dr-space-sm);
+}
+
+.dr-toast.success { border-left: 3px solid var(--memory-leek); }
+.dr-toast.warning { border-left: 3px solid var(--stack-overglow); }
+.dr-toast.error { border-left: 3px solid var(--amber-alert); }
+.dr-toast.info { border-left: 3px solid var(--dead-thread); }
+
+/* ── Tooltip ── */
+.dr-tooltip-demo {
+ display: inline-block;
+ position: relative;
+ background: var(--dr-surface-elevated);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-xs) var(--dr-space-sm);
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+ max-width: 240px;
+}
+
+/* ── Callouts ── */
+.dr-callout {
+ background: var(--dr-surface-elevated);
+ border: var(--dr-border);
+ border-radius: var(--dr-radius);
+ box-shadow: var(--dr-shadow-offset-md),
+ var(--dr-shadow-inner-highlight);
+ padding: var(--dr-space-md);
+ margin-bottom: var(--dr-space-md);
+}
+
+.dr-callout .callout-title {
+ font-family: var(--dr-font-heading);
+ font-weight: 700;
+ font-size: var(--dr-text-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--dr-text-primary);
+ margin-bottom: var(--dr-space-xs);
+}
+
+.dr-callout p {
+ font-size: var(--dr-text-sm);
+ color: var(--dr-text-secondary);
+}
+
+.dr-callout.note { border-left: 3px solid var(--dead-thread); }
+.dr-callout.note .callout-title { color: var(--dead-thread); }
+.dr-callout.warning { border-left: 3px solid var(--stack-overglow); }
+.dr-callout.warning .callout-title { color: var(--stack-overglow); }
+.dr-callout.error { border-left: 3px solid var(--amber-alert); }
+.dr-callout.error .callout-title { color: var(--amber-alert-text); }
+
+/* ── Badges (spec-compliant, supplements .badge in UI lab) ── */
+.badge.warn {
+ color: var(--stack-overglow);
+ background: var(--stack-overglow-15);
+ border: 1px solid var(--stack-overglow-30);
+}
+
+.badge.info {
+ color: var(--dead-thread);
+ background: var(--dead-thread-15);
+ border: 1px solid var(--dead-thread-30);
+}
+
+/* ── Status bar demo ── */
+.dr-statusbar {
+ display: flex;
+ gap: var(--dr-space-md);
+ background: var(--bricked-board);
+ border-top: var(--dr-border);
+ padding: var(--dr-space-xs) var(--dr-space-sm);
+ font-family: var(--dr-font-mono);
+ font-size: var(--dr-text-xs);
+ color: var(--dr-text-primary);
+ border-radius: 0 0 var(--dr-radius) var(--dr-radius);
+}
+
+.dr-statusbar .status-success { color: var(--memory-leek); }
+.dr-statusbar .status-warning { color: var(--stack-overglow); }
+.dr-statusbar .status-error { color: var(--amber-alert-text); }
+
+/* ────────────────────────────────────────────
+ Selection & Focus (design system)
+ ──────────────────────────────────────────── */
+
+::selection {
+ background: var(--digital-rust);
+ color: var(--dr-text-on-accent);
+}
+
+:focus-visible {
+ outline: 2px solid var(--stack-overglow);
+ outline-offset: 2px;
+}
+
+/* ────────────────────────────────────────────
+ Scrollbar (design system)
+ ──────────────────────────────────────────── */
+
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--dark-packet);
+ border-radius: 4px;
+ border: 2px solid var(--dr-surface-secondary);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--digital-rust);
+}
+
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--dark-packet) transparent;
+}
+
+/* ────────────────────────────────────────────
+ Small mobile / narrow viewport
+ ──────────────────────────────────────────── */
+
+@media (max-width: 480px) {
+ body {
+ padding: var(--dr-space-sm);
+ }
+
+ .container {
+ padding: 0;
+ }
+
+ h1 {
+ font-size: clamp(1.75rem, 10vw, 2.5rem);
+ letter-spacing: 0.05em;
+ }
+
+ .token-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .color-grid {
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+ }
+
+ .color-chip {
+ height: 72px;
+ }
+
+ .color-hex {
+ font-size: 0.6rem;
+ }
+
+ .ansi-grid {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+/* ────────────────────────────────────────────
+ Reduced motion (design system)
+ ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+ body::before, body::after {
+ content: none;
+ }
+
+ *, *::before, *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/src/lib/styles/normalize.css b/src/lib/styles/normalize.css
new file mode 100644
index 0000000..52a3fa9
--- /dev/null
+++ b/src/lib/styles/normalize.css
@@ -0,0 +1,290 @@
+/* Document
+ * ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+:where(html) {
+ line-height: 1.15;
+ /* 1 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+ text-size-adjust: 100%;
+ /* 2 */
+}
+
+/* Sections
+ * ========================================================================== */
+
+/**
+ * Remove the margin in all browsers. (opinionated)
+ */
+
+:where(body) {
+ margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
+ */
+
+:where(h1) {
+ font-size: 2em;
+ margin-block-end: 0.67em;
+ margin-block-start: 0.67em;
+}
+
+/* Grouping content
+ * ========================================================================== */
+
+/**
+ * Remove the margin on nested lists in Chrome, Edge, and Safari.
+ */
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+ margin-block-end: 0;
+ margin-block-start: 0;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Correct the inheritance of border color in Firefox.
+ */
+
+:where(hr) {
+ box-sizing: content-box;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+ height: 0;
+ /* 1 */
+}
+
+/* Text-level semantics
+ * ========================================================================== */
+
+/**
+ * Add the correct text decoration in Safari.
+ */
+
+:where(abbr[title]) {
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+:where(b, strong) {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+:where(code, kbd, pre, samp) {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+:where(small) {
+ font-size: 80%;
+}
+
+/* Tabular data
+ * ========================================================================== */
+
+/**
+ * 1. Correct table border color in Chrome, Edge, and Safari.
+ * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
+ */
+
+:where(table) {
+ border-color: currentColor;
+ /* 1 */
+ text-indent: 0;
+ /* 2 */
+}
+
+/* Forms
+ * ========================================================================== */
+
+/**
+ * Remove the margin on controls in Safari.
+ */
+
+:where(button, input, select) {
+ margin: 0;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+:where(button) {
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style buttons in iOS and Safari.
+ */
+
+:where(button,
+ input:is([type="button" i], [type="reset" i], [type="submit" i])) {
+ -webkit-appearance: button;
+ appearance: button;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
+ */
+
+:where(progress) {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+:where(select) {
+ text-transform: none;
+}
+
+/**
+ * Remove the margin in Firefox and Safari.
+ */
+
+:where(textarea) {
+ margin: 0;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+:where(input[type="search" i]) {
+ -webkit-appearance: textfield;
+ appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+
+/**
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/**
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+
+:where(button,
+ input:is([type="button" i],
+ [type="color" i],
+ [type="reset" i],
+ [type="submit" i]))::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+
+:where(button,
+ input:is([type="button" i],
+ [type="color" i],
+ [type="reset" i],
+ [type="submit" i]))::-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Remove the additional :invalid styles in Firefox.
+ */
+
+:where(:-moz-ui-invalid) {
+ box-shadow: none;
+}
+
+/* Interactive
+ * ========================================================================== */
+
+/*
+ * Add the correct styles in Safari.
+ */
+
+:where(dialog) {
+ background-color: white;
+ border: solid;
+ color: black;
+ height: -moz-fit-content;
+ height: fit-content;
+ left: 0;
+ margin: auto;
+ padding: 1em;
+ position: absolute;
+ right: 0;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+:where(dialog:not([open])) {
+ display: none;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+:where(summary) {
+ display: list-item;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..98ba0d8
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+
+
+{@render children()}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..cc88df0
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+Welcome to SvelteKit
+Visit svelte.dev/docs/kit to read the documentation
diff --git a/apple-touch-icon.png b/static/apple-touch-icon.png
similarity index 100%
rename from apple-touch-icon.png
rename to static/apple-touch-icon.png
diff --git a/digitalrust.webp b/static/digitalrust.webp
similarity index 100%
rename from digitalrust.webp
rename to static/digitalrust.webp
diff --git a/digitalrust2.webp b/static/digitalrust2.webp
similarity index 100%
rename from digitalrust2.webp
rename to static/digitalrust2.webp
diff --git a/digitalrust2t.webp b/static/digitalrust2t.webp
similarity index 100%
rename from digitalrust2t.webp
rename to static/digitalrust2t.webp
diff --git a/digitalrust3.webp b/static/digitalrust3.webp
similarity index 100%
rename from digitalrust3.webp
rename to static/digitalrust3.webp
diff --git a/digitalrust3t.webp b/static/digitalrust3t.webp
similarity index 100%
rename from digitalrust3t.webp
rename to static/digitalrust3t.webp
diff --git a/digitalrust4.webp b/static/digitalrust4.webp
similarity index 100%
rename from digitalrust4.webp
rename to static/digitalrust4.webp
diff --git a/digitalrust4t.webp b/static/digitalrust4t.webp
similarity index 100%
rename from digitalrust4t.webp
rename to static/digitalrust4t.webp
diff --git a/digitalrustt.webp b/static/digitalrustt.webp
similarity index 100%
rename from digitalrustt.webp
rename to static/digitalrustt.webp
diff --git a/favicon-96x96.png b/static/favicon-96x96.png
similarity index 100%
rename from favicon-96x96.png
rename to static/favicon-96x96.png
diff --git a/favicon.ico b/static/favicon.ico
similarity index 100%
rename from favicon.ico
rename to static/favicon.ico
diff --git a/favicon.svg b/static/favicon.svg
similarity index 100%
rename from favicon.svg
rename to static/favicon.svg
diff --git a/ports/DigitalRustKDE.colors b/static/ports/DigitalRustKDE.colors
similarity index 100%
rename from ports/DigitalRustKDE.colors
rename to static/ports/DigitalRustKDE.colors
diff --git a/ports/DigitalRustKate.theme b/static/ports/DigitalRustKate.theme
similarity index 100%
rename from ports/DigitalRustKate.theme
rename to static/ports/DigitalRustKate.theme
diff --git a/ports/DigitalRustKonsole.colorscheme b/static/ports/DigitalRustKonsole.colorscheme
similarity index 100%
rename from ports/DigitalRustKonsole.colorscheme
rename to static/ports/DigitalRustKonsole.colorscheme
diff --git a/ports/DigitalRustPtyxis.palette b/static/ports/DigitalRustPtyxis.palette
similarity index 100%
rename from ports/DigitalRustPtyxis.palette
rename to static/ports/DigitalRustPtyxis.palette
diff --git a/ports/DigitalRustfish.theme b/static/ports/DigitalRustfish.theme
similarity index 100%
rename from ports/DigitalRustfish.theme
rename to static/ports/DigitalRustfish.theme
diff --git a/ports/agentskill.zip b/static/ports/agentskill.zip
similarity index 100%
rename from ports/agentskill.zip
rename to static/ports/agentskill.zip
diff --git a/ports/digital-rust-ghostty b/static/ports/digital-rust-ghostty
similarity index 100%
rename from ports/digital-rust-ghostty
rename to static/ports/digital-rust-ghostty
diff --git a/ports/digitalrustpi/LICENSE b/static/ports/digitalrustpi/LICENSE
similarity index 100%
rename from ports/digitalrustpi/LICENSE
rename to static/ports/digitalrustpi/LICENSE
diff --git a/ports/digitalrustpi/README.md b/static/ports/digitalrustpi/README.md
similarity index 100%
rename from ports/digitalrustpi/README.md
rename to static/ports/digitalrustpi/README.md
diff --git a/ports/digitalrustpi/digital-rust.json b/static/ports/digitalrustpi/digital-rust.json
similarity index 100%
rename from ports/digitalrustpi/digital-rust.json
rename to static/ports/digitalrustpi/digital-rust.json
diff --git a/ports/digitalrustpi/package.json b/static/ports/digitalrustpi/package.json
similarity index 100%
rename from ports/digitalrustpi/package.json
rename to static/ports/digitalrustpi/package.json
diff --git a/ports/digitalrustpi/screenshot.webp b/static/ports/digitalrustpi/screenshot.webp
similarity index 100%
rename from ports/digitalrustpi/screenshot.webp
rename to static/ports/digitalrustpi/screenshot.webp
diff --git a/ports/vscode/.gitattributes b/static/ports/vscode/.gitattributes
similarity index 100%
rename from ports/vscode/.gitattributes
rename to static/ports/vscode/.gitattributes
diff --git a/ports/vscode/.gitignore b/static/ports/vscode/.gitignore
similarity index 100%
rename from ports/vscode/.gitignore
rename to static/ports/vscode/.gitignore
diff --git a/ports/vscode/.vscodeignore b/static/ports/vscode/.vscodeignore
similarity index 100%
rename from ports/vscode/.vscodeignore
rename to static/ports/vscode/.vscodeignore
diff --git a/ports/vscode/CHANGELOG.md b/static/ports/vscode/CHANGELOG.md
similarity index 100%
rename from ports/vscode/CHANGELOG.md
rename to static/ports/vscode/CHANGELOG.md
diff --git a/ports/vscode/LICENSE.md b/static/ports/vscode/LICENSE.md
similarity index 100%
rename from ports/vscode/LICENSE.md
rename to static/ports/vscode/LICENSE.md
diff --git a/ports/vscode/README.md b/static/ports/vscode/README.md
similarity index 100%
rename from ports/vscode/README.md
rename to static/ports/vscode/README.md
diff --git a/ports/vscode/icon.png b/static/ports/vscode/icon.png
similarity index 100%
rename from ports/vscode/icon.png
rename to static/ports/vscode/icon.png
diff --git a/ports/vscode/package.json b/static/ports/vscode/package.json
similarity index 100%
rename from ports/vscode/package.json
rename to static/ports/vscode/package.json
diff --git a/ports/vscode/screenshots/digitalrust.webp b/static/ports/vscode/screenshots/digitalrust.webp
similarity index 100%
rename from ports/vscode/screenshots/digitalrust.webp
rename to static/ports/vscode/screenshots/digitalrust.webp
diff --git a/ports/vscode/themes/Digital Rust-color-theme.json b/static/ports/vscode/themes/Digital Rust-color-theme.json
similarity index 100%
rename from ports/vscode/themes/Digital Rust-color-theme.json
rename to static/ports/vscode/themes/Digital Rust-color-theme.json
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..b6dd667
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/site.webmanifest b/static/site.webmanifest
similarity index 100%
rename from site.webmanifest
rename to static/site.webmanifest
diff --git a/wallpaper/Digital Rust.png b/static/wallpaper/Digital Rust.png
similarity index 100%
rename from wallpaper/Digital Rust.png
rename to static/wallpaper/Digital Rust.png
diff --git a/wallpaper/Digital Rust.svg b/static/wallpaper/Digital Rust.svg
similarity index 100%
rename from wallpaper/Digital Rust.svg
rename to static/wallpaper/Digital Rust.svg
diff --git a/wallpaper/Digital Rust.webp b/static/wallpaper/Digital Rust.webp
similarity index 100%
rename from wallpaper/Digital Rust.webp
rename to static/wallpaper/Digital Rust.webp
diff --git a/web-app-manifest-192x192.png b/static/web-app-manifest-192x192.png
similarity index 100%
rename from web-app-manifest-192x192.png
rename to static/web-app-manifest-192x192.png
diff --git a/web-app-manifest-512x512.png b/static/web-app-manifest-512x512.png
similarity index 100%
rename from web-app-manifest-512x512.png
rename to static/web-app-manifest-512x512.png
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a3281b0
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "$app/tsconfig",
+ "compilerOptions": {
+ "rewriteRelativeImportExtensions": true,
+ "sourceMap": true,
+ "strict": true
+ },
+ "include": ["src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..eeeb95b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,44 @@
+import adapter from '@sveltejs/adapter-static';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, type Plugin } from 'vite';
+import { toTokensCss } from './src/lib/palette.ts';
+
+const generatedTokens = fileURLToPath(new URL('./src/lib/generated/tokens.css', import.meta.url));
+
+// Keeps src/lib/generated/tokens.css in sync with src/lib/palette.ts so the
+// site has a single palette source.
+function paletteTokens(): Plugin {
+ const write = () => {
+ mkdirSync(dirname(generatedTokens), { recursive: true });
+ writeFileSync(generatedTokens, toTokensCss());
+ };
+ return {
+ name: 'digital-rust-tokens',
+ buildStart: write,
+ configureServer(server) {
+ server.watcher.add(resolve('./src/lib/palette.ts'));
+ server.watcher.on('change', (file) => {
+ if (file.endsWith('palette.ts')) write();
+ });
+ }
+ };
+}
+
+export default defineConfig({
+ plugins: [
+ paletteTokens(),
+ sveltekit({
+ compilerOptions: {
+ // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
+ runes: ({ filename }) =>
+ filename.split(/[/\\]/).includes('node_modules') ? undefined : true,
+ experimental: { async: true }
+ },
+ adapter: adapter(),
+ experimental: { remoteFunctions: true, forkPreloads: true }
+ })
+ ]
+});