html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow:hidden; }
    body{ display:flex; flex-direction:column; min-height:100vh; }
    #topbar { display:flex; flex-wrap:nowrap; gap:10px 14px; align-items:center; padding:10px 12px; border-bottom:1px solid #e5e5e5; position:relative; overflow:visible; flex:0 0 auto; }
    #topbarMain{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
    #topbarRight{ display:flex; gap:8px; align-items:center; flex:0 0 auto; margin-left:auto; }
    #topbarStatus{ flex:0 1 620px; min-width:0; font-size:14px; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; text-align:left; }
    #file{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .file-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border:1px solid #b8b8b8; border-radius:6px; background:#fff; color:#222; cursor:pointer; font:inherit; box-shadow:0 1px 2px rgba(0,0,0,.04); }
    .file-btn:hover{ background:#f6f6f6; }
    .search-wrap{ position:relative; flex:0 1 320px; min-width:180px; max-width:320px; }
    .search-input{ width:100%; box-sizing:border-box; font-size:13px; padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,0.14); background:rgba(255,255,255,0.96); color:#111; }
    .search-input:focus{ outline:none; border-color:rgba(0,0,0,0.28); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
    .search-input:disabled{ opacity:0.5; cursor:not-allowed; }
    .search-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; display:none; max-height:min(50vh, 420px); overflow:auto; background:rgba(255,255,255,0.98); border:1px solid rgba(0,0,0,0.12); border-radius:12px; box-shadow:0 16px 34px rgba(0,0,0,0.14); backdrop-filter:blur(6px); z-index:30; }
    .search-results.is-open{ display:block; }
    .search-result{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; box-sizing:border-box; text-align:left; padding:9px 10px; background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,0.06); cursor:pointer; }
    .search-result:last-child{ border-bottom:none; }
    .search-result:hover, .search-result.is-active{ background:rgba(0,0,0,0.05); }
    .search-result-label{ font-size:13px; color:#111; }
    .search-result-meta{ font-size:11px; color:rgba(0,0,0,0.55); }
    .search-empty{ padding:10px; font-size:12px; color:rgba(0,0,0,0.6); }

    @media (max-width: 1100px) {
      #topbar{ flex-wrap:wrap; }
      #topbarMain{ flex:1 1 100%; min-width:0; }
      #topbarStatus{ flex:1 1 auto; min-width:260px; white-space:normal; overflow:visible; text-overflow:clip; }
      #topbarRight{ margin-left:0; }
    }

    #wrap { position: relative; flex:1 1 auto; min-height:0; }
    svg { width: 100%; height: 100%; display:block; background: #fff; }

    /* Right sidebar stack for analysis panels */
    .right-sidebar{
      position:absolute; top:12px; right:12px; bottom:12px; width:320px;
      display:flex; flex-direction:column; gap:12px; z-index:5;
      pointer-events:none;
    }
    .right-sidebar > .legend{
      position:relative; top:auto; right:auto; left:auto; width:100%;
      max-height:none; overflow:hidden; pointer-events:auto;
    }

    .link { fill: none; stroke-width: 2; opacity: 0.85; pointer-events: none; }
    .link-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: help; }
    .node-rect { stroke: rgba(0,0,0,0.18); stroke-width: 1; rx: 10; ry: 10; }
    .node-label { font-size: 12px; fill: #fff; pointer-events: none; user-select:none; }

    /* Focus: stronger outline only */
    .is-focused .node-rect { stroke: rgba(0,0,0,0.85); stroke-width: 3; }

    /* Legends */
    .legend{
      position:absolute; top:12px; width:320px; box-sizing:border-box; max-height:calc(100% - 24px);
      overflow:auto; background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.10);
      border-radius:12px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,0.10);
      backdrop-filter: blur(6px); z-index: 5;
    }
    #legendNodes { left:12px; }
    #legendLinks { }

    .legend h3 { margin:0 0 8px 0; font-size:13px; font-weight:650; color:#111; }
    .legend .hint { margin:0 0 10px 0; font-size:11px; color:rgba(0,0,0,0.6); }
    #legendNodes, #legendLinks{ overflow:auto; }

    .legend-item{
      display:flex; align-items:center; gap:10px; padding:7px 8px;
      border-radius:10px; cursor:pointer; user-select:none; border:1px solid transparent;
    }
    .legend-item:hover { background:rgba(0,0,0,0.04); }
    .legend-item.is-off { opacity:0.45; }
    .legend-item.is-off .legend-swatch { filter: grayscale(1); opacity:0.6; }
    .legend-item.is-on { border-color:rgba(0,0,0,0.12); }

    .legend-swatch{ width:54px; height:10px; border-radius:999px; background:#999; }
    .legend-text{ display:flex; flex-direction:column; line-height:1.15; }
    .legend-label{ font-size:12px; color:#111; }
    .legend-meta{ font-size:11px; color:rgba(0,0,0,0.55); }

    .legend-actions{ display:flex; gap:8px; margin:8px 0 10px 0; }
    .btn{
      font-size:12px; padding:6px 10px; border-radius:10px;
      border:1px solid rgba(0,0,0,0.12); background:rgba(255,255,255,0.9);
      cursor:help;
	  box-shadow:0 2px 8px rgba(0, 0, 0, 0.10)
    }
    .btn:hover{ background:rgba(0,0,0,0.04); }
    .btn.is-active,
    .btn[aria-pressed="true"]{
      background:rgba(0,0,0,0.10);
      border-color:rgba(0,0,0,0.24);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
      font-weight:650;
    }

    .btn:disabled{
      opacity:0.45;
      cursor:not-allowed;
    }
    .cursorLabel{
      font-size:12px;
      color:rgba(0,0,0,0.55);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:22vw;
    }

    /* Breadcrumb */
	#status{
	font-size:12px; color:rgba(0,0,0,0.65);
	}
    #crumb{
      font-size:12px; color:rgba(0,0,0,0.65);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw;
    }
    #crumb b{ color:rgba(0,0,0,0.85); }

    /* Tooltip (custom, multiline) */
    #tooltip{
      position:fixed; z-index:80; pointer-events:none; display:none; max-width:340px;
      padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.95);
      border:1px solid rgba(0,0,0,0.12); box-shadow:0 10px 26px rgba(0,0,0,0.14);
      color:#111; font-size:12px; line-height:1.25; backdrop-filter: blur(6px);
    }
    #tooltip .t1 { font-weight:650; margin-bottom:2px; }
    #tooltip .t2 { color:rgba(0,0,0,0.65); }

    #timelineEventHoverTooltip{
      position:fixed; left:0; top:0; z-index:60; display:none; pointer-events:none;
      max-width:min(420px, calc(100vw - 24px));
      padding:10px 12px; border-radius:10px;
      background:rgba(255,255,255,0.97); border:1px solid rgba(0,0,0,0.12);
      box-shadow:0 10px 26px rgba(0,0,0,0.14); color:#111;
      font-size:12px; line-height:1.35; backdrop-filter: blur(6px);
    }
    #timelineEventHoverTooltip .teh-date{ font-weight:650; margin-bottom:6px; }
    #timelineEventHoverTooltip ul{ margin:0; padding-left:18px; }
    #timelineEventHoverTooltip li + li{ margin-top:4px; }

    /* Timeline toggle button (top right in topbar) */
    #timelineToggle{ display:none; }

/* Timeline panel */
    #timelinePanel{
      position:fixed; left:0; right:0; bottom:0; z-index:25;
      background:rgba(255,255,255,0.96);
      border-top:1px solid rgba(0,0,0,0.12);
      box-shadow:0 -12px 28px rgba(0,0,0,0.10);
      backdrop-filter: blur(8px);
      transform: translateY(100%);
      transition: transform 220ms ease;
      display:none; /* hidden if no time data */
    }
    #timelinePanel.is-open{ transform: translateY(0); }

    /* minimized: keep scale+slider visible, hide only rows */
    #timelinePanel.is-min #tlRows{ display:none; }
#timelineHeader{
      display:flex; justify-content:space-between; align-items:center;
      gap:12px; padding:10px 12px 8px 12px; border-bottom:1px solid rgba(0,0,0,0.08);
    }
    #timelineEventFeedback{
      flex:1 1 auto; min-width:0;
      font-size:12px; line-height:1.25; color:rgba(0,0,0,0.72);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      padding-right:8px;
    }
    #timelineEventFeedback:empty{
      visibility:hidden;
    }
    #timelineJumpArea{
      display:flex; flex-direction:column; align-items:flex-start;
      gap:6px; min-width:220px;
    }
    #timelineJumpFeedback{
      min-height:16px; font-size:11px; line-height:1.2; color:rgba(0,0,0,0.58);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
    }
    #timelineJumpFeedback.is-error{ color:#b42318; }
    #timelineJumpFeedback.is-info{ color:#555; }
    #timelineHeader .jumpToWrap{
      display:flex; align-items:center; gap:8px; min-width:0;
    }
    #timelineJumpInput{
      width:120px; min-height:32px; box-sizing:border-box;
      padding:0 10px; border:1px solid rgba(0,0,0,0.14); border-radius:8px;
      background:#fff; color:#111; font:inherit; font-size:12px;
    }
    #timelineJumpInput:focus{
      outline:none; border-color:rgba(0,0,0,0.28); box-shadow:0 0 0 3px rgba(0,0,0,0.06);
    }
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    #timelineHeaderActions{ display:flex; gap:8px; align-items:center; }
    #timelineHeaderActions .zoom-sep{ width:1px; height:18px; background:rgba(0,0,0,0.12); margin:0 2px; }

    #sliderWrap{
      display:grid; grid-template-columns:240px 1fr; gap:14px; padding:8px 12px 10px 12px;
      align-items:center;
    }
    .rangeInputs{ position:relative; height:52px; }
    .rangeInputs input[type="range"]{
      position:absolute; left:0; right:0; top:26px; width:100%;
      margin:0; pointer-events:none; height:26px; background:transparent;
    }
    #rangeMin{ cursor:pointer; }
    .rangeInputs input[type="range"]::-webkit-slider-thumb{ pointer-events: all; }
    .rangeInputs input[type="range"]::-moz-range-thumb{ pointer-events: all; }
    /* Normalize thumb size so slider and scale cursor align predictably */
    .rangeInputs input[type="range"]::-webkit-slider-thumb{
      width:16px; height:16px; cursor:pointer;
    }
    .rangeInputs input[type="range"]::-moz-range-thumb{
      width:16px; height:16px; cursor:pointer;
    }

    #sliderCurrentDate{
      position:absolute; top:0; transform:translateX(-50%);
      padding:2px 8px; border-radius:999px;
      background:#1f6feb; color:#fff;
      font-size:12px; font-weight:600; line-height:1.2;
      white-space:nowrap; pointer-events:none;
      box-shadow:0 4px 14px rgba(0,0,0,0.14);
    }


    /* Point-in-time mode: visually lock the second slider (rangeMax) */
    #rangeMax.range-locked{ opacity:0.35; }
    #rangeMax.range-locked{ cursor:not-allowed; }
    #rangeMax.range-locked::-webkit-slider-thumb{ pointer-events:none; }
    #rangeMax.range-locked::-moz-range-thumb{ pointer-events:none; }

    #timelineBody{
      max-height:34vh; overflow:auto; padding:0 12px 14px 12px;
      background:rgba(255,255,255,0.96);
    }
    #tlRowsWrap{
      position:relative;
      overflow:hidden;
      background:rgba(255,255,255,0.96);
    }
    #tlMarkerOverlay{
      position:absolute; inset:0;
      display:grid; grid-template-columns:240px 1fr; gap:10px;
      pointer-events:none; z-index:6;
    }
    #tlMarkerTrack{
      position:relative;
    }
    #tlMarkerLine{
      position:absolute; top:0; bottom:0; width:2px;
      background:rgba(0,0,0,0.55); transform:translateX(-50%);
      left:-9999px;
    }

    /* scale + rows */
    .tlRow{
      display:grid; grid-template-columns:240px 1fr; gap:10px;
      align-items:center; padding:6px 0;
      border-bottom:1px dashed rgba(0,0,0,0.08);
    }
    .tlRow:last-child { border-bottom:none; }
    .tlLabel{
      font-size:12px; color:rgba(0,0,0,0.75);
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .tlTrack{
      position:relative; height:16px; border-radius:999px;
      background:rgba(0,0,0,0.06); overflow:hidden;
    }
    .tlBar{
      position:absolute; top:2px; bottom:2px; border-radius:0;
      background:rgba(0,0,0,0.25);
      cursor:help;
      transition:filter 120ms ease, opacity 120ms ease;
    }
    .tlBar:hover{
      filter:brightness(1.12);
    }

    #tlScaleWrap{
      display:grid; grid-template-columns:240px 1fr; gap:10px;
      align-items:end; padding-top:10px; padding-bottom:8px;
      border-bottom:1px solid rgba(0,0,0,0.10);
      margin-bottom:8px;
      position:sticky; top:0; z-index:8;
      background:rgba(255,255,255,0.98);
    }
    #tlSortControls{
      display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    }
    #tlSortControls .btn{ cursor:pointer; }
    #tlScaleSvg{ width:100%; height:42px; display:block; }

    @media (max-width:780px){
      .tlRow, #tlScaleWrap { grid-template-columns:160px 1fr; }
    }
  
    #annotationPanel { width:320px; box-sizing:border-box; display:none; }
    /* Flexible properties panel in right sidebar */
    #annotationPanel{
      overflow:hidden; max-height:none; display:none; flex-direction:column;
      flex:1 1 auto; min-height:220px;
    }
    #annotationPanel .panel-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
    #annotationPanel h3{ margin:0; }
    #annotationPanel .tabs{ display:flex; gap:6px; flex-wrap:wrap; }
    #annotationPanel .tab-btn{
      appearance:none; border:1px solid rgba(0,0,0,0.12); background:rgba(255,255,255,0.9);
      border-radius:999px; padding:6px 10px; font-size:12px; line-height:1; cursor:pointer;
    }
    #annotationPanel .tab-btn:hover{ background:rgba(0,0,0,0.04); }
    #annotationPanel .tab-btn[aria-selected="true"]{
      background:rgba(0,0,0,0.08); border-color:rgba(0,0,0,0.18); font-weight:650;
    }
    #annotationPanel .annotation-stats{
      display:none;
      margin:0 0 10px 0;
      padding:8px 10px;
      border-radius:10px;
      background:rgba(0,0,0,0.04);
      color:rgba(0,0,0,0.78);
      font-size:12px;
      line-height:1.35;
    }
    #annotationPanel .annotation-stats strong{ color:#111; font-weight:700; }
    #annotationPanel .annotation-content{
      flex:1 1 auto; min-height:0;
      font-size:12px; line-height:1.35; color:#111;
      overflow-y:auto;
      padding-right:6px;
    }
    #annotationPanel .annotation-content p{ margin:0 0 8px 0; }
    #annotationPanel .annotation-content ul, #annotationPanel .annotation-content ol{ margin:0 0 8px 18px; padding:0; }
    #annotationPanel .annotation-content a{ color:inherit; text-decoration:underline; }
    #annotationPanel .summary-list{ display:flex; flex-direction:column; gap:10px; }
    #annotationPanel .summary-item{ padding-bottom:10px; border-bottom:1px dashed rgba(0,0,0,0.08); }
    #annotationPanel .summary-item:last-child{ padding-bottom:0; border-bottom:none; }
    #annotationPanel .summary-main{ color:#111; }
    #annotationPanel .summary-item.is-clickable{ cursor:pointer; }
    #annotationPanel .summary-item.is-clickable:hover .summary-main{ text-decoration:underline; }
    #annotationPanel .summary-item.is-clickable:focus-visible{ outline:2px solid rgba(0,0,0,0.35); outline-offset:2px; border-radius:8px; }
    #annotationPanel .summary-time{ margin-top:3px; font-size:11px; color:rgba(0,0,0,0.62); }

  
    /* --- Added UX improvements --- */
    .node, .node-rect { cursor:pointer; }

    .node, .link{
      transition: opacity 180ms ease;
    }

    .btn.is-active{
      background: rgba(0,0,0,0.08);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
    }

    .node.is-dimmed{
      opacity:0.12;
      transition: opacity 0.18s ease;
    }

    .link.is-dimmed{
      opacity:0.06;
      transition: opacity 0.18s ease;
    }