@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #f2f1ec;
  --surface: #faf9f4;
  --surface-raised: #ffffff;
  --surface-active: #e9eeff;
  --border: rgba(10, 10, 10, 0.2);
  --border-strong: rgba(10, 10, 10, 0.52);
  --paper: #0a0a0a;
  --mist: #3f403d;
  --fog: #696a65;
  --blue: #075cff;
  --blue-hover: #0043c7;
  --blue-soft: rgba(7, 92, 255, 0.09);
  --green: #0b7a50;
  --amber: #9a6400;
  --red: #bc2f3d;
  --radius-sm: 0;
  --radius: 0;
  --sans: "Geologica Variable", "Segoe UI", Arial, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { max-width: 100%; overflow-x: clip; background: var(--canvas); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: clip;
}

button, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--canvas);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 62px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 9, 10, 0.96);
  backdrop-filter: blur(12px);
}
.topbar .motion-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.brand, .topbar-title, .topbar-actions, .connection-state { display: flex; align-items: center; }
.brand { width: max-content; gap: 10px; text-decoration: none; font-size: 17px; font-weight: 560; letter-spacing: -0.03em; }
.brand img { display: block; object-fit: contain; }
.topbar-title { gap: 9px; justify-self: center; color: var(--mist); font-size: 14px; }
.beta-mark { padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fog); font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; }
.topbar-actions { justify-self: end; gap: 10px; }
.connection-state { gap: 7px; color: var(--fog); font-size: 13px; white-space: nowrap; }
.connection-state i, .availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--fog); }
.connection-state.is-online i, .availability.is-online i { background: var(--green); }
.connection-state.is-waiting i { background: var(--amber); }

.quiet-button, .secondary-button, .icon-button, .user-button, .primary-button {
  min-height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.quiet-button, .secondary-button { padding: 8px 12px; color: var(--mist); font-size: 14px; }
.quiet-button:hover, .secondary-button:hover, .icon-button:hover { border-color: var(--border-strong); background: var(--surface-raised); color: var(--paper); }
.secondary-button { background: var(--surface-raised); }
.icon-button { display: grid; width: 38px; padding: 0; place-items: center; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.user-button { display: grid; width: 38px; padding: 0; place-items: center; background: var(--surface-raised); color: var(--mist); font-size: 14px; font-weight: 600; }
.user-button.is-sign-in { width: auto; padding: 0 13px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-color: var(--blue); background: var(--blue); color: #07111f; font-size: 14px; font-weight: 650; }
.primary-button:hover { border-color: var(--blue-hover); background: var(--blue-hover); }
.primary-button:disabled, .secondary-button:disabled { opacity: 0.45; cursor: not-allowed; }

.workspace { min-height: calc(100vh - 63px); }
.center-state { display: grid; min-height: calc(100vh - 63px); place-content: center; justify-items: center; color: var(--fog); }
.center-state img { margin-bottom: 12px; opacity: 0.84; }
.center-state p { margin: 0; font-size: 14px; }

.signed-out {
  width: min(1080px, calc(100% - 40px));
  min-height: calc(100vh - 63px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr);
  align-items: center;
  gap: 10vw;
  padding: 72px 0 96px;
}
.signed-out-copy { max-width: 650px; }
.signed-out-copy img { display: block; margin-bottom: 30px; }
.signed-out h1 { max-width: 680px; margin: 0; font-size: clamp(42px, 6vw, 72px); font-weight: 460; line-height: 1.02; letter-spacing: -0.065em; }
.signed-out-copy > p { max-width: 620px; margin: 28px 0; color: var(--mist); font-size: clamp(18px, 2vw, 21px); line-height: 1.6; letter-spacing: -0.018em; }
.signed-out-copy > span { display: block; margin-top: 14px; color: var(--fog); font-size: 13px; }
.signed-out-proof { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.proof-line { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; min-height: 64px; color: var(--fog); font-size: 14px; }
.proof-line:not(:last-child)::after { content: ""; position: absolute; top: 40px; bottom: -23px; left: 5px; width: 1px; background: var(--border-strong); }
.proof-line i { z-index: 1; width: 11px; height: 11px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.proof-line time { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.proof-line.is-done { color: var(--mist); }
.proof-line.is-done i { border-color: var(--blue); background: var(--blue); }
.proof-line.is-active { color: var(--paper); }
.proof-line.is-active i { border-color: var(--blue); background: var(--canvas); }

.app-view { display: grid; grid-template-columns: minmax(430px, 0.92fr) minmax(430px, 1.08fr); min-height: calc(100vh - 63px); }
.composer-column, .activity-column { min-width: 0; padding: clamp(30px, 4vw, 58px); }
.composer-column { border-right: 1px solid var(--border); }
.activity-column { background: #0a0b0c; }
.section-heading, .activity-header, .pairing-heading, .dialog-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
h1, h2, h3, p { margin-top: 0; }
.section-heading h1 { margin-bottom: 9px; font-size: clamp(27px, 3vw, 38px); font-weight: 480; line-height: 1.15; letter-spacing: -0.055em; }
.section-heading p, .activity-header p, .dialog-top p, .pairing-heading p { margin: 0; color: var(--fog); font-size: 14px; }
.section-heading p { max-width: 590px; }
.availability { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 31px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--fog); font-size: 12px; }

.mission-form { margin-top: 38px; }
.field-label { display: block; margin-bottom: 9px; color: var(--mist); font-size: 13px; font-weight: 550; }
textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--paper);
}
textarea { resize: vertical; min-height: 52px; padding: 14px 15px; line-height: 1.65; }
textarea::placeholder { color: #676c76; }
textarea:hover, select:hover { border-color: var(--border-strong); }
textarea:focus, select:focus { border-color: var(--blue); outline: none; }
select { height: 44px; padding: 0 38px 0 12px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.mode-fieldset { min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mode-option { display: block; cursor: pointer; }
.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option span { display: block; min-height: 80px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.mode-option strong, .mode-option small { display: block; }
.mode-option strong { color: var(--mist); font-size: 13px; font-weight: 570; }
.mode-option small { margin-top: 8px; color: var(--fog); font-size: 11px; line-height: 1.35; }
.mode-option:hover span { border-color: var(--border-strong); }
.mode-option input:checked + span { border-color: var(--blue); background: var(--blue-soft); }
.mode-option input:checked + span strong { color: var(--paper); }
.mode-option input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.constraints-field { margin-top: 18px; border: 0; }
.constraints-field summary { width: max-content; color: var(--mist); font-size: 13px; cursor: pointer; }
.constraints-field textarea { margin-top: 12px; }
.composer-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.composer-footer p { max-width: 430px; margin: 0; color: var(--fog); font-size: 12px; line-height: 1.55; }
.form-message { min-height: 22px; margin: 12px 0 0; color: var(--fog); font-size: 13px; }
.form-message.is-error { color: var(--red); }
.form-message.is-success { color: var(--green); }

.activity-header { align-items: center; padding-bottom: 19px; border-bottom: 1px solid var(--border); }
.activity-header h2 { margin-bottom: 3px; font-size: 20px; font-weight: 520; letter-spacing: -0.035em; }
.missions-list { display: grid; gap: 9px; padding-top: 18px; }
.mission-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mission-card[open] { border-color: var(--border-strong); }
.mission-card summary { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 17px 18px; list-style: none; cursor: pointer; }
.mission-card summary::-webkit-details-marker { display: none; }
.mission-card-title { min-width: 0; }
.mission-card-title strong { display: block; overflow: hidden; color: var(--paper); font-size: 14px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.mission-card-title span { display: block; margin-top: 4px; color: var(--fog); font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--mist); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--fog); }
.status-pill[data-status="PASS"] i { background: var(--green); }
.status-pill[data-status="FAIL"], .status-pill[data-status="ERROR"] { color: #f5a0a0; }
.status-pill[data-status="FAIL"] i, .status-pill[data-status="ERROR"] i { background: var(--red); }
.status-pill[data-status="RUNNING"] i { background: var(--blue); }
.status-pill[data-status="QUEUED"] i { background: var(--amber); }
.mission-detail { padding: 3px 18px 19px; border-top: 1px solid var(--border); }
.mission-goal { margin: 16px 0; color: var(--mist); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.mission-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 20px 0 18px; }
.rail-step { position: relative; padding-top: 17px; color: var(--fog); font-size: 11px; }
.rail-step::before { content: ""; position: absolute; top: 4px; right: 0; left: 0; height: 1px; background: var(--border-strong); }
.rail-step::after { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.rail-step.is-done, .rail-step.is-active { color: var(--mist); }
.rail-step.is-done::before { background: var(--blue); }
.rail-step.is-done::after { border-color: var(--blue); background: var(--blue); }
.rail-step.is-active::after { border-color: var(--blue); }
.receipt { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.receipt > div { padding: 12px; }
.receipt > div:nth-child(odd) { border-right: 1px solid var(--border); }
.receipt > div:nth-child(n+3) { border-top: 1px solid var(--border); }
.receipt span, .receipt strong { display: block; }
.receipt span { color: var(--fog); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.receipt strong { margin-top: 5px; color: var(--mist); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.empty-runs { display: grid; min-height: 410px; place-content: center; justify-items: center; text-align: center; }
.empty-runs h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 510; letter-spacing: -0.03em; }
.empty-runs p { max-width: 390px; margin: 0; color: var(--fog); font-size: 13px; }
.empty-rail { display: flex; align-items: center; width: 174px; }
.empty-rail i { width: 11px; height: 11px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.empty-rail i:first-child { border-color: var(--blue); background: var(--blue); }
.empty-rail i:not(:last-child)::after { content: ""; display: block; width: 71px; height: 1px; margin: 4px 0 0 10px; background: var(--border-strong); }

.connections-dialog { width: min(690px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--paper); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5); }
.connections-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.dialog-top { padding: 22px; border-bottom: 1px solid var(--border); }
.dialog-top h2 { margin-bottom: 7px; font-size: 19px; font-weight: 520; letter-spacing: -0.035em; }
.dialog-top p { max-width: 530px; line-height: 1.55; }
.connectors-list { display: grid; gap: 8px; padding: 18px 22px 0; }
.connector-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0c0d0e; }
.connector-row strong, .connector-row span { display: block; }
.connector-row strong { font-size: 14px; font-weight: 540; }
.connector-row span { margin-top: 4px; color: var(--fog); font-size: 12px; }
.pairing-panel { margin: 18px 22px 22px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0c0d0e; }
.pairing-heading { align-items: center; }
.pairing-heading h3 { margin-bottom: 5px; font-size: 15px; font-weight: 540; }
.pairing-heading p { max-width: 440px; }
.pairing-result { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--border); }
.pairing-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pairing-code-row code { color: var(--paper); font: 600 20px/1.2 var(--mono); letter-spacing: 0.07em; }
.pairing-result p { margin: 10px 0; color: var(--fog); font-size: 12px; }
.command-line { display: block; overflow-x: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--canvas); color: var(--mist); font: 12px/1.6 var(--mono); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 16px; }
  .topbar-title, .connection-state { display: none; }
  .signed-out { grid-template-columns: 1fr; gap: 50px; padding-top: 54px; }
  .signed-out-proof { max-width: 560px; }
  .app-view { grid-template-columns: 1fr; }
  .composer-column { border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 580px) {
  .topbar { min-height: 58px; }
  .brand span, .quiet-button#connections-button { display: none; }
  .workspace { min-height: calc(100vh - 59px); }
  .signed-out { width: calc(100% - 30px); min-height: calc(100vh - 59px); padding: 46px 0 68px; }
  .signed-out h1 { font-size: 42px; }
  .signed-out-copy > p { font-size: 17px; }
  .composer-column, .activity-column { padding: 26px 18px 40px; }
  .section-heading { display: block; }
  .availability { width: max-content; margin-top: 16px; }
  .field-pair, .mode-grid { grid-template-columns: 1fr; }
  .mode-option span { min-height: 66px; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-footer .primary-button { width: 100%; }
  .dialog-top, .pairing-heading { display: block; }
  .dialog-top .icon-button { position: absolute; top: 14px; right: 14px; }
  .pairing-heading .secondary-button { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Shared Lians paper system: the app is denser than the site, not a different brand. */
.topbar {
  min-height: 64px;
  border-bottom-color: var(--border-strong);
  background: rgba(242, 241, 236, 0.96);
  backdrop-filter: none;
}
.brand { font-family: "Doto Variable", var(--mono); font-size: 20px; font-weight: 800; }
.brand img { width: 27px; height: 27px; }
.beta-mark,
.availability,
.connection-state,
.status-pill,
.field-label,
.mode-option strong,
.mode-option small,
.mission-card-title span,
.receipt,
.pairing-code-row code,
.command-line { font-family: var(--mono); }
.quiet-button,
.secondary-button,
.icon-button,
.user-button,
.primary-button {
  border-color: var(--border-strong);
  border-radius: 0;
  transition: background-color 120ms cubic-bezier(0, 0, .2, 1), color 120ms cubic-bezier(0, 0, .2, 1), border-color 120ms cubic-bezier(0, 0, .2, 1), transform 90ms cubic-bezier(0, 0, .2, 1);
}
.quiet-button:active,
.secondary-button:active,
.icon-button:active,
.user-button:active,
.primary-button:active { transform: scale(.98); }
.primary-button { border-color: var(--blue); color: #fff; }
.secondary-button,
.user-button { background: var(--surface); }
.signed-out {
  position: relative;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: clamp(48px, 8vw, 110px);
}
.signed-out::before {
  content: "LIANS / WEB TO LOCAL / BOUNDED PROOF";
  position: absolute;
  inset: 28px 0 auto;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--blue);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .08em;
}
.signed-out h1 {
  font-family: "Doto Variable", var(--mono);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 850;
  line-height: .84;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.signed-out-copy > p { color: var(--mist); }
.signed-out-proof {
  padding: 0;
  border-color: var(--border-strong);
  border-radius: 0;
  background: var(--surface);
}
.proof-line { min-height: 84px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.proof-line:last-child { border-bottom: 0; }
.proof-line:not(:last-child)::after { top: 49px; bottom: -35px; left: 25px; }
.proof-line i { background: var(--surface); }
.proof-line.is-active i { background: var(--surface); }
.app-view { grid-template-columns: minmax(430px, .96fr) minmax(430px, 1.04fr); }
.composer-column { border-right-color: var(--border-strong); }
.activity-column { background: var(--surface); }
.section-heading h1,
.activity-header h2,
.dialog-top h2 { font-family: "Doto Variable", var(--mono); font-weight: 800; text-transform: uppercase; }
textarea,
select,
.mode-option span,
.mission-card,
.receipt,
.connections-dialog,
.connector-row,
.pairing-panel,
.command-line {
  border-radius: 0;
  background: var(--surface);
}
textarea::placeholder { color: var(--fog); }
.mode-option span { transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; }
.mode-option:hover span { transform: translateY(-2px); }
.mission-card {
  content-visibility: auto;
  contain-intrinsic-size: 84px 270px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.mission-card:hover { border-color: var(--border-strong); }
.mission-card[open] { border-color: var(--blue); }
.mission-card-title strong { color: var(--paper); }
.mission-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.mission-cancel { color: var(--red); border-color: rgba(188, 47, 61, .42); }
.mission-cancel:hover { color: #fff; border-color: var(--red); background: var(--red); }
.connector-row,
.pairing-panel { background: var(--surface-raised); }
.command-line { background: var(--canvas); }
.connections-dialog { box-shadow: 10px 10px 0 rgba(10, 10, 10, .18); }
.connections-dialog::backdrop { background: rgba(10, 10, 10, .44); }
.status-pill[data-status="RUNNING"] i { animation: runningSignal 1.4s ease-in-out infinite; }

@keyframes runningSignal { 50% { opacity: .35; transform: scale(.72); } }

@media (max-width: 900px) {
  .signed-out { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .signed-out::before { top: 20px; }
  .signed-out h1 { font-size: clamp(48px, 16vw, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill[data-status="RUNNING"] i { animation: none; }
}