From 87050925b17d7c8cdbf628ae0a5584f20bacc80e Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Thu, 2 Apr 2026 02:40:26 +0000
Subject: [PATCH] Redesign canvas page in Microsoft Windows 2000 style

- Replace all CSS tokens with Win2000 color palette (silver, navy, teal, classic 3D borders)
- Add w2k-window, w2k-titlebar, w2k-raised, w2k-sunken, w2k-btn CSS classes
- Canvas background changed to Windows 2000 teal desktop with subtle grid
- ToolPanel, SpawnPanel, ThemePanel, CanvasPresenceBar redesigned as Win2000 windows
- All node renderers (Note, Problem, Code, TestResults) get classic window chrome with title bars
- SelectionOverlay uses navy 2000-style handles and 3D raised action buttons
- Dark theme now uses Win2000 High Contrast style
- index.html: MS Sans Serif / Tahoma font stack applied globally
---
 frontend/index.html                           |   6 +-
 frontend/src/canvas/Canvas.tsx                |  10 +-
 frontend/src/canvas/CanvasPresenceBar.tsx     |  55 ++-
 frontend/src/canvas/SelectionOverlay.tsx      |  20 +-
 frontend/src/canvas/SpawnPanel.tsx            |  61 +--
 frontend/src/canvas/ThemePanel.tsx            |  30 +-
 frontend/src/canvas/ToolPanel.tsx             |  63 +--
 .../src/features/code/CodeNodeRenderer.tsx    |  32 +-
 .../src/features/note/NoteNodeRenderer.tsx    |  32 +-
 .../features/problem/ProblemNodeRenderer.tsx  | 147 ++++---
 .../test-results/TestResultsNodeRenderer.tsx  | 182 ++++----
 frontend/src/index.css                        | 395 +++++++++++++-----
 12 files changed, 690 insertions(+), 343 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e656fce..44af9de 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>LeetCanvas</title>
+    <style>
+      /* Win2000 system font stack applied globally */
+      * { font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif; }
+    </style>
     <script>
       (() => {
         try {
diff --git a/frontend/src/canvas/Canvas.tsx b/frontend/src/canvas/Canvas.tsx
index 5a82e1c..dd71d6f 100644
--- a/frontend/src/canvas/Canvas.tsx
+++ b/frontend/src/canvas/Canvas.tsx
@@ -353,15 +353,19 @@ export function Canvas({ canvasId, userId }: CanvasProps) {
       ref={viewportRef}
       className="fixed inset-0 overflow-hidden bg-(--lc-canvas-bg)"
       style={{
-        backgroundImage: `radial-gradient(circle, var(--lc-canvas-dot) ${gridDotRadiusPx}px, transparent ${gridDotRadiusPx}px)`,
-        backgroundSize: `${gridSpacingPx}px ${gridSpacingPx}px`,
+        backgroundImage: `
+          linear-gradient(rgba(0,102,102,0.4) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0,102,102,0.4) 1px, transparent 1px),
+          radial-gradient(circle, var(--lc-canvas-dot) ${gridDotRadiusPx}px, transparent ${gridDotRadiusPx}px)
+        `,
+        backgroundSize: `${gridSpacingPx * 4}px ${gridSpacingPx * 4}px, ${gridSpacingPx * 4}px ${gridSpacingPx * 4}px, ${gridSpacingPx}px ${gridSpacingPx}px`,
         backgroundPosition: `${transform.x}px ${transform.y}px`,
       }}
       onPointerDown={activeToolController.onCanvasPointerDown}
       onPointerMove={activeToolController.onCanvasPointerMove}
       onPointerUp={activeToolController.onCanvasPointerUp}
     >
-      <div className="absolute right-4 top-4 z-60 flex items-start gap-3">
+      <div className="absolute right-3 top-3 z-60 flex items-start gap-2">
         <CanvasPresenceBar users={users} localUserId={userId} />
         <ThemePanel />
         <ToolPanel
diff --git a/frontend/src/canvas/CanvasPresenceBar.tsx b/frontend/src/canvas/CanvasPresenceBar.tsx
index 2bdff43..2a0fbea 100644
--- a/frontend/src/canvas/CanvasPresenceBar.tsx
+++ b/frontend/src/canvas/CanvasPresenceBar.tsx
@@ -7,17 +7,52 @@ interface CanvasPresenceBarProps {
 
 export function CanvasPresenceBar({ users, localUserId }: CanvasPresenceBarProps) {
   return (
-    <div className="flex items-center gap-5 border border-(--lc-border-default) bg-(--lc-surface-1) p-2">
-      {users.map((user) => (
-        <div key={user.id} className="flex items-center gap-2">
+    <div
+      className="w2k-window"
+      style={{
+        minWidth: 110,
+        background: "var(--w2k-btn-face)",
+      }}
+    >
+      <div className="w2k-titlebar">
+        <span style={{ fontSize: 10 }}>👥</span>
+        <span>Users</span>
+      </div>
+      <div style={{ padding: "4px 6px", display: "flex", flexDirection: "column", gap: 2 }}>
+        {users.length === 0 && (
+          <span style={{ fontSize: 10, color: "var(--w2k-gray-text)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>
+            (no users)
+          </span>
+        )}
+        {users.map((user) => (
           <div
-            title={user.id === localUserId ? "You" : user.id}
-            className={`h-3 w-3 rounded-full ${user.id === localUserId ? "ring-1 ring-(--lc-border-strong)" : ""}`}
-            style={{ backgroundColor: user.color }}
-          />
-          <p className="text-(--lc-text-primary)">{user.id.slice(0, 5)}</p>
-        </div>
-      ))}
+            key={user.id}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 5,
+              fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif',
+              fontSize: 11,
+              background: user.id === localUserId ? "var(--w2k-selected)" : "transparent",
+              color: user.id === localUserId ? "var(--w2k-white)" : "var(--w2k-black)",
+              padding: "1px 3px",
+            }}
+          >
+            <div
+              title={user.id === localUserId ? "You" : user.id}
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                backgroundColor: user.color,
+                border: "1px solid var(--w2k-btn-dkshadow)",
+                flexShrink: 0,
+              }}
+            />
+            <span>{user.id === localUserId ? "You" : user.id.slice(0, 5)}</span>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/canvas/SelectionOverlay.tsx b/frontend/src/canvas/SelectionOverlay.tsx
index f1af8e5..5b1f1d6 100644
--- a/frontend/src/canvas/SelectionOverlay.tsx
+++ b/frontend/src/canvas/SelectionOverlay.tsx
@@ -41,7 +41,11 @@ function CornerHandle({
     top: y - outerSize / 2,
     width: outerSize,
     height: outerSize,
-    backgroundColor: LOCAL_SELECTION_COLOR,
+    backgroundColor: "#d4d0c8",
+    borderTop: "2px solid #ffffff",
+    borderLeft: "2px solid #ffffff",
+    borderBottom: "2px solid #404040",
+    borderRight: "2px solid #404040",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -60,7 +64,7 @@ function CornerHandle({
         style={{
           width: innerSize,
           height: innerSize,
-          backgroundColor: "#ffffff",
+          backgroundColor: "#000080",
         }}
       />
     </div>
@@ -81,7 +85,8 @@ function ActionIconButton({
       type="button"
       title={title}
       aria-label={title}
-      className="flex h-8 w-8 items-center justify-center border border-(--lc-border-strong) bg-(--lc-surface-1) text-(--lc-text-secondary) shadow-sm transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
+      className="w2k-btn"
+      style={{ width: 22, height: 22, minHeight: 22, padding: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11 }}
       onPointerDown={(e) => {
         e.stopPropagation();
       }}
@@ -241,7 +246,8 @@ export function SelectionOverlay({
               top: selectedNode.y * transform.zoom + transform.y,
               width: selectedNode.width * transform.zoom,
               height: selectedNode.height * transform.zoom,
-              border: `2px solid ${localSelectionColor}`,
+              border: `2px solid #000080`,
+              outline: `1px dotted #ffffff`,
             }}
           />
 
@@ -272,8 +278,12 @@ export function SelectionOverlay({
             />
 
             <div
-              className="absolute flex flex-col gap-2"
+              className="w2k-window absolute"
               style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 2,
+                padding: 3,
                 left:
                   (selectedNode.x + selectedNode.width) * transform.zoom +
                   transform.x +
diff --git a/frontend/src/canvas/SpawnPanel.tsx b/frontend/src/canvas/SpawnPanel.tsx
index 08d9454..27fffa9 100644
--- a/frontend/src/canvas/SpawnPanel.tsx
+++ b/frontend/src/canvas/SpawnPanel.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { IconShare3 } from "@tabler/icons-react";
 import type { NodeType } from "../shared/nodes";
 import { NODE_CONTROL_OPTIONS } from "./ui/controlOptions";
 
@@ -8,52 +7,56 @@ interface SpawnPanelProps {
 }
 
 export function SpawnPanel({ onSpawn }: SpawnPanelProps) {
-  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">(
-    "idle",
-  );
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle");
 
   async function handleShareCanvas() {
     const link = window.location.href;
-
     try {
       await navigator.clipboard.writeText(link);
       setCopyState("copied");
     } catch {
       setCopyState("failed");
     }
-
-    window.setTimeout(() => {
-      setCopyState("idle");
-    }, 1200);
+    window.setTimeout(() => setCopyState("idle"), 1200);
   }
 
   return (
-    <div className="flex flex-col gap-1">
-      <div className="flex flex-col gap-2 border border-(--lc-border-default) bg-(--lc-surface-1) p-3">
-        <div className="text-xs font-semibold text-(--lc-text-secondary)">Add node</div>
-        {NODE_CONTROL_OPTIONS.map(({ type, label, Icon }) => (
+    <div className="w2k-window" style={{ minWidth: 130 }}>
+      <div className="w2k-titlebar">
+        <span style={{ fontSize: 10 }}>📋</span>
+        <span>Add Node</span>
+      </div>
+      <div style={{ padding: "6px", display: "flex", flexDirection: "column", gap: 3 }}>
+        {NODE_CONTROL_OPTIONS.map(({ type, label }) => (
           <button
             key={type}
             onClick={() => onSpawn(type)}
-            className="flex items-center gap-2 border border-(--lc-border-default) px-3 py-2 text-left text-sm text-(--lc-text-secondary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
+            className="w2k-btn"
+            style={{ textAlign: "left", width: "100%" }}
           >
-            <Icon size={16} stroke={1.8} />
-            <span>{label}</span>
+            {label}
           </button>
         ))}
-      </div>
-
-      <button
-        onClick={handleShareCanvas}
-        className="mt-1 flex items-center gap-2 border border-(--lc-border-default) bg-(--lc-surface-1) px-3 py-2 text-left text-sm text-(--lc-text-secondary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
-      >
-        <IconShare3 size={16} stroke={1.8} />
-        <span>Share Canvas</span>
-      </button>
-      <div className="text-[10px] text-(--lc-text-muted)">
-        {copyState === "copied" && "Link copied"}
-        {copyState === "failed" && "Clipboard blocked"}
-        {copyState === "idle" && "Copy join link"}
+        <hr className="w2k-separator" />
+        <button
+          onClick={handleShareCanvas}
+          className="w2k-btn"
+          style={{ textAlign: "left", width: "100%" }}
+        >
+          Share Canvas...
+        </button>
+        <div
+          style={{
+            fontSize: 10,
+            color: "var(--w2k-gray-text)",
+            fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif',
+            minHeight: 14,
+          }}
+        >
+          {copyState === "copied" && "✓ Link copied to clipboard"}
+          {copyState === "failed" && "✗ Clipboard blocked"}
+          {copyState === "idle" && "\u00a0"}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/canvas/ThemePanel.tsx b/frontend/src/canvas/ThemePanel.tsx
index 9d392e2..9af544c 100644
--- a/frontend/src/canvas/ThemePanel.tsx
+++ b/frontend/src/canvas/ThemePanel.tsx
@@ -1,4 +1,3 @@
-import { IconMoon, IconSun } from "@tabler/icons-react";
 import { useTheme } from "../theme/useTheme";
 
 export function ThemePanel() {
@@ -6,18 +5,23 @@ export function ThemePanel() {
   const isDark = theme === "dark";
 
   return (
-    <div className="flex flex-col gap-2 border border-(--lc-border-default) bg-(--lc-surface-1) p-3">
-      <div className="text-xs font-semibold text-(--lc-text-secondary)">Theme</div>
-      <button
-        type="button"
-        aria-pressed={isDark}
-        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-        onClick={toggleTheme}
-        className="flex items-center gap-2 border border-(--lc-border-default) bg-(--lc-surface-2) px-3 py-1.5 text-sm text-(--lc-text-secondary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
-      >
-        {isDark ? <IconSun size={15} stroke={1.8} /> : <IconMoon size={15} stroke={1.8} />}
-        <span>{isDark ? "Dark" : "Light"}</span>
-      </button>
+    <div className="w2k-window" style={{ minWidth: 110 }}>
+      <div className="w2k-titlebar">
+        <span style={{ fontSize: 10 }}>🎨</span>
+        <span>Display</span>
+      </div>
+      <div style={{ padding: "6px" }}>
+        <button
+          type="button"
+          aria-pressed={isDark}
+          aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+          onClick={toggleTheme}
+          className="w2k-btn"
+          style={{ width: "100%" }}
+        >
+          {isDark ? "Light Mode" : "Dark Mode"}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/canvas/ToolPanel.tsx b/frontend/src/canvas/ToolPanel.tsx
index 724939b..bc7d60d 100644
--- a/frontend/src/canvas/ToolPanel.tsx
+++ b/frontend/src/canvas/ToolPanel.tsx
@@ -9,38 +9,41 @@ interface Props {
 
 export function ToolPanel({ tool, onToolChange, thickness, onThicknessChange }: Props) {
   return (
-    <div className="flex flex-col gap-2 border border-(--lc-border-default) bg-(--lc-surface-1) p-3">
-      <div className="text-xs font-semibold text-(--lc-text-secondary)">Tool</div>
-      <div className="flex gap-1">
-        {TOOL_CONTROL_OPTIONS.map(({ tool: optionTool, label, Icon }) => (
-          <button
-            key={optionTool}
-            type="button"
-            onClick={() => onToolChange(optionTool)}
-            className={`flex items-center gap-2 border px-3 py-1.5 text-sm transition ${
-              tool === optionTool
-                ? "border-(--lc-border-focus) bg-(--lc-surface-3) text-(--lc-accent)"
-                : "border-(--lc-border-default) text-(--lc-text-secondary) hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
-            }`}
-          >
-            <Icon size={15} stroke={1.8} />
-            <span>{label}</span>
-          </button>
-        ))}
+    <div className="w2k-window" style={{ minWidth: 140 }}>
+      <div className="w2k-titlebar">
+        <span style={{ fontSize: 10 }}>🖱</span>
+        <span>Tools</span>
       </div>
-      {tool === "draw" && (
-        <div className="flex flex-col gap-1">
-          <div className="text-[10px] text-(--lc-text-muted)">Thickness: {thickness}</div>
-          <input
-            type="range"
-            min={1}
-            max={10}
-            value={thickness}
-            className="w-full"
-            onChange={(e) => onThicknessChange(Number(e.target.value))}
-          />
+      <div style={{ padding: "6px 6px 6px 6px", display: "flex", flexDirection: "column", gap: 4 }}>
+        <div style={{ display: "flex", gap: 3 }}>
+          {TOOL_CONTROL_OPTIONS.map(({ tool: optionTool, label }) => (
+            <button
+              key={optionTool}
+              type="button"
+              onClick={() => onToolChange(optionTool)}
+              className={`w2k-btn${tool === optionTool ? " active" : ""}`}
+              style={{ flex: 1 }}
+            >
+              {label}
+            </button>
+          ))}
         </div>
-      )}
+        {tool === "draw" && (
+          <div style={{ marginTop: 4 }}>
+            <div className="w2k-label" style={{ fontSize: 10, marginBottom: 2 }}>
+              Thickness: {thickness}
+            </div>
+            <input
+              type="range"
+              min={1}
+              max={10}
+              value={thickness}
+              style={{ width: "100%" }}
+              onChange={(e) => onThicknessChange(Number(e.target.value))}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/features/code/CodeNodeRenderer.tsx b/frontend/src/features/code/CodeNodeRenderer.tsx
index d4f09fa..1222c88 100644
--- a/frontend/src/features/code/CodeNodeRenderer.tsx
+++ b/frontend/src/features/code/CodeNodeRenderer.tsx
@@ -306,31 +306,43 @@ export function CodeNodeRenderer({
 
   return (
     <div
-      className="absolute cursor-grab select-none border border-(--lc-border-default) bg-(--lc-surface-1) active:cursor-grabbing"
-      style={{ left: node.x, top: node.y, width: node.width }}
+      className="w2k-window absolute cursor-grab select-none active:cursor-grabbing"
+      style={{ left: node.x, top: node.y, width: node.width, display: "flex", flexDirection: "column" }}
       onPointerDown={(e) => onPointerDown(e, node)}
     >
-      <div className="flex items-center justify-between border-b border-(--lc-border-default) p-2">
-        <span className="text-xs font-semibold text-(--lc-text-secondary)">Code</span>
-        <div className="flex items-center gap-2">
+      {/* Win2000 title bar */}
+      <div className="w2k-titlebar" style={{ justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+          <span style={{ fontSize: 10 }}>💻</span>
+          <span>Code Editor</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
           {canRun && (
             <button
               type="button"
-              className="rounded border border-(--lc-border-default) bg-(--lc-surface-3) px-2 py-1 text-[10px] font-semibold text-(--lc-text-primary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent) disabled:opacity-50"
+              className="w2k-btn"
+              style={{ fontSize: 10, padding: "1px 6px", minHeight: 16 }}
               onPointerDown={(e) => e.stopPropagation()}
               onClick={handleRunClick}
               disabled={isRunning}
             >
-              {isRunning ? "Running…" : "Run"}
+              {isRunning ? "Running..." : "▶ Run"}
             </button>
           )}
-          <span className="text-[10px] text-(--lc-text-muted)">{node.data.language}</span>
+          <span style={{ fontSize: 10, fontWeight: "normal", color: "#aaddff" }}>{node.data.language}</span>
         </div>
       </div>
+      {/* Editor body */}
       <div
         ref={containerRef}
-        className="overflow-auto text-sm"
-        style={{ height: node.height - 40 }}
+        className="w2k-sunken"
+        style={{
+          height: node.height - 26,
+          overflow: "auto",
+          fontSize: 12,
+          background: "#ffffff",
+          margin: 3,
+        }}
         onPointerDown={(e) => e.stopPropagation()}
       />
     </div>
diff --git a/frontend/src/features/note/NoteNodeRenderer.tsx b/frontend/src/features/note/NoteNodeRenderer.tsx
index 1c84d75..06bff22 100644
--- a/frontend/src/features/note/NoteNodeRenderer.tsx
+++ b/frontend/src/features/note/NoteNodeRenderer.tsx
@@ -11,13 +11,6 @@ interface Props {
   onTextEdits: (nodeId: string, edits: TextEdit[]) => void;
 }
 
-/**
- * Computes one minimal replacement edit from previous -> next string.
- *
- * Why one edit?
- * Textarea onChange provides full value snapshots, not granular operations.
- * We derive a prefix/suffix diff so CRDT still receives position-based edits.
- */
 function diffToSingleEdit(prev: string, next: string): TextEdit[] {
   if (prev === next) return [];
 
@@ -49,25 +42,40 @@ export function NoteNodeRenderer({ node, onPointerDown, onTextEdits }: Props) {
 
   return (
     <div
-      className="absolute cursor-grab select-none border border-(--lc-border-default) bg-(--lc-surface-1) p-3 active:cursor-grabbing"
+      className="w2k-window absolute cursor-grab select-none active:cursor-grabbing"
       style={{
         left: node.x,
         top: node.y,
         width: node.width,
         height: node.height,
+        display: "flex",
+        flexDirection: "column",
       }}
       onPointerDown={(e) => onPointerDown(e, node)}
     >
-      <div className="mb-2 text-xs font-semibold text-(--lc-text-secondary)">Note</div>
+      {/* Win2000 title bar */}
+      <div className="w2k-titlebar" style={{ flexShrink: 0 }}>
+        <span style={{ fontSize: 10 }}>📝</span>
+        <span>Note</span>
+      </div>
+      {/* Content */}
       <div
-        className="h-full"
-        style={{ height: node.height - 50 }} // subtract header + padding
+        style={{ flex: 1, padding: 4, minHeight: 0 }}
         onPointerDown={(e) => e.stopPropagation()}
       >
         <textarea
           placeholder="Write a note..."
           value={node.data.content}
-          className="h-full w-full resize-none border border-(--lc-border-default) bg-(--lc-surface-2) p-2 text-sm text-(--lc-text-primary) outline-none placeholder:text-(--lc-text-muted)"
+          className="w2k-input"
+          style={{
+            width: "100%",
+            height: "100%",
+            resize: "none",
+            fontSize: 11,
+            fontFamily: '"MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif',
+            background: "#ffffff",
+            boxSizing: "border-box",
+          }}
           onChange={(e) => {
             const next = e.target.value;
             const edits = diffToSingleEdit(lastTextRef.current, next);
diff --git a/frontend/src/features/problem/ProblemNodeRenderer.tsx b/frontend/src/features/problem/ProblemNodeRenderer.tsx
index e0e771e..b819532 100644
--- a/frontend/src/features/problem/ProblemNodeRenderer.tsx
+++ b/frontend/src/features/problem/ProblemNodeRenderer.tsx
@@ -97,147 +97,190 @@ export function ProblemNodeRenderer({
     }
   }
 
-  const base =
-    "absolute select-none border border-(--lc-border-default) bg-(--lc-surface-1) p-3";
-
   const handleMouseEnter = () => setIsHovering(true);
   const handleMouseLeave = () => setIsHovering(false);
   const handleAddNode = () => setShowAddNodePanel(true);
   const handleCloseAddNodePanel = () => setShowAddNodePanel(false);
-  // ── empty / error: URL input ─────────────────────────────────────────────
 
   if (node.data.status === "empty" || node.data.status === "error") {
     const error = node.data.status === "error" ? node.data.message : null;
     return (
       <div
-        className={`${base} cursor-grab active:cursor-grabbing flex flex-col`}
+        className="w2k-window absolute cursor-grab select-none active:cursor-grabbing"
         style={{
           left: node.x,
           top: node.y,
           width: node.width,
           height: node.height,
+          display: "flex",
+          flexDirection: "column",
         }}
         onPointerDown={(e) => onPointerDown(e, node)}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
-        <div className="mb-2 text-xs font-semibold text-(--lc-text-secondary)">Problem</div>
-        {/* Stop pointer-down so typing in the input doesn't start a drag */}
+        <div className="w2k-titlebar" style={{ flexShrink: 0 }}>
+          <span style={{ fontSize: 10 }}>🧩</span>
+          <span>Problem</span>
+        </div>
         <div
-          className="flex-1 min-h-0"
+          style={{ padding: 6, flex: 1, minHeight: 0 }}
           onPointerDown={(e) => e.stopPropagation()}
         >
           <input
             type="text"
-            className="w-full border border-(--lc-border-strong) bg-(--lc-surface-2) px-2 py-1 text-xs text-(--lc-text-primary) outline-none placeholder:text-(--lc-text-muted)"
+            className="w2k-input"
+            style={{ width: "100%", fontSize: 11, boxSizing: "border-box" }}
             placeholder="https://leetcode.com/problems/two-sum/"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && handleCreate()}
           />
           <button
-            className="mt-2 w-full border border-(--lc-border-default) bg-(--lc-surface-3) py-1 text-xs text-(--lc-text-primary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent) disabled:opacity-40"
+            className="w2k-btn"
+            style={{ marginTop: 6, width: "100%" }}
             onClick={handleCreate}
             disabled={loading || url.trim() === ""}
           >
-            {loading ? "Loading…" : "Create"}
+            {loading ? "Loading..." : "Open"}
           </button>
-          {error && <div className="mt-1 text-xs text-(--lc-danger)">{error}</div>}
+          {error && (
+            <div style={{ marginTop: 4, fontSize: 10, color: "var(--w2k-red)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>
+              {error}
+            </div>
+          )}
         </div>
       </div>
     );
   }
 
-  // ── loaded: problem details ───────────────────────────────────────────────
-
-  const { title, difficulty, content, tags, likes, dislikes, stats } =
-    node.data;
+  const { title, difficulty, content, tags, likes, dislikes, stats } = node.data;
   const parsedStats = parseStats(stats);
 
+  const diffColor =
+    difficulty === "Easy" ? "var(--w2k-green)" :
+    difficulty === "Hard" ? "var(--w2k-red)" :
+    "var(--w2k-yellow)";
+
   return (
     <div
       ref={loadedRootRef}
-      className={`${base} cursor-grab active:cursor-grabbing`}
-      style={{ left: node.x, top: node.y, width: node.width }}
+      className="w2k-window absolute cursor-grab select-none active:cursor-grabbing"
+      style={{ left: node.x, top: node.y, width: node.width, display: "flex", flexDirection: "column" }}
       onPointerDown={(e) => onPointerDown(e, node)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <div className="flex items-baseline justify-between mb-1">
-        <div className="text-sm font-medium text-(--lc-text-primary)">{title}</div>
-        <div className={`text-xs ml-2 shrink-0 ${difficultyClass(difficulty)}`}>
-          {difficulty}
+      {/* Title bar */}
+      <div className="w2k-titlebar" style={{ flexShrink: 0, justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+          <span style={{ fontSize: 10 }}>🧩</span>
+          <span>{title}</span>
         </div>
+        <span style={{ fontSize: 10, fontWeight: "normal", color: "#aaddff" }}>{difficulty}</span>
       </div>
 
-      {tags.length > 0 && (
-        <div className="flex flex-wrap gap-1 mb-2">
+      <div style={{ padding: "4px 6px 6px 6px", background: "var(--w2k-btn-face)" }}>
+        {/* Difficulty badge */}
+        <div style={{ marginBottom: 4, display: "flex", gap: 4, flexWrap: "wrap" }}>
+          <span style={{
+            display: "inline-block",
+            padding: "0 6px",
+            fontSize: 10,
+            fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif',
+            color: "var(--w2k-white)",
+            background: diffColor,
+          }}>
+            {difficulty}
+          </span>
           {tags.map((t) => (
             <span
               key={t.id}
-              className="border border-(--lc-border-default) px-1 text-[10px] text-(--lc-text-secondary)"
+              className="w2k-statusbar"
+              style={{ fontSize: 10, padding: "0 4px" }}
             >
               {t.name}
             </span>
           ))}
         </div>
-      )}
 
-      {/* Render HTML content directly — safe since it's from our own DB */}
-      <div
-        className="mb-2 min-h-0 flex-1 overflow-y-auto text-xs leading-relaxed text-(--lc-text-secondary) [&_a]:text-(--lc-link) [&_code]:bg-(--lc-surface-2) [&_code]:px-1 [&_code]:text-(--lc-text-secondary) [&_ol]:list-decimal [&_ol]:pl-4 [&_pre]:overflow-x-auto [&_pre]:bg-(--lc-surface-2) [&_pre]:p-2 [&_strong]:text-(--lc-text-primary) [&_ul]:list-disc [&_ul]:pl-4"
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
+        {/* Content — rendered HTML from LeetCode */}
+        <div
+          className="w2k-sunken"
+          style={{
+            padding: "4px 6px",
+            maxHeight: 280,
+            overflowY: "auto",
+            background: "#ffffff",
+            fontSize: 11,
+            lineHeight: 1.5,
+            fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif',
+            color: "var(--w2k-black)",
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          // Safe — content from our own DB
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
 
-      <div className="flex gap-3 text-[10px] text-(--lc-text-muted)">
-        <span>▲ {likes}</span>
-        <span>▼ {dislikes}</span>
-        {parsedStats && <span>✓ {parsedStats.acRate}</span>}
+        {/* Stats row */}
+        <div style={{ marginTop: 4, display: "flex", gap: 8, fontSize: 10, fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif', color: "var(--w2k-gray-text)" }}>
+          <span>▲ {likes}</span>
+          <span>▼ {dislikes}</span>
+          {parsedStats && <span>✓ {parsedStats.acRate}</span>}
+        </div>
       </div>
 
-      {/* Extends hover area below the node so the button doesn't flicker */}
+      {/* Hover add-node area */}
       <div
         className="absolute bottom-2 left-0 right-0 translate-y-full"
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {/* Transparent bridge so mouse doesn't leave the hover zone */}
         <div className="h-1" />
         {isHovering && !showAddNodePanel && (
-          <div className="flex justify-center">
-            <button
-              className="flex items-center gap-1 border border-(--lc-border-default) bg-(--lc-surface-1) px-3 py-1 text-[10px] text-(--lc-text-secondary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
-              onClick={handleAddNode}
-            >
-              <IconPlus size={12} stroke={2} />
-              <span>Add node</span>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <button className="w2k-btn" style={{ fontSize: 10, display: "flex", alignItems: "center", gap: 3 }} onClick={handleAddNode}>
+              <IconPlus size={11} stroke={2} />
+              Add node
             </button>
           </div>
         )}
 
         {showAddNodePanel && (
           <div
-            className="relative mt-2 border border-(--lc-border-strong) bg-(--lc-surface-2) p-2 text-xs"
+            className="w2k-window"
+            style={{ marginTop: 4, padding: 6, position: "relative" }}
             onPointerDown={(e) => e.stopPropagation()}
           >
             <button
               onClick={handleCloseAddNodePanel}
-              className="absolute right-1 top-1 text-(--lc-text-muted) transition hover:text-(--lc-text-secondary)"
+              style={{
+                position: "absolute",
+                top: 2,
+                right: 2,
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--w2k-gray-text)",
+                fontSize: 11,
+                lineHeight: 1,
+                padding: 2,
+              }}
               aria-label="Close add node panel"
             >
-              <IconX size={12} stroke={2} />
+              <IconX size={11} stroke={2} />
             </button>
-            <div className="flex gap-2 pr-4">
-              {NODE_CONTROL_OPTIONS.map(({ type, label, Icon }) => (
+            <div style={{ display: "flex", gap: 4, paddingRight: 16 }}>
+              {NODE_CONTROL_OPTIONS.map(({ type, label }) => (
                 <button
                   key={type}
                   onClick={() => {
                     onSpawn(type, node.id);
                     handleCloseAddNodePanel();
                   }}
-                  className="flex items-center gap-1 border border-(--lc-border-default) bg-(--lc-surface-1) px-2 py-1 text-(--lc-text-secondary) transition hover:border-(--lc-border-focus) hover:text-(--lc-accent)"
+                  className="w2k-btn"
+                  style={{ fontSize: 10 }}
                 >
-                  <Icon size={13} stroke={1.8} />
-                  <span>{label}</span>
+                  {label}
                 </button>
               ))}
             </div>
diff --git a/frontend/src/features/test-results/TestResultsNodeRenderer.tsx b/frontend/src/features/test-results/TestResultsNodeRenderer.tsx
index a684715..8e11638 100644
--- a/frontend/src/features/test-results/TestResultsNodeRenderer.tsx
+++ b/frontend/src/features/test-results/TestResultsNodeRenderer.tsx
@@ -29,19 +29,16 @@ function CaseTab({
   onClick?: () => void;
 }) {
   const indicator =
-    passed === true ? <span className="text-(--lc-success)">✓</span>
-    : passed === false ? <span className="text-(--lc-danger)">✕</span>
+    passed === true ? <span style={{ color: "var(--w2k-green)" }}>✓</span>
+    : passed === false ? <span style={{ color: "var(--w2k-red)" }}>✕</span>
     : null;
 
   return (
     <button
       type="button"
       onClick={onClick}
-      className={`flex items-center gap-1 border px-2 py-0.5 text-[10px] font-semibold ${
-        active
-          ? "border-(--lc-border-strong) bg-(--lc-surface-3) text-(--lc-text-primary)"
-          : "border-(--lc-border-default) bg-transparent text-(--lc-text-secondary)"
-      }`}
+      className={`w2k-btn${active ? " active" : ""}`}
+      style={{ fontSize: 10, display: "flex", alignItems: "center", gap: 3, padding: "1px 6px", minHeight: 18 }}
       disabled={!onClick}
     >
       {indicator}
@@ -52,9 +49,19 @@ function CaseTab({
 
 function ValueBlock({ label, value }: { label: string; value: string | null }) {
   return (
-    <div className="mb-3">
-      <div className="mb-1 text-[10px] font-semibold text-(--lc-text-muted)">{label}</div>
-      <div className="whitespace-pre-wrap border border-(--lc-border-default) bg-(--lc-surface-2) p-2 font-mono text-xs text-(--lc-text-primary)">
+    <div style={{ marginBottom: 8 }}>
+      <div style={{ marginBottom: 2, fontSize: 10, fontWeight: "bold", color: "var(--w2k-gray-text)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>{label}</div>
+      <div
+        className="w2k-sunken"
+        style={{
+          padding: "3px 5px",
+          fontFamily: "Consolas, Courier New, monospace",
+          fontSize: 11,
+          whiteSpace: "pre-wrap",
+          background: "#ffffff",
+          color: "var(--w2k-black)",
+        }}
+      >
         {panel(value)}
       </div>
     </div>
@@ -89,71 +96,90 @@ export function TestResultsNodeRenderer({ node, onPointerDown, onUpdate }: Props
     : null;
 
   const statusColor =
-    accepted ? "text-(--lc-success)"
-    : isError ? "text-(--lc-danger)"
-    : "text-(--lc-warning)";
+    accepted ? "var(--w2k-green)"
+    : isError ? "var(--w2k-red)"
+    : "var(--w2k-yellow)";
 
   return (
     <div
-      className="absolute cursor-grab select-none overflow-hidden border border-(--lc-border-default) bg-(--lc-surface-1) active:cursor-grabbing"
-      style={{ left: node.x, top: node.y, width: node.width, height: node.height }}
+      className="w2k-window absolute cursor-grab select-none active:cursor-grabbing"
+      style={{
+        left: node.x,
+        top: node.y,
+        width: node.width,
+        height: node.height,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
       onPointerDown={(e) => onPointerDown(e, node)}
     >
-      {/* Header — mode tabs */}
-      <div className="flex items-center justify-between border-b border-(--lc-border-default) p-2">
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            className={`text-xs font-semibold ${
-              data.mode === "testcase"
-                ? "text-(--lc-text-primary)"
-                : "text-(--lc-text-muted)"
-            }`}
-            onPointerDown={(e) => e.stopPropagation()}
-            onClick={() => updateResultsData(node, onUpdate, { mode: "testcase" })}
-          >
-            Testcase
-          </button>
-          <span className="text-(--lc-text-muted)">|</span>
-          <button
-            type="button"
-            className={`text-xs font-semibold ${
-              data.mode === "result"
-                ? "text-(--lc-text-primary)"
-                : "text-(--lc-text-muted)"
-            }`}
-            onPointerDown={(e) => e.stopPropagation()}
-            onClick={() => updateResultsData(node, onUpdate, { mode: "result" })}
-          >
-            Test Result
-          </button>
+      {/* Title bar */}
+      <div className="w2k-titlebar" style={{ justifyContent: "space-between", flexShrink: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+          <span style={{ fontSize: 10 }}>📊</span>
+          <span>Test Results</span>
         </div>
         {statusLabel && (
-          <span className={`text-[10px] font-semibold ${statusColor}`}>{statusLabel}</span>
+          <span style={{ fontSize: 10, fontWeight: "normal", color: statusColor === "var(--w2k-yellow)" ? "#ffdd44" : "#ffffff", background: statusColor === "var(--w2k-yellow)" ? "transparent" : statusColor, padding: "0 4px" }}>
+            {statusLabel}
+          </span>
         )}
       </div>
 
+      {/* Mode tabs — Win2000 tab strip style */}
+      <div
+        style={{
+          display: "flex",
+          gap: 2,
+          padding: "4px 6px 0 6px",
+          background: "var(--w2k-btn-face)",
+          borderBottom: "1px solid var(--w2k-btn-shadow)",
+          flexShrink: 0,
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <button
+          type="button"
+          className={`w2k-btn${data.mode === "testcase" ? " active" : ""}`}
+          style={{ fontSize: 11, minHeight: 20 }}
+          onClick={() => updateResultsData(node, onUpdate, { mode: "testcase" })}
+        >
+          Testcase
+        </button>
+        <button
+          type="button"
+          className={`w2k-btn${data.mode === "result" ? " active" : ""}`}
+          style={{ fontSize: 11, minHeight: 20 }}
+          onClick={() => updateResultsData(node, onUpdate, { mode: "result" })}
+        >
+          Test Result
+        </button>
+      </div>
+
       {/* Body */}
       <div
-        className="h-[calc(100%-33px)] overflow-y-auto p-3"
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "6px 6px",
+          background: "var(--w2k-btn-face)",
+          minHeight: 0,
+        }}
         onPointerDown={(e) => e.stopPropagation()}
       >
-        {/* Case selector row — shared between both modes */}
+        {/* Case tabs */}
         {hasCases && (
-          <div className="mb-3 max-h-[3.25rem] overflow-y-auto overflow-x-hidden pr-1">
-            <div className="flex flex-wrap content-start gap-1">
-              {data.cases.map((c, idx) => (
-                <CaseTab
-                  key={idx}
-                  label={`Case ${idx + 1}`}
-                  active={idx === data.selectedCaseIndex}
-                  passed={data.mode === "result" ? c.passed : null}
-                  onClick={() =>
-                    updateResultsData(node, onUpdate, { selectedCaseIndex: idx })
-                  }
-                />
-              ))}
-            </div>
+          <div style={{ marginBottom: 8, maxHeight: 52, overflowY: "auto", display: "flex", flexWrap: "wrap", gap: 3 }}>
+            {data.cases.map((c, idx) => (
+              <CaseTab
+                key={idx}
+                label={`Case ${idx + 1}`}
+                active={idx === data.selectedCaseIndex}
+                passed={data.mode === "result" ? c.passed : null}
+                onClick={() => updateResultsData(node, onUpdate, { selectedCaseIndex: idx })}
+              />
+            ))}
           </div>
         )}
 
@@ -161,24 +187,37 @@ export function TestResultsNodeRenderer({ node, onPointerDown, onUpdate }: Props
         {data.mode === "testcase" && (
           <>
             {!hasCases && (
-              <p className="text-xs text-(--lc-text-muted)">Run to see test cases.</p>
-            )}
-            {selected && (
-              <ValueBlock label="Input" value={selected.input} />
+              <p style={{ fontSize: 11, color: "var(--w2k-gray-text)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>
+                Run to see test cases.
+              </p>
             )}
+            {selected && <ValueBlock label="Input" value={selected.input} />}
           </>
         )}
 
-        {/* Result mode — running */}
+        {/* Result mode - running */}
         {data.mode === "result" && running && (
-          <p className="text-xs text-(--lc-text-secondary)">Running…</p>
+          <p style={{ fontSize: 11, color: "var(--w2k-gray-text)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>
+            Running...
+          </p>
         )}
 
-        {/* Result mode — done */}
+        {/* Result mode - done */}
         {data.mode === "result" && !running && (
           <>
             {isError && data.errorMessage && (
-              <div className="mb-3 whitespace-pre-wrap border border-(--lc-danger) bg-(--lc-danger-bg-soft) p-2 font-mono text-xs text-(--lc-danger)">
+              <div
+                className="w2k-sunken"
+                style={{
+                  marginBottom: 8,
+                  whiteSpace: "pre-wrap",
+                  padding: "4px 6px",
+                  fontFamily: "Consolas, Courier New, monospace",
+                  fontSize: 11,
+                  color: "var(--w2k-red)",
+                  background: "#fff0f0",
+                }}
+              >
                 {data.errorMessage}
               </div>
             )}
@@ -200,7 +239,8 @@ export function TestResultsNodeRenderer({ node, onPointerDown, onUpdate }: Props
                 {isError && (
                   <button
                     type="button"
-                    className="text-[10px] text-(--lc-text-secondary) transition hover:text-(--lc-accent)"
+                    className="w2k-btn"
+                    style={{ fontSize: 10 }}
                     onClick={() => updateResultsData(node, onUpdate, { mode: "testcase" })}
                   >
                     Open Testcase ↗
@@ -210,7 +250,9 @@ export function TestResultsNodeRenderer({ node, onPointerDown, onUpdate }: Props
             )}
 
             {!hasCases && !running && (
-              <p className="text-xs text-(--lc-text-muted)">No results yet.</p>
+              <p style={{ fontSize: 11, color: "var(--w2k-gray-text)", fontFamily: '"MS Sans Serif", Tahoma, Arial, sans-serif' }}>
+                No results yet.
+              </p>
             )}
           </>
         )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 16b56ed..611bdaa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,117 +1,296 @@
 @import "tailwindcss";
 
+/* ─── Windows 2000 / Classic Windows Design System ─────────────────────── */
+
 :root {
-  /* Primitive tokens */
-  --lc-neutral-0: #fffdf8;
-  --lc-neutral-50: #faf5ec;
-  --lc-neutral-100: #f5efe4;
-  --lc-neutral-200: #e9dece;
-  --lc-neutral-300: #dbcdb9;
-  --lc-neutral-400: #c8b59b;
-  --lc-neutral-500: #a89276;
-  --lc-neutral-600: #88745d;
-  --lc-neutral-700: #6c5a48;
-  --lc-neutral-800: #504235;
-  --lc-neutral-900: #362d24;
-
-  --lc-accent-500: #3a7cf2;
-  --lc-accent-600: #2f6de0;
-  --lc-success-500: #16a34a;
-  --lc-warning-500: #ca8a04;
-  --lc-danger-500: #dc2626;
-
-  /* Semantic tokens */
-  --lc-canvas-bg: var(--lc-neutral-50);
-  --lc-canvas-dot: var(--lc-neutral-300);
-
-  --lc-surface-1: var(--lc-neutral-0);
-  --lc-surface-2: var(--lc-neutral-100);
-  --lc-surface-3: var(--lc-neutral-200);
-
-  --lc-text-primary: var(--lc-neutral-900);
-  --lc-text-secondary: var(--lc-neutral-700);
-  --lc-text-muted: var(--lc-neutral-500);
-  --lc-text-inverse: #ffffff;
-
-  --lc-border-default: var(--lc-neutral-300);
-  --lc-border-strong: var(--lc-neutral-400);
-  --lc-border-focus: var(--lc-accent-500);
-
-  --lc-accent: var(--lc-accent-500);
-  --lc-accent-hover: var(--lc-accent-600);
-  --lc-link: var(--lc-accent-500);
-
-  --lc-success: var(--lc-success-500);
-  --lc-warning: var(--lc-warning-500);
-  --lc-danger: var(--lc-danger-500);
-  --lc-danger-bg-soft: rgba(220, 38, 38, 0.12);
-
-  --lc-selection-local: var(--lc-accent-500);
-  --lc-selection-remote-fallback: var(--lc-neutral-500);
-
-  --lc-editor-bg: var(--lc-surface-2);
-  --lc-editor-gutter: var(--lc-surface-2);
-  --lc-editor-active-line: var(--lc-surface-3);
-  --lc-editor-caret: var(--lc-text-primary);
-
-  --lc-draw-stroke: var(--lc-text-primary);
+  /* Win2000 Primitive Palette */
+  --w2k-silver:       #c0c0c0;
+  --w2k-silver-light: #d4d0c8;
+  --w2k-silver-dark:  #a0a0a0;
+  --w2k-white:        #ffffff;
+  --w2k-black:        #000000;
+  --w2k-navy:         #000080;
+  --w2k-navy-active:  #0000aa;
+  --w2k-teal:         #008080;
+  --w2k-teal-light:   #00b4b4;
+  --w2k-blue:         #000080;
+  --w2k-btn-face:     #d4d0c8;
+  --w2k-btn-shadow:   #808080;
+  --w2k-btn-hilight:  #ffffff;
+  --w2k-btn-dkshadow: #404040;
+  --w2k-inset-bg:     #ffffff;
+  --w2k-selected:     #000080;
+  --w2k-selected-txt: #ffffff;
+  --w2k-tooltip-bg:   #ffffe1;
+  --w2k-tooltip-txt:  #000000;
+  --w2k-gray-text:    #808080;
+  --w2k-red:          #800000;
+  --w2k-green:        #008000;
+  --w2k-yellow:       #808000;
+
+  /* Semantic tokens mapped to Win2000 colors */
+  --lc-canvas-bg: var(--w2k-teal);
+  --lc-canvas-dot: #006666;
+
+  --lc-surface-1: var(--w2k-btn-face);
+  --lc-surface-2: var(--w2k-silver-light);
+  --lc-surface-3: var(--w2k-silver);
+
+  --lc-text-primary:   var(--w2k-black);
+  --lc-text-secondary: #404040;
+  --lc-text-muted:     var(--w2k-gray-text);
+  --lc-text-inverse:   var(--w2k-white);
+
+  --lc-border-default: var(--w2k-btn-shadow);
+  --lc-border-strong:  var(--w2k-btn-dkshadow);
+  --lc-border-focus:   var(--w2k-navy);
+
+  --lc-accent:       var(--w2k-navy);
+  --lc-accent-hover: var(--w2k-navy-active);
+  --lc-link:         var(--w2k-navy);
+
+  --lc-success:       var(--w2k-green);
+  --lc-warning:       var(--w2k-yellow);
+  --lc-danger:        var(--w2k-red);
+  --lc-danger-bg-soft: rgba(128, 0, 0, 0.12);
+
+  --lc-selection-local:           var(--w2k-selected);
+  --lc-selection-remote-fallback: var(--w2k-gray-text);
+
+  --lc-editor-bg:          var(--w2k-inset-bg);
+  --lc-editor-gutter:      var(--w2k-silver-light);
+  --lc-editor-active-line: #e8e4d8;
+  --lc-editor-caret:       var(--w2k-black);
+
+  --lc-draw-stroke: var(--w2k-black);
+
+  /* Titlebar gradient — classic Win2000 blue gradient */
+  --w2k-titlebar-from: #000080;
+  --w2k-titlebar-to:   #1084d0;
+}
+
+/* ── Win2000 raised 3D border (outset) ──────────────────────────────────── */
+.w2k-raised {
+  border-top:    2px solid var(--w2k-btn-hilight);
+  border-left:   2px solid var(--w2k-btn-hilight);
+  border-bottom: 2px solid var(--w2k-btn-dkshadow);
+  border-right:  2px solid var(--w2k-btn-dkshadow);
+  box-shadow:
+    inset 1px 1px 0 var(--w2k-silver-light),
+    inset -1px -1px 0 var(--w2k-btn-shadow);
+}
+
+/* ── Win2000 sunken 3D border (inset) ───────────────────────────────────── */
+.w2k-sunken {
+  border-top:    2px solid var(--w2k-btn-dkshadow);
+  border-left:   2px solid var(--w2k-btn-dkshadow);
+  border-bottom: 2px solid var(--w2k-btn-hilight);
+  border-right:  2px solid var(--w2k-btn-hilight);
+  box-shadow:
+    inset 1px 1px 0 var(--w2k-btn-shadow),
+    inset -1px -1px 0 var(--w2k-silver-light);
+}
+
+/* ── Win2000 button ─────────────────────────────────────────────────────── */
+.w2k-btn {
+  background: var(--w2k-btn-face);
+  color: var(--w2k-black);
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  padding: 2px 8px;
+  min-height: 22px;
+  cursor: pointer;
+  user-select: none;
+  border-top:    2px solid var(--w2k-btn-hilight);
+  border-left:   2px solid var(--w2k-btn-hilight);
+  border-bottom: 2px solid var(--w2k-btn-dkshadow);
+  border-right:  2px solid var(--w2k-btn-dkshadow);
+  box-shadow:
+    inset 1px 1px 0 var(--w2k-silver-light),
+    inset -1px -1px 0 var(--w2k-btn-shadow);
+}
+.w2k-btn:active {
+  border-top:    2px solid var(--w2k-btn-dkshadow);
+  border-left:   2px solid var(--w2k-btn-dkshadow);
+  border-bottom: 2px solid var(--w2k-btn-hilight);
+  border-right:  2px solid var(--w2k-btn-hilight);
+  box-shadow:
+    inset 1px 1px 0 var(--w2k-btn-shadow),
+    inset -1px -1px 0 var(--w2k-silver-light);
+  padding: 3px 7px 1px 9px;
+}
+.w2k-btn:focus {
+  outline: 1px dotted var(--w2k-black);
+  outline-offset: -4px;
+}
+.w2k-btn:disabled {
+  color: var(--w2k-btn-shadow);
+  text-shadow: 1px 1px 0 var(--w2k-btn-hilight);
+  cursor: default;
+}
+.w2k-btn.active {
+  border-top:    2px solid var(--w2k-btn-dkshadow);
+  border-left:   2px solid var(--w2k-btn-dkshadow);
+  border-bottom: 2px solid var(--w2k-btn-hilight);
+  border-right:  2px solid var(--w2k-btn-hilight);
+  background: var(--w2k-silver-light);
 }
 
+/* ── Win2000 titlebar ───────────────────────────────────────────────────── */
+.w2k-titlebar {
+  background: linear-gradient(to right, var(--w2k-titlebar-from), var(--w2k-titlebar-to));
+  color: var(--w2k-white);
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 2px 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  user-select: none;
+  min-height: 18px;
+}
+
+/* ── Win2000 window frame ───────────────────────────────────────────────── */
+.w2k-window {
+  background: var(--w2k-btn-face);
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  border-top:    2px solid var(--w2k-btn-hilight);
+  border-left:   2px solid var(--w2k-btn-hilight);
+  border-bottom: 2px solid var(--w2k-btn-dkshadow);
+  border-right:  2px solid var(--w2k-btn-dkshadow);
+  box-shadow:
+    inset 1px 1px 0 var(--w2k-silver-light),
+    inset -1px -1px 0 var(--w2k-btn-shadow);
+}
+
+/* ── Win2000 input field ────────────────────────────────────────────────── */
+.w2k-input {
+  background: var(--w2k-inset-bg);
+  color: var(--w2k-black);
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  border-top:    2px solid var(--w2k-btn-dkshadow);
+  border-left:   2px solid var(--w2k-btn-dkshadow);
+  border-bottom: 2px solid var(--w2k-btn-hilight);
+  border-right:  2px solid var(--w2k-btn-hilight);
+  padding: 2px 4px;
+  outline: none;
+}
+.w2k-input:focus {
+  outline: none;
+}
+
+/* ── Win2000 separator ──────────────────────────────────────────────────── */
+.w2k-separator {
+  border: none;
+  border-top: 1px solid var(--w2k-btn-shadow);
+  border-bottom: 1px solid var(--w2k-btn-hilight);
+  margin: 4px 0;
+}
+
+/* ── Win2000 taskbar status area ────────────────────────────────────────── */
+.w2k-statusbar {
+  background: var(--w2k-btn-face);
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  border-top:    2px solid var(--w2k-btn-dkshadow);
+  border-left:   2px solid var(--w2k-btn-dkshadow);
+  border-bottom: 2px solid var(--w2k-btn-hilight);
+  border-right:  2px solid var(--w2k-btn-hilight);
+  padding: 2px 4px;
+}
+
+/* ── Win2000 group box label ────────────────────────────────────────────── */
+.w2k-label {
+  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: bold;
+  color: var(--w2k-black);
+}
+
+/* ── Win2000 selected item ──────────────────────────────────────────────── */
+.w2k-selected-item {
+  background: var(--w2k-selected) !important;
+  color: var(--w2k-selected-txt) !important;
+}
+
+/* ── Range input Win2000 style ──────────────────────────────────────────── */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 14px;
+  background: transparent;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px;
+  background: var(--w2k-btn-face);
+  border-top:    1px solid var(--w2k-btn-dkshadow);
+  border-left:   1px solid var(--w2k-btn-dkshadow);
+  border-bottom: 1px solid var(--w2k-btn-hilight);
+  border-right:  1px solid var(--w2k-btn-hilight);
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 11px;
+  height: 20px;
+  margin-top: -8px;
+  background: var(--w2k-btn-face);
+  border-top:    2px solid var(--w2k-btn-hilight);
+  border-left:   2px solid var(--w2k-btn-hilight);
+  border-bottom: 2px solid var(--w2k-btn-dkshadow);
+  border-right:  2px solid var(--w2k-btn-dkshadow);
+}
+
+/* ── Win2000 "High Contrast" dark variant ──────────────────────────────── */
 [data-theme="dark"] {
-  /* Primitive tokens */
-  --lc-neutral-0: #17120f;
-  --lc-neutral-50: #201915;
-  --lc-neutral-100: #2a221d;
-  --lc-neutral-200: #352c25;
-  --lc-neutral-300: #463930;
-  --lc-neutral-400: #5b4b3f;
-  --lc-neutral-500: #7a6857;
-  --lc-neutral-600: #a89480;
-  --lc-neutral-700: #cbb9a6;
-  --lc-neutral-800: #e3d5c7;
-  --lc-neutral-900: #f3e9dc;
-
-  --lc-accent-500: #8ab4ff;
-  --lc-accent-600: #b3d0ff;
-  --lc-success-500: #4ade80;
-  --lc-warning-500: #facc15;
-  --lc-danger-500: #f87171;
-
-  /* Semantic tokens */
-  --lc-canvas-bg: var(--lc-neutral-0);
-  --lc-canvas-dot: var(--lc-neutral-300);
-
-  --lc-surface-1: var(--lc-neutral-100);
-  --lc-surface-2: var(--lc-neutral-200);
-  --lc-surface-3: var(--lc-neutral-300);
-
-  --lc-text-primary: var(--lc-neutral-800);
-  --lc-text-secondary: var(--lc-neutral-700);
-  --lc-text-muted: var(--lc-neutral-500);
-  --lc-text-inverse: #ffffff;
-
-  --lc-border-default: var(--lc-neutral-300);
-  --lc-border-strong: var(--lc-neutral-400);
-  --lc-border-focus: var(--lc-accent-500);
-
-  --lc-accent: var(--lc-accent-500);
-  --lc-accent-hover: var(--lc-accent-600);
-  --lc-link: var(--lc-accent-500);
-
-  --lc-success: var(--lc-success-500);
-  --lc-warning: var(--lc-warning-500);
-  --lc-danger: var(--lc-danger-500);
-  --lc-danger-bg-soft: rgba(248, 113, 113, 0.18);
-
-  --lc-selection-local: var(--lc-accent-500);
-  --lc-selection-remote-fallback: var(--lc-neutral-500);
-
-  --lc-editor-bg: var(--lc-surface-1);
-  --lc-editor-gutter: var(--lc-surface-1);
-  --lc-editor-active-line: var(--lc-surface-2);
-  --lc-editor-caret: var(--lc-text-primary);
-
-  --lc-draw-stroke: var(--lc-text-primary);
+  --w2k-btn-face:     #1a1a1a;
+  --w2k-silver:       #3a3a3a;
+  --w2k-silver-light: #2a2a2a;
+  --w2k-silver-dark:  #111111;
+  --w2k-btn-hilight:  #555555;
+  --w2k-btn-shadow:   #000000;
+  --w2k-btn-dkshadow: #000000;
+  --w2k-inset-bg:     #0a0a0a;
+  --w2k-black:        #c8c8c8;
+  --w2k-white:        #ffffff;
+  --w2k-gray-text:    #888888;
+  --w2k-navy:         #4488ff;
+  --w2k-navy-active:  #6699ff;
+  --w2k-selected:     #3355cc;
+  --w2k-green:        #33cc33;
+  --w2k-red:          #cc3333;
+  --w2k-yellow:       #ccaa00;
+  --w2k-titlebar-from: #003366;
+  --w2k-titlebar-to:   #006699;
+
+  --lc-canvas-bg: #002020;
+  --lc-canvas-dot: #004444;
+  --lc-surface-1: var(--w2k-btn-face);
+  --lc-surface-2: var(--w2k-silver-light);
+  --lc-surface-3: var(--w2k-silver);
+  --lc-text-primary: var(--w2k-black);
+  --lc-text-secondary: #aaaaaa;
+  --lc-text-muted: var(--w2k-gray-text);
+  --lc-text-inverse: var(--w2k-white);
+  --lc-border-default: var(--w2k-btn-shadow);
+  --lc-border-strong: var(--w2k-btn-dkshadow);
+  --lc-border-focus: var(--w2k-navy);
+  --lc-accent: var(--w2k-navy);
+  --lc-accent-hover: var(--w2k-navy-active);
+  --lc-link: var(--w2k-navy);
+  --lc-success: var(--w2k-green);
+  --lc-warning: var(--w2k-yellow);
+  --lc-danger: var(--w2k-red);
+  --lc-danger-bg-soft: rgba(204, 51, 51, 0.18);
+  --lc-selection-local: var(--w2k-navy);
+  --lc-selection-remote-fallback: var(--w2k-gray-text);
+  --lc-editor-bg: var(--w2k-inset-bg);
+  --lc-editor-gutter: var(--w2k-silver-light);
+  --lc-editor-active-line: #1a1a2a;
+  --lc-editor-caret: var(--w2k-black);
+  --lc-draw-stroke: var(--w2k-black);
 }
 
 /* Tailwind's preflight handles box-sizing and margin resets. */