:root {
      color-scheme: dark;
      --ink: #eef6ee;
      --muted: #9da9b4;
      --panel: #202933;
      --rail: rgba(230, 238, 242, .58);
      --rail-core: rgba(255, 255, 255, .74);
      --revenue: #2f5e45;
      --cost: #304d70;
      --ops: #6a562b;
      --leakage: #6b3936;
      --platform: #563f75;
      --foundation: #3f5151;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 32% 18%, rgba(88, 113, 129, .32), transparent 26%),
        linear-gradient(180deg, #303b46 0%, #222b34 100%);
      color: var(--ink);
    }

    .shell {
      height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
    }

    header {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: rgba(21, 28, 36, .92);
      border-bottom: 1px solid rgba(169, 191, 205, .2);
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
    }

    h1 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 760;
    }

    .meta {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 13px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      height: 26px;
      padding: 0 10px;
      border: 1px solid rgba(177, 203, 219, .22);
      background: rgba(35, 46, 58, .88);
      border-radius: 999px;
      white-space: nowrap;
    }

    .config-panel {
      display: grid;
      gap: 10px;
      justify-items: end;
    }

    .config-panel summary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      list-style: none;
      min-width: 108px;
    }

    .config-panel summary::-webkit-details-marker {
      display: none;
    }

    .config-label-mobile {
      display: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .control-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      padding: 0 11px;
      border: 1px solid rgba(177, 203, 219, .28);
      border-radius: 7px;
      background: rgba(35, 46, 58, .96);
      color: #dce7ec;
      font: inherit;
      font-size: 12px;
      font-weight: 720;
      cursor: pointer;
    }

    .control-button:hover,
    .control-button:focus {
      background: rgba(50, 64, 78, .96);
      outline: none;
    }

    .line-mode {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 30px;
      padding: 0 8px;
      border: 1px solid rgba(177, 203, 219, .22);
      border-radius: 7px;
      background: rgba(35, 46, 58, .88);
      color: #c8d4dc;
      font-size: 12px;
      white-space: nowrap;
    }

    .line-mode input {
      margin: 0;
      accent-color: #8cd95f;
    }

    main {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 0;
    }

    .board-wrap {
      min-width: 0;
      min-height: 0;
      overflow: auto;
      padding: 18px;
    }

    .board-zoom {
      width: max-content;
      height: max-content;
      transform-origin: 0 0;
    }

    .board {
      position: relative;
      width: 640px;
      min-height: 950px;
      height: 1900px;
      padding: 0;
      border: 1px solid rgba(164, 187, 201, .14);
      background:
        linear-gradient(rgba(186, 205, 218, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(186, 205, 218, .055) 1px, transparent 1px),
        radial-gradient(circle at 68% 62%, rgba(0, 0, 0, .22), transparent 18%),
        rgba(38, 48, 58, .72);
      background-size: 16px 16px, 16px 16px, auto, auto;
      box-shadow: inset 0 0 90px rgba(10, 15, 22, .34);
    }

    .lanes {
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    .phase-band {
      position: absolute;
      left: 18px;
      right: 18px;
      border-top: 1px solid rgba(188, 211, 225, .16);
      color: rgba(220, 231, 236, .52);
      padding-top: 6px;
      pointer-events: none;
      z-index: 0;
    }

    .phase-band-title {
      display: block;
      font-size: 10px;
      font-weight: 780;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .phase-band-meta {
      display: block;
      max-width: 760px;
      margin-top: 2px;
      color: rgba(220, 231, 236, .42);
      font-size: 9px;
      line-height: 1.25;
      letter-spacing: .02em;
      text-transform: none;
    }

    .node {
      width: 56px;
      height: 56px;
      border: 0;
      background: transparent;
      color: var(--ink);
      padding: 0;
      cursor: grab;
      display: grid;
      justify-items: center;
      align-content: center;
      position: absolute;
      transform: translate(-50%, -50%);
      font: inherit;
      transition: transform .16s ease, filter .16s ease;
    }

    .node.locked {
      opacity: .34;
      filter: grayscale(.35) brightness(.7);
    }

    .node.locked .node-icon {
      box-shadow:
        0 0 0 2px rgba(34, 44, 53, .85),
        0 8px 12px rgba(0, 0, 0, .22);
    }

    .node.dragging {
      cursor: grabbing;
      z-index: 4;
    }

    .board.layout-locked .node {
      cursor: pointer;
    }

    .node:hover,
    .node:focus {
      transform: translate(-50%, calc(-50% - 2px));
      filter: brightness(1.08);
      outline: none;
    }

    .node.selected {
      transform: translate(-50%, calc(-50% - 3px)) scale(1.04);
    }

    .node-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .035)),
        var(--foundation);
      border: 2px solid rgba(225, 239, 232, .52);
      box-shadow:
        0 0 0 2px rgba(34, 44, 53, .9),
        0 0 16px rgba(126, 224, 91, .42),
        0 8px 12px rgba(0, 0, 0, .28);
      color: #f9fff5;
      font-size: 13px;
      font-weight: 840;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
      position: relative;
    }

    .node-code {
      position: absolute;
      left: -9px;
      top: -9px;
      min-width: 22px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      padding: 0 4px;
      border: 1px solid rgba(232, 241, 237, .58);
      border-radius: 999px;
      background: rgba(25, 34, 42, .94);
      color: #eef6ee;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-shadow: none;
      box-shadow: 0 0 8px rgba(0, 0, 0, .38);
    }

    .node-glyph {
      position: relative;
      z-index: 2;
      font-size: 27px;
      line-height: 1;
      font-weight: 900;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
      filter: drop-shadow(0 0 3px rgba(255, 255, 255, .2));
      pointer-events: none;
    }

    .size-stamp {
      position: absolute;
      right: -9px;
      top: -9px;
      min-width: 21px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      padding: 0 4px;
      border: 1px solid rgba(232, 241, 237, .72);
      border-radius: 999px;
      background: rgba(25, 34, 42, .94);
      color: #eef6ee;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-shadow: none;
      box-shadow: 0 0 8px rgba(0, 0, 0, .38);
    }

    .id-stamp {
      position: absolute;
      left: -9px;
      bottom: -13px;
      min-width: 22px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      padding: 0 4px;
      border: 1px solid rgba(232, 241, 237, .58);
      border-radius: 999px;
      background: rgba(25, 34, 42, .94);
      color: #dce7ec;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-shadow: none;
      box-shadow: 0 0 8px rgba(0, 0, 0, .38);
    }

    .board.hide-node-code .node-code,
    .board.hide-node-id .id-stamp,
    .board.hide-node-size .size-stamp {
      display: none;
    }

    .req-pip {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(232, 241, 237, .72);
      border: 1px solid rgba(20, 28, 34, .92);
      box-shadow: 0 0 8px rgba(232, 241, 237, .32);
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity .12s ease, background .12s ease, box-shadow .12s ease;
      pointer-events: none;
    }

    .req-pip.active {
      opacity: .86;
    }

    .req-pip.complete {
      background: #87ef68;
      box-shadow: 0 0 10px rgba(135, 239, 104, .62);
    }

    .req-pip.n {
      left: 50%;
      top: -3px;
    }

    .req-pip.e {
      left: calc(100% + 3px);
      top: 50%;
    }

    .req-pip.s {
      left: 50%;
      top: calc(100% + 3px);
    }

    .req-pip.w {
      left: -3px;
      top: 50%;
    }

    .node.completed .node-icon {
      border-color: rgba(167, 246, 129, .92);
      box-shadow:
        0 0 0 2px rgba(34, 44, 53, .9),
        0 0 0 4px rgba(124, 240, 87, .18),
        0 0 18px rgba(124, 240, 87, .68),
        0 8px 12px rgba(0, 0, 0, .28);
    }

    .node.completed .node-icon::after {
      content: "✓";
      position: absolute;
      right: -9px;
      bottom: -9px;
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #77e65c;
      border: 2px solid #22303a;
      color: #132117;
      font-size: 13px;
      font-weight: 900;
      text-shadow: none;
    }

    .revenue .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--revenue); }
    .cost .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--cost); }
    .ops .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--ops); }
    .leakage .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--leakage); }
    .platform .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--platform); }
    .foundation .node-icon { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.03)), var(--foundation); }

    .node.selected .node-icon {
      border-color: #f7ffe8;
      box-shadow:
        0 0 0 2px rgba(34, 44, 53, .9),
        0 0 0 5px rgba(124, 240, 87, .28),
        0 0 28px rgba(124, 240, 87, .86),
        0 8px 12px rgba(0, 0, 0, .28);
    }

    .node-title {
      margin: 0;
      position: absolute;
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
      width: 104px;
      color: #dce7ec;
      font-size: 10px;
      line-height: 1.12;
      font-weight: 760;
      overflow-wrap: anywhere;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    }

    svg.edges {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: auto;
      overflow: visible;
    }

    .edge {
      fill: none;
      stroke: var(--rail);
      stroke-width: 3;
      stroke-linecap: square;
      stroke-linejoin: round;
      opacity: .64;
      filter: drop-shadow(0 0 2px rgba(255, 255, 255, .22));
    }

    .edge.core {
      stroke: var(--rail-core);
      stroke-width: 3.5;
      opacity: .74;
      filter: drop-shadow(0 0 2px rgba(255, 255, 255, .3));
    }

    .edge.highlight {
      stroke: #ffffff;
      stroke-width: 4.5;
      opacity: .95;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, .82));
    }

    .edge.selected-edge {
      stroke: #bfffa8;
      stroke-width: 5;
      opacity: 1;
      filter: drop-shadow(0 0 7px rgba(139, 244, 101, .9));
    }

    .anchor-point {
      fill: #bfffa8;
      stroke: #17232b;
      stroke-width: 2;
      filter: drop-shadow(0 0 6px rgba(139, 244, 101, .75));
      pointer-events: none;
    }

    aside {
      border-left: 1px solid rgba(169, 191, 205, .18);
      background: rgba(20, 27, 34, .95);
      padding: 20px;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
    }

    .detail {
      display: grid;
      gap: 16px;
    }

    .detail h2 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .detail p {
      margin: 0;
      color: #c9d4dc;
      font-size: 14px;
      line-height: 1.45;
    }

    .fields {
      display: grid;
      gap: 10px;
    }

    .field {
      display: grid;
      gap: 2px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(181, 202, 216, .14);
    }

    .label {
      color: #94a6b4;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 760;
      letter-spacing: .04em;
    }

    .value {
      color: #eef6ee;
      font-size: 13px;
      line-height: 1.4;
    }

    .dependency-list {
      display: grid;
      gap: 6px;
    }

    .dependency-toggle {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      color: #dbe7ee;
      font-size: 12px;
      line-height: 1.25;
    }

    .dependency-toggle input {
      margin-top: 1px;
      accent-color: #dbe7ee;
    }

    .dependency-toggle.disabled {
      color: #8795a2;
      text-decoration: line-through;
    }

    .dependency-item {
      color: #eef6ee;
      font-size: 13px;
      line-height: 1.35;
    }

    .port-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-left: 23px;
      margin-top: 4px;
    }

    .port-control {
      display: grid;
      gap: 2px;
      color: #94a6b4;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .port-control select {
      width: 100%;
      border: 1px solid rgba(177, 203, 219, .22);
      border-radius: 6px;
      background: rgba(35, 46, 58, .96);
      color: #dce7ec;
      font: inherit;
      font-size: 12px;
      padding: 4px 6px;
    }

    .source {
      color: #9dafbb;
      font-size: 12px;
      line-height: 1.35;
      border-top: 1px solid rgba(181, 202, 216, .14);
      padding-top: 12px;
    }

    .legend-list {
      display: grid;
      gap: 6px;
      color: #c9d4dc;
      font-size: 12px;
      line-height: 1.35;
    }

    .legend-list span {
      color: #eef6ee;
      font-weight: 780;
    }

    @media (max-width: 980px) {
      body {
        overflow: auto;
      }

      .shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
      }

      header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        position: static;
        padding: 16px 62px 16px 16px;
      }

      h1 {
        font-size: 22px;
      }

      .controls {
        justify-content: flex-start;
        gap: 7px;
      }

      .config-panel {
        position: absolute;
        right: 16px;
        top: 16px;
        justify-items: end;
        width: auto;
        z-index: 8;
      }

      .config-panel[open] {
        left: 16px;
      }

      .config-panel[open] .controls {
        justify-content: flex-end;
        padding: 10px;
        border: 1px solid rgba(177, 203, 219, .18);
        border-radius: 8px;
        background: rgba(21, 28, 36, .98);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
      }

      .config-panel summary {
        width: 36px;
        min-width: 36px;
        height: 32px;
        padding: 0;
        justify-content: center;
      }

      .config-label {
        display: none;
      }

      .config-label-mobile {
        display: inline-grid;
        gap: 4px;
        place-items: center;
        width: 18px;
        height: 18px;
      }

      .config-label-mobile span {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }

      .control-button,
      .line-mode {
        height: 32px;
      }

      .phase-band-meta {
        display: none;
      }

      main {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
      }

      .board-wrap {
        max-height: 70vh;
        padding: 8px;
      }

      aside {
        border-left: 0;
        border-top: 1px solid rgba(169, 191, 205, .18);
        overflow: visible;
      }

      .detail {
        position: static;
      }
    }