/* Layout: one hex-editor workspace. Hero = dump + pattern panel + inspector; then activity graph,
   now + packet capture, section table (threads), strings (contact). Single dark look by design.
   Fonts are self-hosted: Martian Mono (variable weight + width) and Hanken Grotesk (variable weight). */
@font-face{
  font-family:"Martian Mono"; src:url("/assets/fonts/martian-mono.woff2") format("woff2");
  font-weight:100 800; font-stretch:75% 112.5%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk"; src:url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --bg:#0E1325; --panel:#141A31; --line:#262E4C; --fg:#CDD5EA; --hi:#F2F5FC; --dim:#7380A3; --off:#4D5879;
  --f-hdr:#8E9AC0; --f-name:#FF8FA8; --f-role:#6FD6C0; --f-cert:#FFCF6E; --f-night:#A9B9FF; --f-week:#F6A27A; --f-link:#E3A2F0;
  --mono:"Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --prose:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--fg); font:400 16px/1.65 var(--prose); margin:0; padding:0 16px; padding-block:24px 48px; }
a{ color:var(--hi); text-decoration:underline; text-decoration-color:var(--off); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--hi); }
:focus-visible{ outline:2px solid var(--f-cert); outline-offset:2px; }
.ws{ max-width:1120px; margin:0 auto; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.mono{ font-family:var(--mono); font-variation-settings:"wdth" 87; }

/* skip link: hidden until focused */
.skip-link{ position:fixed; left:12px; top:-100px; z-index:100; padding:8px 14px; background:var(--panel); color:var(--hi);
  border:1px solid var(--f-cert); border-radius:4px; font:400 .78rem/1.4 var(--mono); font-variation-settings:"wdth" 87; text-decoration:none; }
.skip-link:focus, .skip-link:focus-visible{ top:12px; }

/* tab bar */
.tabbar{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:10px var(--pad); border-bottom:1px solid var(--line); background:var(--panel);
  font:400 .74rem/1.4 var(--mono); font-variation-settings:"wdth" 85; color:var(--dim); }
.tabbar b{ color:var(--hi); font-weight:500; }
.tabbar .grow{ flex:1; }
.tabbar button{ font:inherit; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:4px; padding:4px 10px; cursor:pointer; }
.tabbar button:hover{ border-color:var(--dim); color:var(--hi); }
.tabbar nav{ display:flex; gap:14px; }
.tabbar nav a{ color:var(--dim); text-decoration:none; }
.tabbar nav a:hover, .tabbar nav a[aria-current]{ color:var(--hi); }

/* hero */
.hero{ padding:clamp(28px,5vw,56px) var(--pad) clamp(20px,3vw,28px); display:grid; gap:clamp(18px,2.5vw,26px); }
.name{ margin:0; font-family:var(--mono); font-weight:700; font-variation-settings:"wdth" 112; font-size:clamp(1.9rem,6.6vw,4.4rem); line-height:1; letter-spacing:-.03em; color:var(--hi); white-space:nowrap; }
.name .sc{ color:var(--f-name); }
.lede{ margin:0; font-size:clamp(1.05rem,1.8vw,1.22rem); max-width:52ch; color:var(--fg); }
.ed{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(20px,3vw,36px); align-items:start; margin-top:8px; }

.hexwrap{ display:grid; gap:10px; min-width:0; }
.hex{ font:400 clamp(.7rem,1.25vw,.82rem)/1.85 var(--mono); font-variation-settings:"wdth" 87; overflow-x:auto; font-variant-numeric:tabular-nums; outline:none; border-radius:3px; }
.hex:focus-visible{ box-shadow:0 0 0 1px var(--off); }
.hx-row{ display:flex; gap:1.6ch; white-space:pre; }
.hx-off{ color:var(--off); }
.hx-bytes, .hx-ascii{ display:flex; }
.hx-bytes span{ padding:0 .3ch; }
.hx-ascii span{ padding:0 .05ch; }
.hex span[data-i]{ color:var(--off); transition:background-color .18s, color .18s; }
.hex span[data-i].p{ background:color-mix(in srgb, var(--c) 16%, transparent); color:color-mix(in srgb, var(--c) 78%, var(--fg)); }
.hex.focus span[data-i].p{ background:transparent; color:var(--off); }
.hex.focus span[data-i].p.on{ background:color-mix(in srgb, var(--c) 42%, transparent); color:#FFFFFF; }
.hex span.cur{ box-shadow:inset 0 0 0 1px var(--hi); }
.hex.blink span.cur{ animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ box-shadow:none; } }
.hex span.scan{ background:var(--hi) !important; color:var(--bg) !important; }
.hex span.pad{ color:transparent; }

.status{ display:flex; flex-wrap:wrap; gap:4px 18px; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:4px;
  font:400 .72rem/1.5 var(--mono); font-variation-settings:"wdth" 85; color:var(--dim); font-variant-numeric:tabular-nums; min-height:2.6em;
  contain:inline-size; /* the dump, not the status text, sets the editor column width */ }
.status b{ color:var(--hi); font-weight:500; }
.status .fld{ color:var(--c, var(--hi)); }

.pat-wrap{ overflow-x:auto; min-width:0; }
table{ border-collapse:collapse; width:100%; font:400 .82rem/1.5 var(--mono); font-variation-settings:"wdth" 87; }
th{ text-align:left; font-weight:500; color:var(--dim); padding:6px 10px; border-bottom:1px solid var(--line); }
td{ padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
#pat tr{ outline:none; transition:opacity .25s; }
#pat tr.wait{ opacity:.32; }
#pat tr:hover, #pat tr:focus-visible, #pat tr.hl{ background:color-mix(in srgb, var(--c) 12%, transparent); }
#pat tr:focus-visible td:first-child{ box-shadow:inset 2px 0 0 var(--c); }
td.f{ color:var(--c); white-space:nowrap; }
td.f::before{ content:""; display:inline-block; width:.6em; height:.6em; margin-right:.6em; background:var(--c); border-radius:1px; vertical-align:.05em; }
td.t{ color:var(--dim); white-space:nowrap; }
td.v{ color:var(--hi); font-family:var(--prose); font-size:.95rem; }

/* panels below the hero */
.panel{ padding:clamp(24px,4vw,40px) var(--pad); border-top:1px solid var(--line); }
h2{ margin:0 0 14px; font:500 .8rem/1.4 var(--mono); font-variation-settings:"wdth" 87; color:var(--dim); }
h2 .hint{ color:var(--off); margin-left:.8ch; }

.graph svg{ width:100%; height:clamp(90px,12vw,130px); display:block; overflow:visible; }
.graph .axis{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px; font:400 .72rem/1.5 var(--mono); font-variation-settings:"wdth" 85; color:var(--dim); font-variant-numeric:tabular-nums; }
.graph .line{ fill:none; stroke:var(--f-night); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.graph .area{ fill:color-mix(in srgb, var(--f-night) 14%, transparent); }
.graph .wk{ fill:color-mix(in srgb, var(--f-cert) 12%, transparent); }
.graph .base{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
/* the graph is visible when JS never runs: the clip only applies once JS adds .anim */
.graph.anim svg{ clip-path:inset(0 100% 0 0); }
.graph.anim.go svg{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.3,.7,.3,1); }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,4vw,48px); }
.split.solo{ grid-template-columns:minmax(0,1fr); }
.now p{ margin:0 0 12px; max-width:56ch; }
.now b{ font-weight:600; color:var(--hi); }
.now .train{ color:var(--dim); }

.pkts td{ font-size:.78rem; }
.pkts tbody tr.pk{ cursor:pointer; outline:none; }
.pkts tr.rel td{ background:color-mix(in srgb, var(--f-night) 9%, transparent); }
.pkts tr.mrg td{ background:color-mix(in srgb, var(--f-role) 8%, transparent); }
.pkts tr.pk:hover td, .pkts tr.pk:focus-visible td{ filter:brightness(1.35); }
.pkts tr.pk[aria-expanded="true"] td{ background:color-mix(in srgb, var(--hi) 12%, transparent); color:var(--hi); }
.pkts td.n{ color:var(--off); width:3ch; }
.pkts td.s{ color:var(--hi); }
.pkts td.i{ font-family:var(--prose); font-size:.9rem; }
.pkts tr.det td{ padding:0; border-bottom:1px solid var(--line); background:var(--panel); }
.det .tree{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.det.open .tree{ grid-template-rows:1fr; }
.det .tree > div{ overflow:hidden; }
.det ul{ list-style:none; margin:0; padding:10px 14px 12px; font:400 .76rem/1.75 var(--mono); font-variation-settings:"wdth" 85; color:var(--fg); }
.det li{ white-space:normal; overflow-wrap:anywhere; }
.det li::before{ content:"▸ "; color:var(--off); }
.det li.top::before{ content:"▾ "; }
.det li.sub{ padding-left:2.2ch; }
.det li.sub::before{ content:""; }
.det .k{ color:var(--dim); }
.pk-key{ margin:10px 0 0; font:400 .72rem/1.5 var(--mono); font-variation-settings:"wdth" 85; color:var(--dim); display:flex; gap:16px; flex-wrap:wrap; }
.pk-key span::before{ content:""; display:inline-block; width:.8em; height:.8em; margin-right:.5em; vertical-align:-.05em; border-radius:1px; }
.pk-key .k-rel::before{ background:color-mix(in srgb, var(--f-night) 35%, transparent); }
.pk-key .k-mrg::before{ background:color-mix(in srgb, var(--f-role) 35%, transparent); }

.sect td.f{ color:var(--hi); }
.sect td.f::before{ display:none; }
.sect tbody tr:hover td{ background:color-mix(in srgb, var(--hi) 4%, transparent); }
.sect td.v{ font-size:.92rem; }
.priv{ color:var(--dim); }
.priv::after{ content:" (private)"; color:var(--off); font-family:var(--mono); font-size:.72rem; font-variation-settings:"wdth" 85; }
.sect .desc{ display:block; color:var(--dim); font-size:.86rem; }
.more{ margin:14px 0 0; font:400 .78rem/1.5 var(--mono); font-variation-settings:"wdth" 87; }

/* wraps instead of scrolling so the contact strings stay readable on narrow screens */
.strings pre{ margin:0; font:400 .82rem/1.9 var(--mono); font-variation-settings:"wdth" 87; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--fg); }
.strings .o{ color:var(--off); }
.strings .cmd{ color:var(--dim); }

.eof{ padding:12px var(--pad); border-top:1px solid var(--line); background:var(--panel); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font:400 .72rem/1.5 var(--mono); font-variation-settings:"wdth" 85; color:var(--off); }

/* projects page: a hero panel, then one panel per thread with a table of entries */
.proj-hero{ padding:clamp(28px,5vw,56px) var(--pad) clamp(20px,3vw,28px); display:grid; gap:12px; }
.proj-title{ margin:0; font-family:var(--mono); font-weight:700; font-variation-settings:"wdth" 112; font-size:clamp(1.6rem,4.5vw,2.8rem); line-height:1.1; letter-spacing:-.03em; color:var(--hi); }
.proj-lede{ margin:0; max-width:60ch; font-size:clamp(1rem,1.6vw,1.12rem); }
.proj-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 0 14px; }
.proj-sec{ color:var(--hi); font-weight:500; }
.proj-name{ color:var(--hi); font-family:var(--prose); font-size:1.15rem; font-weight:600; font-variation-settings:normal; }
.proj-desc{ color:var(--off); font-weight:400; }
.proj-table td{ font-size:.82rem; }
.proj-table td.proj-entry{ white-space:nowrap; font-family:var(--mono); color:var(--hi); }
.proj-table td.proj-entry a{ color:var(--hi); }
.proj-table tbody tr:hover td{ background:color-mix(in srgb, var(--hi) 4%, transparent); }
.lang{ display:inline-block; padding:1px 8px; border:1px solid var(--line); border-radius:999px; color:var(--dim); font:400 .72rem/1.5 var(--mono); font-variation-settings:"wdth" 85; white-space:nowrap; }
.proj-blurb{ font-family:var(--prose); font-size:.92rem; color:var(--fg); }

/* 404 */
.err{ padding:clamp(40px,8vw,96px) var(--pad); display:grid; gap:14px; justify-items:start; }
.err-code{ margin:0; font:500 .8rem/1.4 var(--mono); font-variation-settings:"wdth" 87; color:var(--off); }
.err h1{ margin:0; font-family:var(--mono); font-weight:700; font-variation-settings:"wdth" 112; font-size:clamp(1.5rem,4.5vw,2.8rem); line-height:1.1; letter-spacing:-.03em; color:var(--f-name); }
.err p{ margin:0; max-width:56ch; }

/* Two editor columns only where the 16-per-row dump and a readable pattern table both fit;
   main.js reads the pattern column's min-width to decide 16 or 8 bytes per row. */
@media (min-width:1181px){
  .ed{ column-gap:28px; }
  .ed > .pat-wrap{ min-width:20rem; }
  .ed th, .ed td{ padding-inline:8px; }
}
@media (max-width:1180px){ .ed{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px){ .split{ grid-template-columns:minmax(0,1fr); } .name{ white-space:normal; } }
@media (max-width:540px){
  th, td{ padding-inline:6px; }
  table{ font-size:.74rem; }
  td.t{ white-space:normal; }
  td.v{ font-size:.88rem; }
  .ed td.v{ overflow-wrap:anywhere; }
  .strings pre{ font-size:.74rem; }
  /* projects: each entry stacks, the description on its own line under the name and language */
  .proj-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .proj-table tbody tr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:10px 6px; border-bottom:1px solid var(--line); }
  .proj-table td{ display:block; padding:0; border:0; }
  .proj-table td.proj-entry{ white-space:normal; overflow-wrap:anywhere; }
  .proj-table td.proj-blurb{ flex-basis:100%; }
}
@media (prefers-reduced-motion: reduce){
  .hex span[data-i], #pat tr, .det .tree{ transition:none; }
  .hex.blink span.cur{ animation:none; }
  .graph.anim.go svg{ transition:none; }
}