@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader/newsreader.d42d83e8b765.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/dmsans/dmsans.a4cc67301e8a.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ky-page: #FFFFFF;
  --ky-canvas: #F5F5F5;
  --ky-surface: #FFFFFF;
  --ky-inset: #F5F5F5;
  --ky-text: #151515;
  --ky-muted: #626262;
  --ky-border: #DEDEDE;
  --ky-hover: #F0F0F0;
  --ky-selected: #EDEDED;
  --ky-button: #151515;
  --ky-button-hover: #333333;
  --ky-on-button: #FFFFFF;
  --ky-focus: #215ED0;
  --ky-success: #167045;
  --ky-success-surface: #EDF8F0;
  --ky-warning: #855B00;
  --ky-warning-surface: #FFF7D6;
  --ky-accent-blue: #3D91FF;
  --ky-accent-red: #FA5144;
  --ky-accent-green: #1DBD56;
  --ky-accent-yellow: #F3C400;
  --ky-font-heading: "Newsreader", Georgia, serif;
  --ky-font-body: "DM Sans", system-ui, sans-serif;
  --grid-size: 80px;
  --grid-major: 320px;
  --grid-plane-size: calc((100vw + 100vh) * 0.7071067811865476);
}

* { box-sizing: border-box; }
html { background: var(--ky-page); color: var(--ky-text); font-family: var(--ky-font-body); font-optical-sizing: auto; font-synthesis: none; scroll-behavior: smooth; }
body { min-width: 0; min-height: 100vh; margin: 0; isolation: isolate; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ky-focus); outline-offset: 4px; }
::selection { background: var(--ky-text); color: var(--ky-page); }

.blueprint { position: absolute; inset: 0 0 auto; height: 790px; z-index: -1; pointer-events: none; overflow: hidden; }
.blueprint-plane { position: absolute; top: 50%; left: 50%; width: var(--grid-plane-size); height: var(--grid-plane-size); transform: translate(-50%, -50%) rotate(45deg); }
.blueprint-plane::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--ky-border) 1px, transparent 1px), linear-gradient(to bottom, var(--ky-border) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--ky-border) 45%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ky-border) 45%, transparent) 1px, transparent 1px);
  background-size: var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major), var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  background-position: calc(var(--grid-plane-size) / 2) calc(var(--grid-plane-size) / 2);
  mask-image: radial-gradient(ellipse at center, #0003, #0009 75%);
}
.grid-trace { position: absolute; opacity: 0; background: var(--trace-colour); }
.grid-trace[data-direction="horizontal"] { top: var(--trace-position); left: var(--trace-start); width: var(--trace-length); height: 2px; transform-origin: left; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.grid-trace[data-direction="vertical"] { top: var(--trace-start); left: var(--trace-position); width: 2px; height: var(--trace-length); transform-origin: top; mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }

.site-header { width: min(100% - 64px, 1320px); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; }
.kite { display: block; width: 34px; height: 34px; }
.header-contact { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.header-contact:hover, .hero-link:hover { color: var(--ky-muted); }
.hero { min-height: 610px; padding: 107px 24px 110px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--ky-muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin: 29px 0 0; max-width: 950px; font: 500 clamp(4rem, 7.4vw, 7.3rem)/.99 var(--ky-font-heading); letter-spacing: -.055em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--ky-muted); }
.hero-copy { max-width: 620px; margin: 30px 0 0; color: #3E3E3E; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; text-wrap: balance; }
.hero-link { min-height: 44px; display: inline-flex; gap: 14px; align-items: center; margin-top: 26px; border-bottom: 1px solid var(--ky-text); font-size: 14px; font-weight: 600; text-decoration: none; }

.tour-section { padding: 88px max(32px, calc((100vw - 1320px) / 2)) 92px; background: var(--ky-canvas); border-top: 1px solid var(--ky-border); border-bottom: 1px solid var(--ky-border); }
.tour-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 37px; }
.tour-intro h2, .closing h2 { margin: 13px 0 0; font: 500 clamp(2.6rem, 4.2vw, 4.2rem)/1.07 var(--ky-font-heading); letter-spacing: -.04em; }
.tour-intro > p { max-width: 355px; margin: 0 0 5px; color: var(--ky-muted); font-size: 15px; line-height: 1.6; }
.tour-topline { display: flex; justify-content: space-between; align-items: center; min-height: 34px; margin-bottom: 13px; color: var(--ky-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.demo-indicator { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--ky-success); border-radius: 50%; vertical-align: 1px; }
.tour-actions { display: flex; gap: 6px; }
.tour-action { min-height: 44px; padding: 4px 11px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ky-text); font-size: 12px; font-weight: 600; cursor: pointer; }
.tour-action:hover { background: var(--ky-selected); }
.tour-action span { margin-left: 3px; font-size: 17px; vertical-align: -1px; }

.tour-frame { position: relative; padding: 17px; border: 1px solid #D7D7D5; border-radius: 18px; background: #ECECE9; overflow: hidden; }
.tour-window { border: 1px solid #C8C8C5; border-radius: 10px; background: var(--ky-surface); overflow: hidden; }
.window-bar { height: 45px; display: flex; align-items: center; gap: 10px; padding: 0 17px; border-bottom: 1px solid var(--ky-border); background: #FCFCFB; font-size: 12px; font-weight: 600; }
.window-mark { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; background: var(--ky-text); color: var(--ky-page); font: 600 13px/1 var(--ky-font-body); }
.window-slash { color: #A0A0A0; margin-inline: 4px; }
.workspace-shell { display: grid; grid-template-columns: 210px minmax(0,1fr); height: 574px; }
.demo-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 24px 11px 11px; border-right: 1px solid var(--ky-border); background: #FAFAFA; }
.demo-sidebar[hidden] { display: none; }
.sidebar-heading { margin: 0 10px 12px; color: var(--ky-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.sidebar-entry { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #3F3F3F; text-align: left; font-size: 12px; font-weight: 500; cursor: pointer; }
.sidebar-entry[data-jump]:hover { background: var(--ky-hover); }
.sidebar-entry.is-selected { background: var(--ky-selected); color: var(--ky-text); font-weight: 600; }
.sidebar-placeholder { cursor: default; }
.nav-symbol { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--ky-muted); }
.nav-symbol svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-entry.is-selected .nav-symbol { color: var(--ky-text); }
.nav-count { margin-left: auto; color: var(--ky-muted); font-size: 10px; }
.sidebar-divider { margin: 16px 10px; border-top: 1px solid var(--ky-border); }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 9px 2px; border-top: 1px solid var(--ky-border); font-size: 11px; color: var(--ky-muted); }
.avatar-small { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--ky-selected); color: var(--ky-text); font-size: 11px; }
.demo-viewport { position: relative; min-width: 0; overflow: hidden; background: var(--ky-surface); }
.demo-view { position: absolute; inset: 0; min-width: 0; display: flex; flex-direction: column; background: var(--ky-surface); opacity: 0; transform: translateX(22px) scale(.99); pointer-events: none; transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.demo-view.is-active { z-index: 1; opacity: 1; transform: none; pointer-events: auto; }
.view-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 30px; border-bottom: 1px solid var(--ky-border); }
.view-kicker { display: block; margin-bottom: 2px; color: var(--ky-muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.view-header h3 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.025em; }
.view-meta { flex: none; color: var(--ky-muted); font-size: 11px; }

.chat-stream { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px 42px 20px; overflow: auto; scrollbar-width: thin; }
.message-row { display: flex; align-items: flex-start; gap: 9px; max-width: 680px; }
.message-row.from-user { align-self: flex-end; max-width: 590px; }
.avatar-kitey { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--ky-text); color: var(--ky-page); font-size: 12px; font-weight: 600; }
.message-content { min-width: 0; }
.sender { display: block; margin: 3px 0 6px; font-size: 11px; font-weight: 600; }
.sender span { color: var(--ky-muted); font-weight: 400; }
.from-user .sender { text-align: right; }
.message-bubble { padding: 13px 16px; border-radius: 3px 13px 13px; background: var(--ky-inset); font-size: 13px; line-height: 1.5; }
.from-user .message-bubble { border-radius: 13px 3px 13px 13px; background: var(--ky-text); color: var(--ky-page); }
.message-opening { margin: 0; }
.digest-entry { display: grid; grid-template-columns: 77px minmax(0,1fr); gap: 11px; padding: 8px 0; border-top: 1px solid var(--ky-border); }
.digest-entry:last-child { padding-bottom: 0; }
.tour-enhanced .digest-entry { max-height: 0; padding-block: 0; border-top-width: 0; overflow: hidden; }
.tour-enhanced .digest-entry.is-shown { max-height: 130px; padding-block: 8px; border-top-width: 1px; }
.tour-enhanced .digest-entry.is-shown:first-of-type { margin-top: 9px; }
.record-id { color: var(--ky-text); font-size: 10px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; }
.inline-id { display: inline; font-size: 11px; }
.text-link { color: var(--ky-focus); text-decoration: underline; text-underline-offset: 2px; }
.inline-tour-link { display: inline; padding: 0; border: 0; background: none; color: var(--ky-focus); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.chat-composer { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 30px 20px; padding: 7px 9px 7px 15px; border: 1px solid var(--ky-border); border-radius: 7px; color: #8A8A8A; font-size: 12px; }
.chat-composer.is-typing { color: var(--ky-text); }
.send-icon { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--ky-selected); color: var(--ky-text); font-size: 16px; }
.chat-composer.is-typing .send-icon { background: var(--ky-text); color: var(--ky-page); }
.tool-call { align-self: flex-start; margin-left: 34px; color: var(--ky-muted); font-size: 10px; font-weight: 600; }
.tool-call span { margin-right: 5px; color: var(--ky-text); font-size: 14px; vertical-align: -1px; }
.created-record { align-self: flex-start; display: flex; align-items: center; gap: 12px; margin-left: 34px; padding: 9px 12px; border: 1px solid var(--ky-border); border-radius: 5px; background: var(--ky-surface); font-size: 11px; }
.created-record > div { display: flex; flex-direction: column; gap: 2px; }
.created-record small { color: var(--ky-muted); font-size: 10px; }
.tour-enhanced .reveal { transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); }
.tour-enhanced .digest-entry { transition: max-height 400ms ease, padding 400ms ease, opacity 360ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); }
.tour-enhanced .reveal:not(.is-shown) { opacity: 0; transform: translateY(10px); pointer-events: none; }
.tour-enhanced [data-view="scope"] .chat-stream { gap: 0; }
.tour-enhanced [data-view="scope"] .chat-stream > .reveal { flex-shrink: 0; max-height: 220px; margin-bottom: 16px; overflow: hidden; transition: max-height 420ms ease, margin 420ms ease, opacity 360ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); }
.tour-enhanced [data-view="scope"] .chat-stream > .reveal:not(.is-shown) { max-height: 0; margin-bottom: 0; }
.tour-frame.tour-enhanced:not(.is-playing) .reveal, .tour-frame.tour-enhanced:not(.is-playing) .feature-page, .tour-frame.tour-enhanced:not(.is-playing) .demo-view { transition: none; }

.feature-page { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(18px); pointer-events: none; transition: opacity 400ms ease, transform 450ms cubic-bezier(.2,.8,.2,1); }
.feature-page.is-active { z-index: 1; opacity: 1; transform: none; pointer-events: auto; }
.features-list-scroll, .feature-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.features-list-scroll { padding: 19px 30px; background: var(--ky-canvas); }
.features-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.features-list-heading span { color: var(--ky-muted); font-size: 10px; }
.feature-legend { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 10px 0 15px; color: var(--ky-muted); font-size: 10px; }
.feature-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.count-dot { width: 9px; height: 9px; display: inline-block; flex: none; border-radius: 50%; background: currentColor; }
.count-dot.is-pending { color: #A1A1AA; }
.count-dot.is-progress { color: #3B82F6; }
.count-dot.is-review { color: #FBBF24; }
.count-dot.is-done { color: #10B981; }
.feature-list { display: grid; gap: 10px; }
.feature-row { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 13px 15px; border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-surface); color: var(--ky-text); text-align: left; }
button.feature-row { cursor: pointer; }
button.feature-row:hover { border-color: var(--ky-focus); }
.feature-row-heading, .feature-row-meta { display: flex; align-items: center; gap: 10px; }
.feature-row-heading { min-width: 0; font-size: 12px; }
.feature-row-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-row-arrow { margin-left: auto; color: var(--ky-focus); }
.feature-row-meta { justify-content: space-between; flex-wrap: wrap; }
.feature-state { padding: 3px 6px; border: 1px solid var(--ky-border); border-radius: 4px; color: var(--ky-muted); font-size: 10px; }
.feature-counts { display: inline-flex; gap: 10px; padding: 4px 8px; border-radius: 4px; background: var(--ky-selected); font-size: 10px; font-weight: 600; }
.feature-counts > span { display: inline-flex; align-items: center; gap: 4px; }
.feature-counts .count-dot { width: 8px; height: 8px; }
.feature-sections { max-width: 900px; }
.feature-items-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.feature-item { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--ky-border); border-radius: 5px; background: var(--ky-surface); }
.feature-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.feature-tab-panel[hidden] { display: none; }
.feature-tab-panel:not([hidden]) { animation: panel-appear 350ms ease; }
.feature-flow-scroll { margin-top: 12px; padding: 13px; border: 1px solid var(--ky-border); border-radius: 6px; overflow-x: auto; background: var(--ky-canvas); scrollbar-width: thin; }
.feature-flow-grid { min-width: 680px; height: 238px; display: grid; grid-template-columns: repeat(3, minmax(135px,1fr) 31px) minmax(135px,1fr); }
.feature-flow-column { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.feature-flow-column.is-branch { justify-content: space-around; }
.flow-item { min-height: 70px; display: flex; flex-direction: column; gap: 5px; padding: 9px; border: 1px solid var(--ky-border); border-radius: 5px; background: var(--ky-surface); color: var(--ky-text); text-align: left; }
.flow-item-action { border-color: var(--ky-focus); cursor: pointer; }
.flow-item-action:hover { background: color-mix(in srgb, var(--ky-focus) 6%, var(--ky-surface)); }
.flow-key { display: inline-flex; align-items: center; gap: 5px; color: var(--ky-muted); font: 400 9px/1.3 monospace; }
.flow-key .count-dot { width: 8px; height: 8px; }
.flow-item strong { font-size: 10px; line-height: 1.3; }
.flow-item small { color: var(--ky-muted); font-size: 9px; }
.flow-link { position: relative; color: #A6A6A6; }
.flow-link-straight::before, .flow-link-split::before, .flow-link-split > span, .flow-link-parallel > span { position: absolute; border-top: 1px solid currentColor; content: ""; }
.flow-link-straight::before { top: 50%; left: 0; right: 0; }
.flow-link-straight::after, .flow-link-split > span::after, .flow-link-parallel > span::after { position: absolute; right: 0; top: -4px; border: 4px solid transparent; border-right: 0; border-left: 5px solid currentColor; content: ""; }
.flow-link-straight::after { top: calc(50% - 4px); }
.flow-link-split::before { top: 50%; left: 0; right: 50%; }
.flow-link-split::after { position: absolute; top: 25%; bottom: 25%; left: 50%; border-left: 1px solid currentColor; content: ""; }
.flow-link-split > span { left: 50%; right: 0; }
.flow-link-split > span:first-child, .flow-link-parallel > span:first-child { top: 25%; }
.flow-link-split > span:last-child, .flow-link-parallel > span:last-child { top: 75%; }
.flow-link-parallel > span { left: 0; right: 0; }

.board-intro { min-height: 47px; display: flex; align-items: center; gap: 10px; padding: 0 27px; border-bottom: 1px solid var(--ky-border); font-size: 12px; font-weight: 600; }
.board-total { margin-left: auto; color: var(--ky-muted); font-size: 11px; font-weight: 400; }
.board-lanes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(205px,1fr)); gap: 9px; padding: 14px; overflow-x: auto; background: var(--ky-canvas); scrollbar-width: thin; }
.board-lane { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 9px; border-radius: 6px; background: var(--ky-inset); }
.lane-heading { display: flex; justify-content: space-between; padding: 4px 4px 11px; font-size: 12px; font-weight: 600; }
.lane-heading span:last-child { color: var(--ky-muted); }
.lane-cards { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.lane-summary { display: block; padding: 9px 4px 3px; border-top: 1px solid var(--ky-border); color: var(--ky-muted); font-size: 10px; }
.board-card { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 0 0 9px; padding: 12px; border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-surface); color: var(--ky-text); text-align: left; }
.board-card-action { cursor: pointer; }
.board-card-action:hover { border-color: var(--ky-text); }
.card-heading { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 7px; row-gap: 4px; }
.card-heading strong { grid-column: 2; font-size: 12px; line-height: 1.3; }
.card-id { color: var(--ky-muted); font: 400 10px/1.4 monospace; white-space: nowrap; }
.card-status { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid var(--ky-border); border-radius: 50%; background: var(--ky-surface); }
.card-status::after { width: 12px; height: 12px; border-radius: 50%; background: currentColor; content: ""; }
.card-status.is-pending { color: #A1A1AA; }
.card-status.is-progress { color: #3B82F6; }
.card-status.is-review { color: #FBBF24; }
.card-status.is-done { color: #10B981; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-left: 23px; }
.card-meta > span { padding: 3px 5px; border: 1px solid var(--ky-border); border-radius: 4px; color: var(--ky-muted); font-size: 9px; line-height: 1.2; }
.card-meta > .new-tag { border-color: transparent; background: var(--ky-success-surface); color: var(--ky-success); }
.card-meta > .card-assignee { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ky-text); }
.assignee-avatar { width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--ky-selected); font-size: 8px; font-weight: 700; }
.new-tag { margin-left: 3px; padding: 2px 4px; border-radius: 2px; background: var(--ky-success-surface); color: var(--ky-success); font-size: 8px; }
.small-status { width: 7px; height: 7px; display: inline-block; flex: none; border-radius: 50%; background: var(--ky-success); }

.status-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 99px; background: var(--ky-success-surface); color: var(--ky-success); font-size: 11px; font-weight: 600; }
.status-pill.status-info { background: color-mix(in srgb, var(--ky-focus) 8%, var(--ky-surface)); color: var(--ky-focus); }
.status-info .small-status { background: var(--ky-focus); }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.detail-summary, .detail-sections { max-width: 800px; margin: 0 auto; padding: 25px 36px; }
.detail-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; }
.detail-label span { color: var(--ky-muted); font-weight: 400; }
.detail-summary h4 { margin: 0 0 16px; font: 500 28px/1.15 var(--ky-font-heading); letter-spacing: -.025em; }
.detail-fields { display: flex; flex-wrap: wrap; gap: 19px; padding-bottom: 19px; color: var(--ky-muted); font-size: 10px; }
.detail-fields strong, .linked-record { display: block; margin-top: 5px; color: var(--ky-text); font-size: 11px; font-weight: 600; }
.linked-record { padding: 0; border: 0; background: none; color: var(--ky-focus); text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.detail-description { border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-inset); }
.description-toolbar { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--ky-border); font-size: 11px; }
.description-toolbar span { color: var(--ky-muted); font-size: 10px; }
.description-body { padding: 11px 15px 13px; font-size: 12px; line-height: 1.55; }
.description-body p { margin: 0; }
.description-body h5 { margin: 9px 0 3px; font-size: 11px; }
.description-body ul { margin: 0; padding-left: 19px; }
.detail-sections { padding-top: 0; border-top: 1px solid var(--ky-border); }
.detail-tabs { display: flex; justify-content: center; gap: 10px; padding: 16px 0 18px; }
.detail-tabs button { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 5px; background: var(--ky-hover); color: var(--ky-text); font-size: 11px; font-weight: 600; cursor: pointer; }
.detail-tabs button.is-selected { background: var(--ky-text); color: var(--ky-page); }
.detail-tabs button span { min-width: 18px; padding: 2px 5px; border-radius: 12px; background: var(--ky-selected); color: var(--ky-text); font-size: 10px; }
@keyframes panel-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-heading h5 { margin: 0; font-size: 13px; }
.section-heading span, .dependency-caption { color: var(--ky-muted); font-size: 11px; }
.dependency-caption { margin: 5px 0 14px; line-height: 1.5; }
.detail-activity { padding-top: 20px; padding-bottom: 28px; }
.activity-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.activity-heading h4 { margin: 0; font-size: 13px; }
.activity-heading span { color: var(--ky-muted); font-size: 11px; }
.activity-entry { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-surface); }
.activity-entry p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; }
.activity-link { min-height: 36px; display: inline-flex; align-items: center; padding: 0 2px; border: 0; background: none; color: var(--ky-focus); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.job-content { flex: 1; min-height: 0; padding: 20px 24px 16px; overflow-y: auto; scrollbar-width: thin; }
.job-summary { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; border-bottom: 1px solid var(--ky-border); }
.job-summary .record-id { padding: 7px 9px; border-radius: 4px; background: var(--ky-selected); }
.job-summary > div { display: flex; flex-direction: column; gap: 3px; }
.job-summary strong { font-size: 14px; }
.job-summary div span { color: var(--ky-muted); font-size: 11px; }
.run-overview { margin-top: 17px; border: 1px solid var(--ky-border); border-radius: 7px; background: var(--ky-canvas); }
.run-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--ky-border); }
.run-heading h4 { margin: 0 0 3px; font-size: 14px; }
.run-heading span { color: var(--ky-muted); font-size: 10px; }
.run-flow-scroll { overflow-x: auto; scrollbar-width: thin; }
.run-steps { display: grid; grid-template-columns: repeat(5, minmax(140px,1fr)); gap: 27px; min-width: 808px; margin: 0; padding: 17px; list-style: none; }
.run-step { position: relative; min-height: 87px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 13px 12px; border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-surface); }
.run-step:not(:last-child)::after { content: "⟶"; position: absolute; top: 27px; right: -24px; color: var(--ky-muted); font-size: 22px; line-height: 1; }
.step-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.step-heading strong { font-size: 12px; }
.step-heading span { color: var(--ky-muted); font: 400 9px/1.3 monospace; white-space: nowrap; }
.step-state { align-self: flex-start; padding: 3px 7px; border: 1px solid var(--ky-border); border-radius: 12px; color: var(--ky-muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.is-complete .step-state { border-color: var(--ky-success); background: var(--ky-success-surface); color: var(--ky-success); }
.is-running .step-state { border-color: var(--ky-focus); background: color-mix(in srgb, var(--ky-focus) 8%, var(--ky-surface)); color: var(--ky-focus); }
.tour-frame.is-playing .is-running .step-state { animation: status-pulse 1.8s ease-in-out infinite; }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ky-focus) 14%, transparent); } }
.logs-panel { margin-top: 14px; }
.logs-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.logs-heading > div > span { display: block; margin-bottom: 3px; color: var(--ky-muted); font-size: 10px; }
.logs-heading h4 { margin: 0; font-size: 14px; }
.streaming-status { color: var(--ky-success); font-size: 10px; font-weight: 600; }
.streaming-status span { margin-right: 4px; }
.log-stream { height: 150px; overflow-y: auto; padding: 10px 13px; border: 1px solid var(--ky-border); border-radius: 6px; background: var(--ky-inset); color: var(--ky-text); scrollbar-width: thin; }
.log-line { display: flex; gap: 13px; font: 400 13px/1.7 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-line[hidden] { display: none; }
.log-line time { flex: none; color: var(--ky-muted); }

.tour-pointer { position: absolute; z-index: 4; top: 0; left: 0; width: 22px; height: 27px; background: white; clip-path: polygon(1% 0, 1% 93%, 27% 70%, 43% 100%, 59% 92%, 44% 63%, 77% 64%); filter: drop-shadow(1px 1px 1px #151515); opacity: 0; pointer-events: none; transition: left 900ms cubic-bezier(.2,.8,.2,1), top 900ms cubic-bezier(.2,.8,.2,1), opacity 250ms; }
.tour-pointer::after { content: ""; position: absolute; inset: 0; clip-path: inherit; background: var(--ky-text); transform: scale(.78); transform-origin: top left; }
.tour-pointer.is-visible { opacity: 1; }

.tour-bottom { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); align-items: end; gap: 40px; padding-top: 28px; }
.story-count { color: var(--ky-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.tour-story h3 { margin: 10px 0 6px; font: 500 29px/1.1 var(--ky-font-heading); letter-spacing: -.02em; }
.tour-story p { max-width: 420px; margin: 0; color: var(--ky-muted); font-size: 13px; line-height: 1.55; }
.tour-chapters { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.chapter { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--ky-muted); text-align: left; font-size: 11px; cursor: pointer; }
.chapter strong { display: block; margin-top: 2px; color: var(--ky-text); font-size: 12px; }
.chapter-track { height: 3px; display: block; overflow: hidden; background: #D4D4D4; }
.chapter-track > span { width: 0; height: 100%; display: block; background: var(--ky-text); }
.chapter.is-complete .chapter-track > span { width: 100%; }
.chapter.is-current .chapter-track > span { width: var(--chapter-progress, 0%); }
.chapter:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.closing { display: flex; flex-direction: column; align-items: center; padding: 115px 24px 122px; text-align: center; }
.closing h2 { margin-top: 15px; }
.closing > p:not(.eyebrow) { max-width: 490px; margin: 18px 0 0; color: var(--ky-muted); font-size: 16px; line-height: 1.6; }
.contact-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; padding: 12px 24px; border: 1px solid var(--ky-button); border-radius: 4px; background: var(--ky-button); color: var(--ky-on-button); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.contact-button:hover { border-color: var(--ky-button-hover); background: var(--ky-button-hover); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px max(32px, calc((100vw - 1320px) / 2)); border-top: 1px solid var(--ky-border); color: var(--ky-muted); font-size: 12px; }

/* Keep the standalone 404 page centred without making the main page a grid. */
.landing { width: 100%; max-width: 760px; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; padding: 48px 24px; text-align: center; }
.landing .kite { width: clamp(152px, 19vw, 224px); height: auto; }
.tagline { margin: 80px 0 0; font: 500 clamp(2.25rem, 1.65rem + 2.2vw, 3.5rem)/1.08 var(--ky-font-heading); letter-spacing: -.03em; }

@media (max-width: 900px) {
  .tour-section { padding-inline: 28px; }
  .workspace-shell { grid-template-columns: 172px minmax(0,1fr); }
  .chat-stream { padding-inline: 24px; }
  .demo-sidebar { padding-inline: 7px; }
  .sidebar-entry { padding-inline: 7px; font-size: 11px; }
}

@media (max-width: 680px) {
  .site-header { width: min(100% - 36px, 1320px); height: 72px; }
  .brand { font-size: 17px; }
  .header-contact { font-size: 12px; }
  .hero { min-height: 540px; padding: 100px 20px 90px; }
  .hero h1 { font-size: clamp(3.5rem, 12vw, 5rem); }
  .hero-copy { font-size: 16px; }
  .tour-section { padding: 64px 12px 74px; }
  .tour-intro { display: block; margin-inline: 8px; }
  .tour-intro > p { margin-top: 17px; }
  .tour-topline { margin-inline: 8px; }
  .tour-frame { padding: 7px; border-radius: 12px; }
  .window-bar { height: 39px; padding-inline: 10px; font-size: 10px; }
  .workspace-shell { display: flex; flex-direction: column; height: 633px; }
  .demo-sidebar { flex: none; flex-direction: row; gap: 2px; height: 58px; padding: 3px; border-right: 0; border-bottom: 1px solid var(--ky-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .demo-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-heading, .sidebar-divider, .sidebar-foot, .nav-count { display: none; }
  .sidebar-entry { width: 68px; min-width: 68px; min-height: 52px; flex: 0 0 68px; flex-direction: column; gap: 2px; justify-content: center; padding: 4px 2px; font-size: 9px; line-height: 1.1; text-align: center; white-space: normal; }
  .nav-symbol { width: 16px; height: 16px; }
  .nav-symbol svg { width: 14px; height: 14px; }
  .demo-viewport { flex: 1; }
  .view-header { min-height: 64px; padding-inline: 17px; }
  .view-header h3 { font-size: 15px; }
  .view-meta { font-size: 9px; }
  .chat-stream { gap: 12px; padding: 17px 13px 12px; }
  .message-row { gap: 6px; }
  .avatar-kitey { width: 22px; height: 22px; font-size: 10px; }
  .sender { font-size: 10px; }
  .message-bubble { padding: 10px 11px; font-size: 11px; }
  .digest-entry { grid-template-columns: 61px minmax(0,1fr); gap: 5px; padding-block: 7px; }
  .record-id { font-size: 9px; }
  .chat-composer { min-height: 37px; margin: 0 13px 12px; font-size: 10px; }
  .board-intro { padding-inline: 12px; font-size: 10px; }
  .board-lanes { display: flex; gap: 7px; padding: 10px 7px; overflow-x: auto; }
  .board-lane { min-width: 210px; flex: 0 0 210px; }
  .features-list-scroll { padding: 14px 12px; }
  .feature-row { padding: 11px; }
  .feature-row-heading { gap: 6px; font-size: 11px; }
  .feature-items-grid { grid-template-columns: 1fr; }
  .feature-flow-scroll { padding: 9px; }
  .detail-summary, .detail-sections { padding-inline: 16px; }
  .detail-summary h4 { font-size: 25px; }
  .description-body { font-size: 11px; }
  .detail-fields { gap: 14px; }
  .job-content { padding: 18px 13px; }
  .run-heading > span { max-width: 105px; text-align: right; }
  .run-steps { padding: 15px 12px; }
  .log-stream { height: 170px; }
  .tour-pointer { display: none; }
  .tour-bottom { display: block; margin-inline: 8px; padding-top: 24px; }
  .tour-chapters { gap: 5px; margin-top: 24px; }
  .chapter { font-size: 9px; }
  .chapter strong { font-size: 10px; }
  .closing { padding-block: 90px; }
  .site-footer { padding-inline: 20px; }
}

@media (max-width: 370px) {
  .view-meta { display: none; }
  .sidebar-entry { font-size: 9px; }
  .tour-chapters { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grid-trace, .tour-pointer { display: none; }
  .contact-button, .demo-view, .feature-page, .tour-enhanced .reveal, .tour-enhanced .digest-entry, .tour-enhanced [data-view="scope"] .chat-stream > .reveal { transition: none; }
  .tour-frame.is-playing .is-running .step-state { animation: none; }
  .feature-tab-panel:not([hidden]) { animation: none; }
}

@media (forced-colors: active) {
  .blueprint { display: none; }
  .tour-frame, .tour-window, .board-card, .activity-entry, .run-overview { border: 1px solid CanvasText; }
  .tour-enhanced .reveal:not(.is-shown) { visibility: hidden; }
}