/* Header: h1 full-width, then intro (CSS 2-col) | meta */
  .project-header {
    grid-template-columns: 1fr 260px;
  }
  /* Demos — consistent bottom spacing, no top margin (header pb handles first gap) */
  .gh-demo { margin: 0 0 var(--space-8); }
  .gh-demo--curve { margin: 0 0 var(--space-8); }
  /* Approach section sandwiched between two demos */
  .gh-demo + .cs-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .cs-section + .gh-demo { margin-top: var(--space-8); padding-top: 0; }
  @media (max-width: 720px) {
    .project-header { grid-template-columns: 1fr; }
  }
  .gh-demo__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #0e1110;
    overflow: hidden;
    cursor: crosshair;
  }
  .gh-demo__stage canvas { display: block; width: 100%; height: 100%; }
  .gh-demo__cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-top: var(--space-3);
  }
  .gh-demo__cap a { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); }
  .gh-demo__cap a:hover { color: var(--color-text); border-color: var(--color-text); }
  @media (max-width: 560px) { .gh-demo__stage { aspect-ratio: 4 / 5; } .gh-demo__cap { flex-direction: column; gap: var(--space-1); } }

  /* Parametric sliders — live on the same dark panel as the canvas stage
     below (fused: zero gap + matching bg), so controls read as part of
     the preview window rather than sitting apart on the page bg. */
  .gh-sliders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 20px 24px 14px;
    background: #0e1110;
  }
  @media (max-width: 560px) { .gh-sliders { grid-template-columns: 1fr; } }
  .gh-slider {
    display: grid;
    grid-template-columns: 100px 1fr 36px;
    align-items: center;
    gap: var(--space-2);
  }
  /* Attractor demo: labels flush-left to the container, evenly spaced rows */
  .gh-sliders .gh-slider { grid-template-columns: 76px 1fr 32px; }
  .gh-sliders .gh-slider__label { text-align: left; }
  .gh-slider__label {
    font-family: var(--font-mono);
    font-size: var(--type-micro);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: #9a9e9a;
    white-space: nowrap;
    text-align: right;
  }
  .gh-slider__val {
    font-family: var(--font-mono);
    font-size: var(--type-micro);
    color: #9a9e9a;
    text-align: right;
  }
  .gh-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
      #e6e5e1 0%,
      #e6e5e1 var(--fill, 50%),
      rgba(190,190,185,0.18) var(--fill, 50%),
      rgba(190,190,185,0.18) 100%
    );
  }
  .gh-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e6e5e1;
    border: none;
    transition: transform 0.15s;
  }
  .gh-slider__input:hover::-webkit-slider-thumb { transform: scale(1.4); }
  .gh-slider__input::-moz-range-thumb {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e6e5e1;
    border: none;
  }

  /* Curve demo — controls fused to the dark canvas stage below (same treatment) */
  .gh-curve-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 20px 24px 14px;
    background: #0e1110;
  }
  .gh-mode-toggle {
    display: flex;
    border: 1px solid rgba(190,190,185,0.22);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
  }
  .gh-mode-btn {
    font-family: var(--font-mono);
    font-size: var(--type-micro);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #9a9e9a;
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
    white-space: nowrap;
  }
  .gh-mode-btn:hover { color: #e6e5e1; }
  .gh-mode-btn.is-active {
    background: #e6e5e1;
    color: #0e1110;
  }
  .gh-curve-toolbar .gh-slider {
    flex: 1;
    max-width: 360px;
    grid-template-columns: 56px 1fr 44px;
  }
  .gh-curve-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0e1110;
    overflow: hidden;
  }
  .gh-curve-stage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
  @media (max-width: 560px) {
    .gh-curve-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .gh-curve-toolbar .gh-slider { max-width: none; }
  }

  /* Data tree demo — controls fused to the dark canvas stage below (same treatment) */
  .gh-tree-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 20px 24px 14px;
    background: #0e1110;
    flex-wrap: wrap;
  }
  .gh-tree-toolbar .gh-slider {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    grid-template-columns: 60px 1fr 28px;
  }
  .gh-tree-stage {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #0e1110;
    overflow: hidden;
  }
  .gh-tree-stage canvas {
    display: block;
    height: 100%;
    min-width: 0;
  }
  #dtGridCanvas { flex: 3; }
  #dtTreeCanvas { flex: 1; }
  .gh-tree-divider {
    width: 1px;
    background: rgba(190,190,185,0.10);
    flex-shrink: 0;
    align-self: stretch;
  }
  @media (max-width: 560px) {
    .gh-tree-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .gh-tree-toolbar .gh-slider { max-width: none; }
    .gh-tree-stage { aspect-ratio: 1 / 1; flex-direction: column; }
    .gh-tree-divider { width: 100%; height: 1px; }
  }

  /* ============ Node-editor demo (Möbius) ============ */
  .gh-node-stage {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #0e1110;
    overflow: hidden;
    position: relative;
  }
  .gh-node-canvas {
    position: relative;
    flex: 1.32;
    min-width: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 1px 1px, rgba(190,190,185,0.07) 1px, transparent 0);
    background-size: 22px 22px;
    touch-action: none;
    cursor: default;
  }
  .gh-node-divider { width: 1px; background: rgba(190,190,185,0.12); flex-shrink: 0; align-self: stretch; }
  .gh-node-view { position: relative; flex: 1; min-width: 0; }
  .gh-node-view canvas { display: block; width: 100%; height: 100%; cursor: grab; }
  .gh-node-view canvas:active { cursor: grabbing; }
  .gh-node-view__hint {
    position: absolute; left: 12px; bottom: 10px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(190,190,185,0.34);
    pointer-events: none; user-select: none;
  }
  .gh-node-view__empty {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #d2553f; pointer-events: none; text-align: center; padding: 0 24px;
  }
  .gh-node-view__empty::before {
    content: ""; width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid #d2553f; opacity: 0.7;
    -webkit-mask: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%);
    mask: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%);
    background: #d2553f;
  }
  .gh-node-stage.is-unsolved .gh-node-view__empty { display: flex; }

  /* SVG wire layer */
  .gh-wire-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  .gh-wire-layer path.gh-wire-hit { stroke: transparent; stroke-width: 18; fill: none; pointer-events: stroke; cursor: pointer; }
  .gh-wire-layer path.gh-wire-line { fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
  .gh-wire-sever {
    pointer-events: all; cursor: pointer; opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-soft);
  }
  .gh-wire-sever.is-shown { opacity: 1; }
  .gh-wire-sever circle { fill: #0e1110; stroke: #d2553f; stroke-width: 1.5; }
  .gh-wire-sever line { stroke: #d2553f; stroke-width: 1.5; stroke-linecap: round; }

  /* Node card — GH-flavoured, compact */
  .gh-node {
    position: absolute; z-index: 2;
    background: linear-gradient(#262b28, #1b201e);
    border: 1px solid rgba(190,190,185,0.20);
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.34);
    user-select: none; font-family: var(--font-mono);
    transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  }
  .gh-node.is-dragging { z-index: 20; box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
  .gh-node.is-unsolved { border-color: rgba(210,85,63,0.9); box-shadow: 0 0 0 1px rgba(210,85,63,0.4), 0 4px 12px rgba(0,0,0,0.34); }
  .gh-node__dot { width: 5px; height: 5px; border-radius: 50%; background: #5aba6a; flex-shrink: 0; }
  .gh-node.is-unsolved .gh-node__dot { background: #d2553f; }

  /* component (geometry / preview): edge param letters + central name capsule */
  .gh-node--comp { width: 108px; }
  .gh-comp { display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; min-height: 38px; cursor: grab; }
  .gh-comp:active { cursor: grabbing; }
  .gh-comp__io { display: flex; flex-direction: column; gap: 9px; padding: 8px 0; }
  .gh-comp__io--in { align-items: flex-start; padding-left: 8px; }
  .gh-comp__io--out { align-items: flex-end; padding-right: 8px; }
  .gh-cell { font-size: 8px; letter-spacing: 0.04em; color: #9a9e9a; line-height: 1; }
  .gh-comp__name {
    text-align: center; font-size: 10.5px; letter-spacing: 0.03em; color: #e6e5e1;
    padding: 9px 2px;
    border-left: 1px solid rgba(190,190,185,0.10); border-right: 1px solid rgba(190,190,185,0.10);
  }
  .gh-node[data-type="preview"] .gh-comp__name { color: #c8cbc6; }

  /* slider widget */
  .gh-node--slider { width: 124px; padding: 6px 9px 9px; }
  .gh-slabel {
    display: flex; align-items: center; gap: 5px; cursor: grab;
    font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #9a9e9a; margin-bottom: 6px;
  }
  .gh-slabel:active { cursor: grabbing; }
  .gh-srow { display: flex; align-items: center; gap: 8px; }
  .gh-sval { font-size: 15px; color: #f0efec; line-height: 1; min-width: 13px; }
  .gh-sval span { font-size: 8px; color: #8a8f8c; margin-left: 1px; letter-spacing: 0.05em; }
  .gh-strack { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(190,190,185,0.18); cursor: pointer; }
  .gh-sfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #5aba6a; }
  .gh-sgrip {
    position: absolute; top: 50%; width: 5px; height: 13px; border-radius: 2px;
    background: #5aba6a; border: 1px solid #1b201e; transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: grab;
  }
  .gh-sgrip:active { cursor: grabbing; }

  /* Ports */
  .gh-port {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: #0e1110; border: 1.5px solid #6f736f;
    transform: translate(-50%, -50%); cursor: crosshair; z-index: 5;
    transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
  }
  .gh-port[data-ptype="num"] { border-color: #5aba6a; }
  .gh-port[data-ptype="geo"] { border-color: #5aba6a; }
  .gh-port.is-connected[data-ptype="num"] { background: #5aba6a; }
  .gh-port.is-connected[data-ptype="geo"] { background: #5aba6a; }
  .gh-port:hover, .gh-port.is-target { transform: translate(-50%, -50%) scale(1.5); }
  .gh-port.is-invalid { border-color: #d2553f !important; cursor: not-allowed; }
  .gh-node.is-unsolved .gh-port[data-io="in"]:not(.is-connected) { border-color: #d2553f; }

  /* Hover hint tooltip */
  .gh-tip {
    position: absolute; z-index: 40; pointer-events: none;
    max-width: 172px; padding: 7px 9px; border-radius: 5px;
    background: #0b0e0d; border: 1px solid rgba(190,190,185,0.22);
    box-shadow: 0 7px 18px rgba(0,0,0,0.5);
    font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5; letter-spacing: 0.015em;
    color: #b6b9b5; text-transform: none;
    opacity: 0; transform: translateY(3px);
    transition: opacity 0.12s var(--ease-soft), transform 0.12s var(--ease-soft);
  }
  .gh-tip.is-shown { opacity: 1; transform: translateY(0); }
  .gh-tip b { color: #f0efec; font-weight: 400; }

  @media (max-width: 560px) {
    .gh-node-stage { aspect-ratio: 3 / 4; flex-direction: column; }
    .gh-node-divider { width: 100%; height: 1px; }
    .gh-node-canvas { flex: 1.1; }
  }