/*
 * DonutLauncher — the layer above the layout.
 *
 * `krypton.css` is the mirrored Tailwind build: every utility class, the grid,
 * the spacing, the card treatment, the palette (swapped for ours). It is the
 * layout, and it is deliberately not edited by hand.
 *
 * This file is for the handful of things the markup on its own cannot do:
 *
 *   1. the font. Their pages set `--font-sora` from a wrapper class that only the
 *      React tree emitted, so it has to be declared somewhere or `body` falls
 *      through to whatever `sans-serif` means on the machine;
 *   2. the animations. Their copy shipped a `<style>`-less page: the nav, the hero
 *      words and every card below the fold start at `opacity: 0` in an inline
 *      style and are revealed by their bundle's JavaScript. That JavaScript is not
 *      here — `site.js` does it — and these are the transitions it drives;
 *   3. anchors, because the nav is fixed 80px tall and `scroll-behavior: smooth`
 *      on its own scrolls a heading underneath it.
 */

:root {
  --font-sora: 'Sora', 'Sora Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dl-ring: color-mix(in oklab, #7cc4ff 55%, transparent);
}

/* --------------------------------------------------------------- base --- */

html { scroll-padding-top: 96px; }

body {
  font-family: var(--font-sora);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A section target must clear the fixed bar rather than sit under it. */
section[id] { scroll-margin-top: 96px; }

::selection { background: #7cc4ff; color: #0a0f1a; }

:focus-visible {
  outline: 2px solid var(--dl-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------- reveals ---- */

/*
 * Every element that their bundle used to animate. The starting state is already
 * inline in the markup, so nothing here needs to hide anything — this is only the
 * transition that takes it away, and it is applied one frame before the change so
 * the browser has something to interpolate from.
 */
[data-reveal] {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal='hero'] { transition-duration: 0.75s; }
[data-reveal='nav'] { transition-duration: 0.5s; }

/*
 * An answer that is opening cannot be given a fixed height, and a fixed height is
 * the only thing `height: auto` can be animated from — so the height is set from
 * the measured content and cleared again on the way out.
 */
[data-faq-answer] { transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }

/* --------------------------------------------------------------- nav --- */

#dlMenu {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
}

#dlMenu[data-open='true'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------- screenshots --- */

/* The frames in the "in action" section were YouTube embeds; the picture has to
   fill the same 16:9 box without stretching. */
.aspect-video > img { display: block; }

/* --------------------------------------------------------------- misc --- */

/*
 * The two download buttons on `/download` are disabled on purpose, and a disabled
 * button that still lights up on hover reads as broken rather than as "not yet".
 */
[data-download][data-state='soon'] { filter: saturate(0.7); }

/* Their step icons and card glyphs are inline SVG with a fixed size; a tabbed-in
   focus ring on a whole card is not useful. */
.card-glow:focus-within { outline: none; }

/* ------------------------------------------------------------- the chat --- */

/*
 * The assistant, in the same shape as the launcher's own: a pill in the corner
 * that opens into a panel. It is the one part of the site that is not a copy of
 * anything — kryptonclient.org has no chat — so it is written to look like it
 * belongs: their radii, their surfaces, their blur.
 */
.chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(10, 15, 26, 0.9);
  backdrop-filter: blur(12px);
  color: #eaf2fb;
  cursor: pointer;
  box-shadow: 0 24px 60px -30px #000;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-fab:hover { border-color: rgba(124, 196, 255, 0.45); transform: translateY(-2px); }
.chat-fab img { width: 34px; height: 34px; border-radius: 50%; }
.chat-fab span { font-size: 0.9rem; color: #8fa6c4; }
.chat-fab[data-hidden='true'] { display: none; }

.chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 71;
  display: none;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 40px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(10, 15, 26, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 100px -40px #000;
  overflow: hidden;
}
/* Closed is the default, and the stylesheet is what decides: the panel is only
   ever opened by a click, so a page whose script failed shows nothing at all. */
.chat[data-open='true'] { display: flex; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.chat__head img { width: 36px; height: 36px; border-radius: 50%; }
.chat__head strong { display: block; color: #eaf2fb; font-size: 0.97rem; font-weight: 600; }
.chat__head small, .chat__head .chat__hint { color: #6b7f97; font-size: 0.78rem; }
.chat__close {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: transparent;
  color: #8fa6c4;
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chat__close:hover { color: #eaf2fb; border-color: rgba(255, 255, 255, 0.22); }
.chat__log { flex: 1; display: grid; align-content: start; gap: 12px; padding: 18px 16px; overflow-y: auto; }
.chat__msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.6; }
.chat__msg--bot { background: #141d2e; border: 1px solid rgba(255, 255, 255, 0.07); justify-self: start; color: #eaf2fb; }
.chat__msg--me { background: #7cc4ff; color: #0a0f1a; justify-self: end; font-weight: 520; }
.chat__msg p { margin: 0 0 8px; color: inherit; }
.chat__msg p:last-child { margin: 0; }
.chat__msg ul { margin: 0 0 8px; padding-left: 18px; color: inherit; }
.chat__msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
.chat__starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.chat__starters button {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: #101827;
  color: #8fa6c4;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.chat__starters button:hover { border-color: rgba(124, 196, 255, 0.35); color: #eaf2fb; }
.chat__composer { display: flex; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.chat__composer textarea {
  flex: 1;
  min-height: 42px;
  max-height: 132px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: #101827;
  color: #eaf2fb;
  font: inherit;
  font-size: 0.9rem;
  resize: none;
}
.chat__composer textarea:focus { outline: none; border-color: rgba(124, 196, 255, 0.4); }
.chat__composer textarea::placeholder { color: #6b7f97; }
.chat__send {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #7cc4ff;
  color: #0a0f1a;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.chat__send:hover { filter: brightness(1.08); }
.chat__send:disabled, .chat__composer textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.chat__hint { padding: 0 16px 12px; font-size: 0.76rem; color: #6b7f97; }

.dots { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #6b7f97; animation: dl-dot 1.1s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.dots i:nth-child(2) { animation-delay: 0.14s; }
.dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes dl-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ---------------------------------------------------------------- docs --- */

/*
 * The documentation. Their site has no docs, so there is nothing to mirror —
 * this is the one page shape written from scratch, in their type scale and their
 * surfaces, so it reads as the same site.
 */
.docs-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.docs-side { position: sticky; top: 104px; display: grid; gap: 22px; }
.docs-side h2 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7f97;
}
.docs-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.docs-side a {
  display: block;
  padding: 7px 11px;
  border-radius: 9px;
  color: #8fa6c4;
  font-size: 0.86rem;
  line-height: 1.4;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.docs-side a:hover { background: #141d2e; color: #eaf2fb; }
.docs-side a[aria-current='page'] { background: rgba(124, 196, 255, 0.1); color: #7cc4ff; }
.docs-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.docs-hub a {
  display: block;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: #101827;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.docs-hub a:hover { border-color: rgba(124, 196, 255, 0.3); transform: translateY(-2px); }
.docs-hub h3 { margin: 0 0 8px; color: #eaf2fb; font-size: 0.98rem; font-weight: 600; }
.docs-hub p { margin: 0; color: #8fa6c4; font-size: 0.86rem; line-height: 1.6; }

.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.docs-pager a {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: #101827;
  transition: border-color 0.25s ease;
}
.docs-pager a:hover { border-color: rgba(124, 196, 255, 0.3); }
.docs-pager a.next { text-align: right; }
.docs-pager small { color: #6b7f97; font-size: 0.74rem; }
.docs-pager strong { color: #eaf2fb; font-size: 0.9rem; font-weight: 600; }

.docs-toc { margin: 0 0 36px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; background: #101827; }
.docs-toc p { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7f97; }
.docs-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 1px; line-height: 1.5; }
.docs-toc li { padding: 2px 0; }
.docs-toc a { color: #8fa6c4; font-size: 0.88rem; }
.docs-toc a:hover { color: #7cc4ff; }

/*
 * The prose itself. Their utilities cover colour and spacing but not the type of
 * a document — headings, lists, code, tables — so that is what this is.
 */
.prose-k { color: #8fa6c4; font-size: 0.94rem; line-height: 1.75; }
.prose-k > * + * { margin-top: 16px; }
.prose-k h2 { margin: 44px 0 0; color: #eaf2fb; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; scroll-margin-top: 110px; }
.prose-k h3 { margin: 32px 0 0; color: #eaf2fb; font-size: 1.06rem; font-weight: 600; scroll-margin-top: 110px; }
.prose-k strong { color: #eaf2fb; font-weight: 600; }
.prose-k a { color: #7cc4ff; text-decoration: underline; text-decoration-color: rgba(124, 196, 255, 0.35); text-underline-offset: 3px; }
.prose-k a:hover { text-decoration-color: currentColor; }
.prose-k ul, .prose-k ol { padding-left: 22px; display: grid; gap: 8px; }
.prose-k ul { list-style: disc; }
.prose-k ol { list-style: decimal; }
.prose-k li::marker { color: #4f627d; }
.prose-k code {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #141d2e;
  color: #e6f3ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
}
.prose-k pre {
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: #0d1524;
}
.prose-k pre code { padding: 0; border: 0; background: none; font-size: 0.84rem; line-height: 1.7; }
.prose-k blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid rgba(124, 196, 255, 0.5); color: #a9bdd4; }
.prose-k table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.prose-k th, .prose-k td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; }
.prose-k th { color: #eaf2fb; font-weight: 600; background: #101827; }
.prose-k hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 36px 0; }
.prose-k img { max-width: 100%; border-radius: 12px; }

@media (max-width: 1080px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .docs-side { position: static; }
  .docs-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .docs-hub, .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .chat-fab span { display: none; }
  .chat-fab { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-faq-answer],
  .chat,
  #dlMenu { transition: none !important; }
  .dots i { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------ utilities the layout sheet lacks ---
 *
 * The layout stylesheet is a *compiled* Tailwind build: it carries the utilities
 * that were present in the markup it was compiled for, and nothing else. A class
 * used here that was not in that markup matches no rule at all — no error, no
 * warning, just a style that silently does nothing.
 *
 * Two bugs came out of exactly that. `mt-14` on the download page resolved to a
 * margin-top of 0, which is why "Before you ask" sat flush against the cards above
 * it. And two gradient stops on the platform tiles matched nothing, so
 * `--tw-gradient-stops` stayed empty and the tiles rendered with no background at
 * all. The colour half of that is fixed at the source now — the site builder
 * rewrites the palette in both the stylesheet and the markup, in one casing, so a
 * selector and its class cannot disagree. These are the geometric ones, which no
 * palette change could supply.
 */

.mt-28 { margin-top: 7rem; }
.pb-24 { padding-bottom: 6rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.object-cover { object-fit: cover; }
.object-top { object-position: top; }
.border-transparent { border-color: transparent; }
.cursor-not-allowed { cursor: not-allowed; }

/* The CTA sits on the accent colour, so its label is the page colour. */
.text-background { color: #0a0f1a; }
.text-\[\#0a0f1a\] { color: #0a0f1a; }

.hover\:brightness-110:hover { filter: brightness(1.1); }