:root {
  color-scheme: dark;

  /* Ground + surface (Claude's plateau values, kept) */
  --ground: #0a0c14;
  --surface-top: #1a1e30;   /* flat top, slightly lighter than ground */
  --surface-bot: #101320;   /* bottom of the flat top */
  --surface-hi:  #252a44;   /* radial highlight at light source */

  /* Text */
  --text:       #e8eefb;
  --text-dim:   #8a94b0;
  --text-faint: #59637f;

  /* Fonts */
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: var(--ground);
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* faint grid (v1's #15152a, kept subtle) */
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 90px 90px;
}

/* fixed soft light source, top-left (anchored) */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(55% 45% at 8% 4%, rgba(120,140,220,0.09), transparent 60%);
  pointer-events: none;
}

/* ---- layers ---- */
#edges { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#nodes { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* ============================================================
   The raised plateau — pure CSS, no canvas.
   A fixed light source means the shadow direction never changes,
   so box-shadow (GPU-composited) reproduces the effect for free.

   The stack:
     cast shadow   → object sits above the ground, shadow to bottom-right
     contact shadow → anchors the base
     inset rim (top/left)   → light catches the raised edge
     inset ramp (bottom/right) → shadow falls off the far edge
   ============================================================ */
.node {
  position: absolute;
  width: 250px; height: 150px;
  border-radius: 14px;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
  will-change: transform;

  /* flat top, lit toward top-left */
  background:
    radial-gradient(130% 90% at 14% 8%, var(--surface-hi) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface-top) 0%, var(--surface-bot) 100%);

  box-shadow:
    0 34px 54px -18px rgba(0,0,0,0.70),        /* cast shadow (down-right) */
    0 10px 22px -12px rgba(0,0,0,0.55),        /* contact shadow */
    inset 0 1px 0 rgba(255,255,255,0.14),      /* rim light — top */
    inset 1px 0 0 rgba(255,255,255,0.06),      /* rim light — left */
    inset 0 -3px 9px -3px rgba(0,0,0,0.50),    /* ramp shadow — bottom */
    inset -3px 0 9px -3px rgba(0,0,0,0.32);    /* ramp shadow — right */
}
.node:active { cursor: grabbing; }

/* v1 chrome: 0.12-opacity accent header bar */
.node-header {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  border-radius: 14px 14px 0 0;
}

/* 3px left accent bar (reined in from v1's 4px) */
.node-accent {
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}

.node-title {
  position: absolute; top: 12px; left: 17px;
  font-size: 17px; font-weight: 650; letter-spacing: 0.05em;
}

.node-type {
  position: absolute; top: 35px; left: 17px;
  font-size: 10px; letter-spacing: 0.17em; color: var(--text-dim);
}

.node-meta {
  position: absolute; bottom: 17px; left: 17px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.02em; white-space: nowrap;
}

.node-status {
  position: absolute; top: 18px; right: 15px;
  width: 8px; height: 8px; border-radius: 50%;
}

/* in/out ports */
.port {
  position: absolute; top: 50%; width: 12px; height: 12px;
  border-radius: 50%;
  background: #0a0a14;
  border: 2px solid;
  transform: translateY(-50%);
}
.port-in  { left: -6px; }
.port-out { right: -6px; }

/* ---- HUD ---- */
#hud {
  position: fixed; top: 26px; left: 30px; z-index: 3;
  pointer-events: none;
}
.hud-title { display: block; font-size: 20px; font-weight: 650; letter-spacing: 0.01em; }
.hud-meta  { display: block; font-size: 12px; color: var(--text-faint); margin-top: 5px; letter-spacing: 0.03em; }