<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CASEBOOK — Blackwood Dossier</title> <style> :root { --bg: #0c0a09; --bar: #100e0c; --panel: #141110; --panel2: #1a1614; --line: #2a2522; --txt: #d9d4cc; --dim: #8d867c; --faint: #5d574f; --red: #e13c32; --red-dim: #8c2620; --mono: "Courier New", Courier, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--bg); font-family: var(--sans); color: var(--txt); } #stage { position: fixed; inset: 0; cursor: grab; } #stage.dragging { cursor: grabbing; } #stage.item { cursor: pointer; } #stage.connecting { cursor: crosshair; } #stage.lasso { cursor: crosshair; } #lassoCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 4; } #vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( ellipse 120% 90% at 44% 40%, transparent 42%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.7) 100% ); } #glare { position: fixed; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0.5; background: radial-gradient( ellipse 46% 34% at 30% 16%, rgba(255, 196, 110, 0.15), transparent 70% ); } /* ===================== TOP BAR ===================== */ #topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--line); } .iconbtn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--dim); border: 1px solid transparent; flex: 0 0 auto; background: transparent; position: relative; transition: all 0.15s; } .iconbtn:hover { background: var(--panel2); color: var(--txt); } .iconbtn svg { width: 17px; height: 17px; } #logo { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; display: flex; align-items: center; gap: 7px; white-space: nowrap; } #logo .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 2.2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } #crumb { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #crumb b { color: var(--txt); font-weight: 600; } #crumb .sep { margin: 0 8px; color: var(--faint); } #tspace { flex: 1; } #avatars { display: flex; align-items: center; } .av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bar); margin-left: -7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; } .av.more { background: var(--panel2); color: var(--dim); font-size: 10px; } #shareBtn { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s; } #shareBtn:hover { border-color: var(--dim); } .badge { position: absolute; top: -3px; right: -3px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* ===================== LEFT RAIL ===================== */ #rail { position: fixed; left: 12px; top: 70px; bottom: 86px; width: 64px; z-index: 20; background: var(--bar); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow-y: auto; scrollbar-width: none; } #rail::-webkit-scrollbar { display: none; } .rtool { width: 52px; padding: 7px 0 6px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--dim); transition: all 0.15s; flex: 0 0 auto; } .rtool svg { width: 18px; height: 18px; } .rtool span { font-size: 8.5px; letter-spacing: 0.02em; text-align: center; line-height: 1.15; } .rtool:hover { background: var(--panel2); color: var(--txt); } .rtool.on { background: var(--red-dim); color: #fff; } .rsep { width: 36px; height: 1px; background: var(--line); margin: 5px 0; flex: 0 0 auto; } /* ===================== BOTTOM BAR ===================== */ #bottombar { position: fixed; left: 0; right: 0; bottom: 0; height: 72px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 0 16px; pointer-events: none; } #bottombar > * { pointer-events: auto; } .bpill { display: flex; align-items: center; gap: 8px; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--txt); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .bpill:hover { border-color: var(--dim); } .bpill svg { width: 15px; height: 15px; color: var(--dim); } .bpill .cnt { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } #bspace { flex: 1; } #navcluster { display: flex; align-items: center; gap: 0; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } #minimap { width: 120px; height: 52px; background: #080606; cursor: pointer; border-right: 1px solid var(--line); } .nbtn { width: 40px; height: 52px; display: flex; align-items: center; justify-content: center; color: var(--dim); cursor: pointer; transition: all 0.12s; border: none; background: transparent; font-size: 16px; } .nbtn:hover { background: var(--panel2); color: var(--txt); } .nbtn.on { color: #fff; background: var(--red-dim); } .nbtn svg { width: 16px; height: 16px; } #zoomPct { min-width: 52px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--txt); } /* ===================== RIGHT INSPECTOR ===================== */ #inspector { position: fixed; right: 12px; top: 70px; bottom: 86px; width: 296px; z-index: 20; background: var(--bar); border: 1px solid var(--line); border-radius: 12px; display: none; flex-direction: column; overflow: hidden; } #inspector.open { display: flex; } #insHead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; flex: 0 0 auto; } .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700; color: var(--dim); text-transform: uppercase; } #insBody { flex: 1; overflow-y: auto; padding: 0 16px 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } #itemCard { display: flex; gap: 12px; margin-bottom: 6px; } #itemThumb { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; background: var(--panel2); border: 1px solid var(--line); flex: 0 0 auto; } #itemName { font-size: 14.5px; font-weight: 700; line-height: 1.25; } #itemType { font-size: 12px; color: var(--dim); margin-top: 3px; } #itemMeta { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.45; } .insSec { margin-top: 18px; } .insSecHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .connRow { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12.5px; cursor: pointer; border-radius: 6px; } .connRow:hover { background: var(--panel2); } .connDot { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; border: 1px solid var(--line); } .connName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .connBar { width: 44px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 0 0 auto;Lines 1–500 of 4443. Load more
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CASEBOOK — Blackwood Dossier</title> <style> :root { --bg: #0c0a09; --bar: #100e0c; --panel: #141110; --panel2: #1a1614; --line: #2a2522; --txt: #d9d4cc; --dim: #8d867c; --faint: #5d574f; --red: #e13c32; --red-dim: #8c2620; --mono: "Courier New", Courier, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--bg); font-family: var(--sans); color: var(--txt); } #stage { position: fixed; inset: 0; cursor: grab; } #stage.dragging { cursor: grabbing; } #stage.item { cursor: pointer; } #stage.connecting { cursor: crosshair; } #stage.lasso { cursor: crosshair; } #lassoCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 4; } #vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( ellipse 120% 90% at 44% 40%, transparent 42%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.7) 100% ); } #glare { position: fixed; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0.5; background: radial-gradient( ellipse 46% 34% at 30% 16%, rgba(255, 196, 110, 0.15), transparent 70% ); } /* ===================== TOP BAR ===================== */ #topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--line); } .iconbtn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--dim); border: 1px solid transparent; flex: 0 0 auto; background: transparent; position: relative; transition: all 0.15s; } .iconbtn:hover { background: var(--panel2); color: var(--txt); } .iconbtn svg { width: 17px; height: 17px; } #logo { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; display: flex; align-items: center; gap: 7px; white-space: nowrap; } #logo .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 2.2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } #crumb { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #crumb b { color: var(--txt); font-weight: 600; } #crumb .sep { margin: 0 8px; color: var(--faint); } #tspace { flex: 1; } #avatars { display: flex; align-items: center; } .av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bar); margin-left: -7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; } .av.more { background: var(--panel2); color: var(--dim); font-size: 10px; } #shareBtn { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s; } #shareBtn:hover { border-color: var(--dim); } .badge { position: absolute; top: -3px; right: -3px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* ===================== LEFT RAIL ===================== */ #rail { position: fixed; left: 12px; top: 70px; bottom: 86px; width: 64px; z-index: 20; background: var(--bar); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow-y: auto; scrollbar-width: none; } #rail::-webkit-scrollbar { display: none; } .rtool { width: 52px; padding: 7px 0 6px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--dim); transition: all 0.15s; flex: 0 0 auto; } .rtool svg { width: 18px; height: 18px; } .rtool span { font-size: 8.5px; letter-spacing: 0.02em; text-align: center; line-height: 1.15; } .rtool:hover { background: var(--panel2); color: var(--txt); } .rtool.on { background: var(--red-dim); color: #fff; } .rsep { width: 36px; height: 1px; background: var(--line); margin: 5px 0; flex: 0 0 auto; } /* ===================== BOTTOM BAR ===================== */ #bottombar { position: fixed; left: 0; right: 0; bottom: 0; height: 72px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 0 16px; pointer-events: none; } #bottombar > * { pointer-events: auto; } .bpill { display: flex; align-items: center; gap: 8px; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--txt); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .bpill:hover { border-color: var(--dim); } .bpill svg { width: 15px; height: 15px; color: var(--dim); } .bpill .cnt { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } #bspace { flex: 1; } #navcluster { display: flex; align-items: center; gap: 0; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } #minimap { width: 120px; height: 52px; background: #080606; cursor: pointer; border-right: 1px solid var(--line); } .nbtn { width: 40px; height: 52px; display: flex; align-items: center; justify-content: center; color: var(--dim); cursor: pointer; transition: all 0.12s; border: none; background: transparent; font-size: 16px; } .nbtn:hover { background: var(--panel2); color: var(--txt); } .nbtn.on { color: #fff; background: var(--red-dim); } .nbtn svg { width: 16px; height: 16px; } #zoomPct { min-width: 52px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--txt); } /* ===================== RIGHT INSPECTOR ===================== */ #inspector { position: fixed; right: 12px; top: 70px; bottom: 86px; width: 296px; z-index: 20; background: var(--bar); border: 1px solid var(--line); border-radius: 12px; display: none; flex-direction: column; overflow: hidden; } #inspector.open { display: flex; } #insHead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; flex: 0 0 auto; } .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700; color: var(--dim); text-transform: uppercase; } #insBody { flex: 1; overflow-y: auto; padding: 0 16px 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } #itemCard { display: flex; gap: 12px; margin-bottom: 6px; } #itemThumb { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; background: var(--panel2); border: 1px solid var(--line); flex: 0 0 auto; } #itemName { font-size: 14.5px; font-weight: 700; line-height: 1.25; } #itemType { font-size: 12px; color: var(--dim); margin-top: 3px; } #itemMeta { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.45; } .insSec { margin-top: 18px; } .insSecHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .connRow { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12.5px; cursor: pointer; border-radius: 6px; } .connRow:hover { background: var(--panel2); } .connDot { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; border: 1px solid var(--line); } .connName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .connBar { width: 44px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 0 0 auto;