:root{
      --bg:#0b1020;
      --panel:#10172a;
      --card:#151e34;
      --card-2:#11192d;
      --text:#f5f7ff;
      --muted:#8f9bb6;
      --border:#27314b;
      --accent:#7c5cff;
      --green:#35d09a;
      --orange:#ffad5a;
      --purple:#9b7bff;
      --cyan:#49c8ff;
      --shadow:0 18px 60px rgba(0,0,0,.28);
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--text);
      overflow:hidden;
    }

    button{font:inherit}

    .app{
      height:100%;
      display:grid;
      grid-template-rows:auto 1fr;
    }

    .toolbar{
      height:68px;
      padding:12px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background:rgba(11,16,32,.92);
      border-bottom:1px solid var(--border);
      backdrop-filter:blur(14px);
      z-index:20;
    }

    .toolbar-left,.toolbar-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .badge{
      padding:8px 11px;
      border-radius:999px;
      border:1px solid rgba(124,92,255,.38);
      background:rgba(124,92,255,.12);
      color:#c8bbff;
      font-size:13px;
      font-weight:700;
    }

    .muted{color:var(--muted);font-size:13px}

    .tool-btn{
      height:38px;
      min-width:38px;
      padding:0 12px;
      border-radius:11px;
      border:1px solid var(--border);
      background:var(--panel);
      color:var(--text);
      cursor:pointer;
      transition:.16s ease;
    }

    .tool-btn:hover{
      border-color:var(--accent);
      background:#17213b;
      transform:translateY(-1px);
    }

    .zoom-label{
      width:54px;
      text-align:center;
      color:var(--muted);
      font-size:13px;
    }

    .viewport{
      position:relative;
      overflow:hidden;
      cursor:grab;
      touch-action:none;
      user-select:none;
      background-color:var(--bg);
      background-image:
        radial-gradient(circle at 18% 22%,rgba(124,92,255,.10),transparent 34%),
        radial-gradient(circle at 82% 72%,rgba(73,200,255,.07),transparent 38%);
    }

    .viewport.dragging{cursor:grabbing}

    .hint{
      position:absolute;
      left:16px;
      bottom:16px;
      z-index:10;
      padding:8px 11px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(16,23,42,.9);
      color:var(--muted);
      font-size:12px;
      pointer-events:none;
      backdrop-filter:blur(10px);
    }

    .world{
      position:absolute;
      left:0;
      top:0;
      width:4650px;
      height:1900px;
      transform-origin:0 0;
    }

    svg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      pointer-events:none;
    }

    .edge{
      fill:none;
      stroke-width:2.25;
      stroke-linecap:round;
      opacity:.28;
      transition:opacity .2s ease,stroke-width .2s ease,filter .2s ease;
    }

    .edge[data-tone="link"]{stroke:var(--cyan);marker-end:url(#arrow-link)}

    .edge.traversed{
      opacity:1;
      stroke-width:3.2;
      stroke-dasharray:10 9;
      filter:drop-shadow(0 0 5px rgba(255,255,255,.12));
      animation:dash 1.25s linear infinite;
    }

    @keyframes dash{to{stroke-dashoffset:-38}}

    .edge-label{
      font-size:11px;
      font-weight:800;
      paint-order:stroke;
      stroke:var(--bg);
      stroke-width:7px;
      stroke-linejoin:round;
      letter-spacing:.02em;
    }

    .edge-label[data-tone="link"]{fill:var(--cyan)}

    .node{
      --node:#7c5cff;
      position:absolute;
      z-index:3;
      width:440px;
      min-height:296px;
      padding:20px;
      border:1px solid color-mix(in srgb,var(--node) 62%,var(--border));
      border-radius:22px;
      background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 32%),var(--card);
      box-shadow:0 14px 42px rgba(0,0,0,.20);
      opacity:.3;
      transition:opacity .22s ease,border-color .22s ease,box-shadow .22s ease;
    }

    .node::before{
      content:"";
      position:absolute;
      top:-1px;
      left:24px;
      right:24px;
      height:4px;
      border-radius:0 0 999px 999px;
      background:var(--node);
    }

    .node.base{--node:var(--accent)}
    .node.hard{--node:var(--green)}
    .node.branch{--node:var(--cyan)}
    .node.bridge{--node:var(--cyan)}
    .node.final{--node:var(--green)}

    .node.current{
      opacity:1;
      z-index:8;
      box-shadow:var(--shadow);
    }

    .node.visited:not(.current){opacity:.72}
    .node.locked{pointer-events:none}

    .node-head{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .node-index{
      display:grid;
      place-items:center;
      width:42px;
      height:42px;
      flex:0 0 auto;
      border-radius:13px;
      background:var(--node);
      color:#fff;
      font-size:14px;
      font-weight:900;
      box-shadow:0 8px 24px color-mix(in srgb,var(--node) 30%,transparent);
    }

    .node-head strong{
      display:block;
      color:var(--node);
      font-size:14px;
      letter-spacing:.01em;
    }

    .node-head small{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:12px;
    }

    .node h2{
      margin:18px 0 0;
      font-size:21px;
      line-height:1.34;
      font-weight:750;
    }

    .answers{
      display:grid;
      gap:10px;
      margin-top:18px;
    }

    .answer{
      --answer:var(--accent);
      position:relative;
      display:grid;
      grid-template-columns:10px 1fr;
      align-items:center;
      gap:11px;
      width:100%;
      min-height:48px;
      padding:12px 16px;
      border:1px solid var(--border);
      border-radius:14px;
      background:var(--card-2);
      color:var(--text);
      text-align:left;
      line-height:1.35;
      cursor:pointer;
      transition:.15s ease;
    }

    .answer[data-tone="link"]{--answer:var(--cyan)}

    .answer:hover{
      border-color:var(--answer);
      background:color-mix(in srgb,var(--answer) 8%,var(--card-2));
    }

    .answer.selected{
      border-color:var(--answer);
      background:color-mix(in srgb,var(--answer) 12%,var(--card-2));
    }

    .answer-dot{
      display:block;
      width:10px;
      height:10px;
      min-width:10px;
      min-height:10px;
      max-width:10px;
      max-height:10px;
      place-self:center;
      border-radius:999px;
      background:var(--answer);
      font-size:0;
      line-height:0;
    }

    .port{
      position:absolute;
      top:50%;
      right:-21px;
      width:0;
      height:0;
      pointer-events:none;
    }

    .input-port{
      position:absolute;
      top:50%;
      left:0;
      width:0;
      height:0;
      pointer-events:none;
    }

    .feedback{
      min-height:20px;
      margin:13px 0 0;
      color:var(--node);
      font-size:13px;
    }

    .legend{
      position:absolute;
      right:16px;
      bottom:16px;
      z-index:10;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding:9px 11px;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(16,23,42,.9);
      color:var(--muted);
      font-size:12px;
      backdrop-filter:blur(10px);
    }

    .legend span{
      display:inline-flex;
      align-items:center;
      gap:7px;
    }

    .legend i{
      width:18px;
      height:3px;
      border-radius:999px;
      background:currentColor;
    }

    .lg-link{color:var(--cyan)}

    @media (max-width:780px){
      .toolbar{height:auto;align-items:flex-start}
      .viewport{min-height:calc(100vh - 114px)}
      .legend{left:16px;right:auto;max-width:calc(100% - 32px)}
    }