/* Kaivon Code's site: Kaivon Night, with the mark's light kept for what matters. */

@font-face {
  font-family: Inter;
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0a0b17;
  --bg-2: #0f1020;
  --raised: #14152a;
  --line: #1e2040;
  --ink: #e9eaf6;
  --ink-2: #b4b6d4;
  --ink-3: #8d90b3;
  --iris: #8b7cff;
  --mint: #7fe0b4;
  --rose: #ff7f9c;
  --light: linear-gradient(100deg, #7ee8fa, #a78bfa 55%, #f6b46b);
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*:not(.monaco-editor, .monaco-editor *) { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink-2); background: var(--bg); font: 400 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -0.022em; font-weight: 620; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; padding: 8px 12px; border-radius: 8px; background: var(--raised); color: var(--ink); }
.skip:focus { left: 12px; }

.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px clamp(16px, 4vw, 40px); background: rgb(10 11 23 / 0.72); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(30 32 64 / 0.6); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.nav nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav nav a { color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.nav nav a:hover { color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #7c70ff, #5a4ee8); box-shadow: 0 10px 34px rgb(100 87 240 / 0.34); transition: transform 0.25s var(--ease), box-shadow 0.25s, filter 0.2s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 40px rgb(100 87 240 / 0.46); }
.btn.ghost { color: var(--ink); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; box-shadow: none; }

.hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(48px, 9vh, 96px) 16px 0; text-align: center; }
.hero::before { content: ''; position: absolute; inset: -80px 0 auto; height: 760px; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 30%, rgb(111 98 255 / 0.24), transparent 70%), radial-gradient(35% 30% at 72% 22%, rgb(126 232 250 / 0.1), transparent 70%), radial-gradient(35% 30% at 28% 26%, rgb(246 180 107 / 0.07), transparent 70%); }
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
h1 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); line-height: 1.14; }
.lede { max-width: 620px; margin: 20px 0 0; font-size: clamp(1rem, 1.6vw, 1.14rem); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.small-print { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.small-print a { color: var(--ink-2); }

/* The demo: the real fix Chip made in testing, replayed. */
.demo { position: relative; width: min(1120px, 100%); margin: clamp(40px, 7vh, 72px) 0 0; }
.demo::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; background: var(--light); opacity: 0.5; filter: blur(22px); z-index: -1; }
.window { position: relative; overflow: hidden; border-radius: 14px; text-align: left; background: var(--bg-2); box-shadow: 0 0 0 1px rgb(139 124 255 / 0.28), 0 40px 120px rgb(0 0 0 / 0.6); }
.bar { position: relative; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; font-size: 12px; color: var(--ink-3); background: var(--bg); border-bottom: 1px solid var(--line); }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2c4c; }
.bar span { position: absolute; left: 0; right: 0; text-align: center; }
.panes { display: grid; grid-template-columns: 44px 170px minmax(0, 1fr) 340px; height: 500px; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 14px; background: var(--bg); border-right: 1px solid var(--line); }
.rail b { width: 18px; height: 18px; border-radius: 5px; background: #23254a; }
.rail b.on { background: var(--iris); box-shadow: 0 0 12px rgb(139 124 255 / 0.8); }
.kc-tree { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; font-size: 13px; background: #0c0d1b; border-right: 1px solid var(--line); }
.kc-tree p { margin: 0 0 6px 8px; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.kc-tree span, .kc-tree button { padding: 3px 8px; border: 0; border-radius: 6px; font: inherit; text-align: left; color: inherit; background: none; }
.kc-tree button { cursor: pointer; }
.kc-tree button:hover { background: #15162c; }
.kc-tree span.on, .kc-tree button.on { color: #fff; background: #211f4a; }
.kc-editor { display: flex; flex-direction: column; min-width: 0; }
.kc-tabs { display: flex; background: #0c0d1b; border-bottom: 1px solid var(--line); }
.kc-tab { padding: 8px 16px; border: 0; border-right: 1px solid var(--line); font: 13px Inter, system-ui, sans-serif; color: #7c7fa3; background: none; }
button.kc-tab { cursor: pointer; }
.kc-tab.dirty::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--ink-2); vertical-align: 1px; }
.kc-tab.on { position: relative; color: #fff; background: var(--bg-2); }
.kc-tab.on::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--light); box-shadow: 0 0 12px rgb(139 124 255 / 0.55); }
.code-area { position: relative; flex: 1; min-height: 0; }
.code { height: 100%; margin: 0; padding: 12px 16px; overflow: hidden; font: 13.5px/23px var(--mono); color: var(--ink); white-space: pre; }
.live { position: absolute; inset: 0; }
.live[hidden], .code[hidden] { display: none; }
.try-it { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border: 0; border-radius: 999px; font: 600 13px Inter, system-ui, sans-serif; color: #fff; white-space: nowrap; cursor: pointer; background: linear-gradient(135deg, #7c70ff, #5a4ee8); box-shadow: 0 8px 26px rgb(100 87 240 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08); animation: invite 2.6s ease-in-out infinite; }
.try-it:hover { filter: brightness(1.1); }
.try-it:disabled { cursor: default; animation: none; opacity: 0.85; }
.try-it[hidden] { display: none; }
@keyframes invite { 50% { box-shadow: 0 8px 34px rgb(100 87 240 / 0.8), 0 0 0 4px rgb(139 124 255 / 0.18); } }
.ln { display: inline-block; width: 26px; color: #44476a; user-select: none; }
.k { color: #b9a8ff; }
.f { color: #6fc8ff; }
.n { color: #ffb46b; }
.c { color: #6d7196; font-style: italic; }
#line7 { transition: background 0.5s; border-radius: 3px; }
#line7.new { background: rgb(127 224 180 / 0.13); }
.monaco-editor .chip-changed { background: rgb(127 224 180 / 0.13); }
.monaco-editor .cursors-layer > .cursor { box-shadow: 0 0 8px rgb(169 159 255 / 0.65); }
.term { display: flex; flex-direction: column; height: 128px; border-top: 1px solid var(--line); background: #0c0d1b; }
.term-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px 0 14px; min-height: 28px; }
.tt { margin: 0; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.term pre { flex: 1; min-height: 0; margin: 0; padding: 4px 14px 8px; overflow: auto; font: 12.5px/1.6 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.bar-btn { position: relative; z-index: 1; margin-left: auto; padding: 2px 10px; border: 0; border-radius: 6px; font: 600 12px Inter, system-ui, sans-serif; color: var(--ink-2); cursor: pointer; background: rgb(255 255 255 / 0.06); transition: background 0.15s, color 0.15s; }
.bar-btn:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.bar-btn.run { color: #fff; background: #6f62ff; }
.bar-btn.run:hover { background: #8175ff; }
.bar-btn[hidden] { display: none; }
.term .pass { color: var(--mint); }
.term .fail { color: var(--rose); }
.chip { display: flex; flex-direction: column; min-width: 0; background: #0c0d1b; border-left: 1px solid var(--line); }
.chip-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
.chip-head strong { font-weight: 600; }
.orb { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #f4f0ff 0 8%, #b7a9ff 26%, #7a68f5 58%, #4a39c9 100%); box-shadow: 0 0 10px rgb(139 124 255 / 0.5); }
.orb i { position: absolute; top: 42%; width: 11%; height: 17%; border-radius: 50%; background: #fff; }
.orb i:first-child { left: 34%; }
.orb i:last-child { right: 34%; }
.chip-log { display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; padding: 12px; overflow: hidden; font-size: 13px; line-height: 1.5; color: var(--ink-2); justify-content: flex-end; }
.real .chip-log { overflow-y: auto; justify-content: flex-start; }
.real .chip-log > :first-child { margin-top: auto; }
.chip-log > * { flex: none; }
.kc-actions { display: flex; }
.ask-btn { padding: 6px 13px; border: 0; border-radius: 8px; font: 600 13px Inter, system-ui, sans-serif; color: #fff; cursor: pointer; background: linear-gradient(135deg, #7c70ff, #5a4ee8); box-shadow: 0 6px 20px rgb(100 87 240 / 0.34); }
.ask-btn:hover { filter: brightness(1.1); }
.fine { font-size: 12px; color: var(--ink-3); }
.chip-log > * { animation: rise 0.45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.you { align-self: flex-end; max-width: 92%; padding: 6px 10px; color: var(--ink); border-radius: 11px 11px 3px 11px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.did { display: flex; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.did::before { content: '✓'; color: var(--mint); }
.say code { font: 12px var(--mono); padding: 1px 4px; border-radius: 4px; color: #9ed9ff; background: var(--raised); }
.ask { position: relative; overflow: hidden; border-radius: 9px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.ask::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--light); }
.ask b { display: flex; justify-content: space-between; padding: 8px 10px 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ask b span { font: 11.5px var(--mono); color: var(--mint); }
.ask pre { margin: 0; padding: 5px 10px; font: 11.5px/1.55 var(--mono); border-top: 1px solid var(--line); white-space: pre-wrap; }
.ask .del { color: var(--rose); }
.ask .add { color: var(--mint); }
.ask .btns { display: flex; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 12px; }
.ask .apply { padding: 2px 11px; border: 0; border-radius: 6px; font: inherit; color: #fff; background: #6f62ff; transition: transform 0.2s, box-shadow 0.2s; }
.ask button.apply { cursor: pointer; }
.ask button.apply:hover { background: #8175ff; }
.ask .apply.press { transform: scale(0.94); box-shadow: 0 0 0 3px rgb(139 124 255 / 0.4); }
.ask .skip2 { padding: 2px 6px; border: 0; font: inherit; color: var(--ink-3); background: none; }
.ask button.skip2 { cursor: pointer; }
.ask button.skip2:hover { color: var(--ink); }
.ask.done { opacity: 0.7; }
.ask.done::before { display: none; }

.tips { margin-top: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }
.tips[hidden] { display: none; }
.tips span { margin: 0 6px; opacity: 0.5; }

.band { max-width: 1120px; margin: 0 auto; padding: clamp(72px, 12vh, 124px) 20px 0; }
.head { max-width: 640px; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.22; }
.head p { margin: 12px 0 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.card { padding: 20px; border-radius: 14px; background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.008)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s, transform 0.3s var(--ease); }
.card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(139 124 255 / 0.45); }
.card svg { width: 22px; height: 22px; fill: none; stroke: var(--iris); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-top: 12px; font-size: 1.02rem; letter-spacing: -0.012em; }
.card p { margin: 6px 0 0; font-size: 14.5px; }
.band code, .band kbd, .tips kbd { font: 0.88em var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--raised); color: var(--ink); }
.kc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 36px; margin: 28px 0 0; padding: 0; list-style: none; }
.kc-list li { padding: 14px 0; font-size: 15px; border-top: 1px solid var(--line); }
.kc-list b { color: var(--ink); font-weight: 600; }

.download { text-align: center; }
.download .head { margin: 0 auto; }
.systems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.system { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-radius: 14px; text-decoration: none; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.25s, transform 0.25s var(--ease); }
.system:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--iris), 0 12px 34px rgb(100 87 240 / 0.24); }
.system.you-are-here { box-shadow: inset 0 0 0 1px var(--iris); }
.system b { color: var(--ink); font-weight: 600; }
.system span { font-size: 13px; color: var(--ink-3); }
.system[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

.faq { max-width: 760px; margin-top: 22px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; font-weight: 550; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--ink-3); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; font-size: 15px; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; max-width: 1120px; margin: clamp(72px, 12vh, 120px) auto 0; padding: 20px; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

.lost { display: grid; place-content: center; gap: 8px; min-height: 100vh; padding: 16px; text-align: center; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .panes { grid-template-columns: minmax(0, 1fr) 300px; }
  .rail, .kc-tree { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .systems { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 300px; height: auto; }
  .code { font-size: 11.5px; padding: 10px; }
  .term { height: 92px; }
  .chip { border-left: 0; border-top: 1px solid var(--line); }
  .cards, .kc-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .chip-log > * { animation: none; }
}