@font-face {
  font-family:"Syne";
  src:url("/fonts/syne-variable.ttf") format("truetype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Space Mono";
  src:url("/fonts/space-mono-regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#080e1b;
  --surface:#101a2c;
  --surface-raised:#142036;
  --ink:#e8eef8;
  --muted:#9caec5;
  --line:#24344d;
  --accent:#6ce6e4;
  --accent-soft:#153339;
  --accent-rgb:108,230,228;
  --amber:#e8bb79;
  --radius:12px;
  --display:"Syne",ui-sans-serif,sans-serif;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  font:14px/1.65 var(--font);
  background:radial-gradient(ellipse at 88% 0,rgba(var(--accent-rgb),.045),transparent 45%),var(--bg);
}
a {
  color:var(--accent);
  text-underline-offset:5px;
}
p {
  color:var(--muted);
}
h1,h2,h3 {
  font-family:var(--display);
  color:var(--ink);
}
button,input,select,textarea {
  font:inherit;
}
button,input,select,textarea {
  border:1px solid var(--line);
  border-radius:7px;
  max-width:100%;
}
input,select,textarea {
  background:#0b1424;
  color:var(--ink);
  padding:11px 13px;
  min-width:0;
}
select {
  color-scheme:dark;
}
textarea {
  resize:vertical;
}
button {
  cursor:pointer;
  background:var(--accent);
  color:#06131c;
  border-color:var(--accent);
  font-size:12px;
  font-weight:650;
  padding:11px 16px;
  line-height:1.4;
}
button:hover {
  filter:brightness(1.1);
}
button:disabled {
  opacity:.5;
  cursor:wait;
}
button.secondary,button.quiet {
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
button.quiet {
  font-size:11px;
}
input[type=checkbox] {
  accent-color:var(--accent);
  width:16px;
  height:16px;
  flex-shrink:0;
}
label {
  color:#bdcce0;
}
::selection {
  background:rgba(var(--accent-rgb),.3);
  color:#fff;
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
pre,code {
  font-family:var(--mono);
  overflow-wrap:anywhere;
}
pre {
  white-space:pre-wrap;
  background:#090f1d;
  border:1px solid var(--line);
  padding:18px;
  border-radius:8px;
  color:#c3d4e9;
  max-height:450px;
  overflow:auto;
  font-size:11px;
  line-height:1.75;
}
code {
  font-size:11px;
}
a,button {
  touch-action:manipulation;
}
.harbor-brand {
  font-family:var(--display);
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  font-size:22px;
  letter-spacing:-.8px;
  font-weight:800;
  text-decoration:none;
}
.brand-symbol,.mark {
  width:33px;
  height:36px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font:24px/1 var(--mono);
  color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.45);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),transparent);
  clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,25% 100%,0 75%);
}
.eyebrow {
  font:10px/1.6 var(--mono);
  letter-spacing:.18em;
  color:var(--accent);
  text-transform:uppercase;
}
.badge {
  font:10px/1.5 var(--mono);
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  border:1px solid #4b4439;
  background:#29241f;
  color:var(--amber);
  padding:3px 7px;
  border-radius:4px;
}
.notice {
  color:#b7c6da;
  border:1px solid var(--line);
  border-left:2px solid var(--amber);
  background:rgba(18,29,46,.7);
  font-size:11px;
  line-height:1.8;
}
.agent-glyph {
  width:42px;
  height:42px;
  flex-shrink:0;
  position:relative;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(var(--accent-rgb),.23);
  background:rgba(var(--accent-rgb),.045);
  border-radius:10px;
  overflow:hidden;
}
.agent-glyph:before,.agent-glyph:after {
  content:"";
  position:absolute;
  width:19px;
  height:19px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}
.agent-glyph:after {
  width:9px;
  height:9px;
  background:rgba(var(--accent-rgb),.25);
  transform:translate(7px,-5px) rotate(45deg);
}
.identity-1:before,.identity-4:before {
  border-radius:50%;
  transform:translate(-3px,2px);
}
.identity-2:before,.identity-5:before {
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:var(--accent);
  transform:translate(-3px,0);
}
.identity-3:after,.identity-4:after {
  transform:translate(-7px,5px) rotate(45deg);
}
.identity-5:after {
  border-radius:50%;
  transform:translate(8px,-5px);
}
.harbor-art {
  display:block;
  overflow:visible;
  width:100%;
  max-width:520px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}
.empty {
  border:1px dashed #3b4b64;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.035),transparent);
  border-radius:var(--radius);
  color:var(--muted);
}
.empty h2 {
  color:var(--ink);
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}
@media(max-width:650px) {
  .harbor-brand {
  font-family:var(--display);
    font-size:20px;
  }
  .brand-symbol,.mark {
    width:29px;
    height:32px;
  }
  .agent-glyph {
    width:35px;
    height:35px;
    border-radius:8px;
  }
}