/* comofficekit.com only: the four SDK demos (_authoring/sdk_demos.py draws them
   from _authoring/demo_records/). lynxoffice.com never loads this file.

   A demo shows a real run of the engine, and nothing the run did not produce
   (README, "comofficekit.com's demos"): this file only places and moves what
   the records hold. No JavaScript, as in demos.css: the page stays static.

   Sizing: each visual is drawn on a grid 48em wide, and 1em is its column's
   width / 48, so a demo scales as one piece from a phone to a wide screen.

   Motion: one 12 s loop. An element joins it with .ckd-t and a step class
   naming the percent of the loop where it acts: ckd-in-20 appears at 20%,
   ckd-gone-20 leaves at 20%, ckd-hl-20 flashes at 20%, ckd-fade-46 and
   ckd-wipe-40 reveal an image. Everything resets at 95-100%. Under
   prefers-reduced-motion nothing moves and the last frame shows. To add a
   step, add its keyframe and class to the list at the bottom. */

.ckd-list { display: grid; gap: clamp(48px, 7vw, 96px); margin-top: clamp(32px, 4vw, 48px); }

.ckd {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* A flipped row puts the copy on the right; the visual keeps the wide column. */
.ckd--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ckd--flip .ckd__copy { order: 2; }
.ckd__copy { min-width: 0; display: grid; gap: 18px; align-content: start; }
.ckd__intro { display: grid; gap: 12px; }
.ckd__copy .eyebrow { margin: 0; }
.ckd__copy h3 { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); color: var(--ink); line-height: 1.25; }
.ckd__copy p { margin: 0; }
.ckd__for { color: var(--muted); }
.ckd__code { margin-top: 0; }
/* 11 px holds the harness's 48-character lines in the copy column from 1200 px
   down, in half the row from 1200 to 900 px, and on a phone. */
.ckd__code pre { font-size: 0.6875rem; }
.ckd__fig { margin: 0; min-width: 0; }
.ckd__fig figcaption { margin-top: 14px; font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
.ckd-proof { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 0.875rem; color: var(--muted); text-align: center; }

@media (max-width: 1200px) {
  .ckd, .ckd--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ckd, .ckd--flip { grid-template-columns: minmax(0, 1fr); }
  .ckd--flip .ckd__copy { order: 0; }
  .ckd__code { padding: 18px 16px; }
}
@media (max-width: 380px) {
  .ckd__code pre { font-size: 0.625rem; }   /* 48 characters on a 360 px phone */
}

/* ---------- the visual ---------- */

.ckd__stage { container-type: inline-size; }
.ckd-v {
  --dw: 48;
  --ckd-flash: rgba(73, 242, 186, 0.45);
  position: relative;
  font-size: 10px;                          /* without container units */
  font-size: calc(100cqw / var(--dw));
  aspect-ratio: 48 / 36;
  overflow: hidden;
  border-radius: 1.2em;
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  color: var(--body);
  font-family: var(--text);
  line-height: 1.3;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}
.ckd-v * { box-sizing: border-box; }
.ckd-v img { display: block; max-width: none; }
.ckd-v p { margin: 0; }
.ckd-dots { display: inline-flex; gap: 0.45em; }
.ckd-dots i { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--hairline-strong); }
.ckd-badge {
  position: absolute; left: 1.3em; bottom: 1.2em;
  padding: 0.45em 0.9em; border-radius: 999px;
  background: var(--lynx-navy); color: #FFFFFF;
  font-size: 1.15em; font-weight: 600; white-space: nowrap;
}
.ckd-badge span { color: var(--lynx-mint); }

/* 1. Fill a contract template: the top of the page, the values, the count. */
.ckd-gen__page {
  position: absolute; left: 1.5em; right: 1.5em; top: 1.5em; height: 21.5em;
  overflow: hidden; border-radius: 0.6em; background: #FFFFFF;
  box-shadow: 0 0.2em 0.8em rgba(0, 12, 28, 0.12), 0 0 0 1px var(--hairline);
}
.ckd-gen__img { position: absolute; left: 0; top: -3.4em; width: 100%; height: auto; }
.ckd-gen__swaps { position: absolute; left: 1.5em; right: 1.5em; top: 24em; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.ckd-gen__swaps li { display: flex; align-items: baseline; gap: 0.6em; font-size: 1.2em; white-space: nowrap; }
.ckd-gen__swaps code { font-family: var(--mono); font-size: 0.85em; padding: 0.1em 0.4em; border-radius: 0.35em; background: var(--paper); color: var(--muted); box-shadow: 0 0 0 1px var(--hairline); }
.ckd-gen__swaps i { font-style: normal; color: var(--muted); }
.ckd-gen__swaps b { color: var(--ink); }
.ckd-gen__swaps em { font-style: normal; font-size: 0.85em; color: var(--muted); }

/* 2. Previews: three files, their thumbnails, one export. */
.ckd-pre__bar { position: absolute; left: 0; right: 0; top: 0; height: 3.2em; display: flex; align-items: center; gap: 1.2em; padding: 0 1.4em; background: var(--paper); border-bottom: 1px solid var(--hairline); font-size: 1.1em; color: var(--ink); }
.ckd-pre__grid { position: absolute; left: 1.5em; right: 1.5em; top: 5.5em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; }
.ckd-pre__thumb { position: relative; height: 18em; border-radius: 0.7em; background: var(--paper); box-shadow: 0 0 0 1px var(--hairline); display: grid; place-items: center; overflow: hidden; }
.ckd-pre__thumb img { grid-area: 1 / 1; max-width: 86%; max-height: 86%; width: auto; height: auto; box-shadow: 0 0.15em 0.5em rgba(0, 12, 28, 0.18); }
.ckd-pre__skel { position: absolute; inset: 1.6em 2em; border-radius: 0.3em; background: repeating-linear-gradient(to bottom, var(--paper-3) 0 0.9em, transparent 0.9em 1.9em); }
/* Two lines, so two files with one name still show their extensions. */
.ckd-pre__name { margin-top: 0.8em !important; font-size: 1.05em; font-weight: 600; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ckd-pre__meta { margin-top: 0.2em !important; font-size: 1em; color: var(--muted); }
.ckd-pre__pdf { position: absolute; left: 1.5em; right: 1.5em; bottom: 1.6em; display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; color: var(--ink); white-space: nowrap; overflow: hidden; }
.ckd-pre__pdf b { font-weight: 400; color: var(--muted); }
.ckd-pre__chip { flex: none; padding: 0.2em 0.55em; border-radius: 0.35em; background: var(--pdf-bg); color: var(--pdf-fg); font-weight: 700; font-size: 0.85em; }

/* 3. Recalculate a quote: a formula bar and the sheet's rows 4 to 10. */
.ckd-cal__bar { position: absolute; left: 1.5em; right: 1.5em; top: 1.5em; height: 3em; display: flex; align-items: center; gap: 0.9em; padding: 0 1em; background: var(--paper); border-radius: 0.5em; box-shadow: 0 0 0 1px var(--hairline); font-size: 1.15em; color: var(--ink); white-space: nowrap; }
.ckd-cal__ref { min-width: 3.4em; padding-right: 0.8em; border-right: 1px solid var(--hairline); font-weight: 600; }
.ckd-cal__bar i { font-style: italic; color: var(--muted); }
.ckd-cal__bar > span:last-child { font-family: var(--mono); font-size: 0.95em; }
.ckd-cal__grid { position: absolute; left: 1.5em; top: 6.2em; width: 45em; border-collapse: collapse; table-layout: fixed; background: var(--paper); box-shadow: 0 0 0 1px var(--hairline); }
.ckd-cal__grid th, .ckd-cal__grid td { height: 2.75em; padding: 0 0.5em; border: 1px solid var(--hairline); font-size: 1em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckd-cal__grid thead th { height: 2em; background: var(--paper-3); color: var(--muted); font-size: 0.95em; text-align: center; }
.ckd-cal__grid tbody th { background: var(--paper-3); color: var(--muted); font-size: 0.95em; text-align: center; }
.ckd-cal__grid thead th:nth-child(1) { width: 6%; }
.ckd-cal__grid thead th:nth-child(2) { width: 34%; }
.ckd-cal__grid thead th:nth-child(3) { width: 14%; }
.ckd-cal__grid thead th:nth-child(4) { width: 15%; }
.ckd-cal__grid thead th:nth-child(5) { width: 14%; }
.ckd-cal__grid thead th:nth-child(6) { width: 17%; }
.ckd-cal__num { text-align: right; font-variant-numeric: tabular-nums; }
.ckd-cal__head { background: #E3F1F0; color: #123C4A; font-weight: 600 !important; }
.ckd-cal__sel { outline: 0.18em solid var(--accent); outline-offset: -0.18em; }
.ckd-swap { display: inline-grid; justify-items: end; }
.ckd-swap > span { grid-area: 1 / 1; }

/* 4. An AI assistant reviews a contract: the clauses it changes, the calls. */
.ckd-v--ai { aspect-ratio: 48 / 45; }
.ckd-ai__doc {
  position: absolute; left: 1.5em; right: 1.5em; top: 1.5em; height: 11.4em;
  overflow: hidden; border-radius: 0.6em; background: #FFFFFF;
  box-shadow: 0 0.2em 0.8em rgba(0, 12, 28, 0.12), 0 0 0 1px var(--hairline);
}
.ckd-ai__img { position: absolute; left: 0; top: -16.6em; width: 100%; height: auto; }
.ckd-ai__chat { position: absolute; left: 1.5em; top: 14.2em; bottom: 1.5em; width: 28.5em; overflow: hidden; border-radius: 0.7em; background: var(--paper); box-shadow: 0 0 0 1px var(--hairline); }
.ckd-ai__head { display: flex; align-items: center; gap: 0.6em; height: 2.6em; padding: 0 1em; border-bottom: 1px solid var(--hairline); font-size: 1.05em; font-weight: 600; color: var(--ink); }
.ckd-ai__glyph { width: 1em; height: 1em; border-radius: 0.3em; background: var(--accent); }
.ckd-ai__flow { display: grid; gap: 0.45em; padding: 0.8em 1em; }
.ckd-ai__ask { justify-self: end; max-width: 92%; padding: 0.5em 0.8em; border-radius: 0.8em 0.8em 0.2em 0.8em; background: var(--lynx-navy); color: #FFFFFF; font-size: 1em; }
.ckd-ai__call { display: flex; gap: 0.6em; align-items: baseline; margin-top: 0.3em; font-family: var(--mono); font-size: 0.88em; white-space: nowrap; overflow: hidden; }
.ckd-ai__tool { flex: none; font-weight: 700; color: var(--accent-text); }
.ckd-ai__args { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
/* The box carries the padding and the text inside it the clamp: clamped with
   padding on the same box, a third line shows through the padding. */
.ckd-ai__reply { padding: 0.35em 0.6em; border-radius: 0.4em; background: var(--paper-3); font-family: var(--mono); font-size: 0.8em; color: var(--body); line-height: 1.35; }
.ckd-ai__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.ckd-ai__note { position: absolute; right: 1.5em; top: 14.2em; width: 13.5em; padding: 0.8em 1em; border-radius: 0.7em; background: var(--paper); box-shadow: 0 0 0 1px var(--hairline), 0 0.3em 1em rgba(0, 12, 28, 0.12); border-left: 0.3em solid var(--accent); }
.ckd-ai__note b { display: block; font-size: 1em; color: var(--ink); }
.ckd-ai__note p { margin-top: 0.3em; font-size: 1em; line-height: 1.4; }

/* ---------- the loop ---------- */

.ckd-t { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; }
@keyframes ckd-in-04 { 0%, 04% { opacity: 0; transform: translateY(0.4em); } 06%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-10 { 0%, 10% { opacity: 0; transform: translateY(0.4em); } 12%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-12 { 0%, 12% { opacity: 0; transform: translateY(0.4em); } 14%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-15 { 0%, 15% { opacity: 0; transform: translateY(0.4em); } 17%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-16 { 0%, 16% { opacity: 0; transform: translateY(0.4em); } 18%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-20 { 0%, 20% { opacity: 0; transform: translateY(0.4em); } 22%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-24 { 0%, 24% { opacity: 0; transform: translateY(0.4em); } 26%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-25 { 0%, 25% { opacity: 0; transform: translateY(0.4em); } 27%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-28 { 0%, 28% { opacity: 0; transform: translateY(0.4em); } 30%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-30 { 0%, 30% { opacity: 0; transform: translateY(0.4em); } 32%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-33 { 0%, 33% { opacity: 0; transform: translateY(0.4em); } 35%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-38 { 0%, 38% { opacity: 0; transform: translateY(0.4em); } 40%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-41 { 0%, 41% { opacity: 0; transform: translateY(0.4em); } 43%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-44 { 0%, 44% { opacity: 0; transform: translateY(0.4em); } 46%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-45 { 0%, 45% { opacity: 0; transform: translateY(0.4em); } 47%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-49 { 0%, 49% { opacity: 0; transform: translateY(0.4em); } 51%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-54 { 0%, 54% { opacity: 0; transform: translateY(0.4em); } 56%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-60 { 0%, 60% { opacity: 0; transform: translateY(0.4em); } 62%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ckd-in-62 { 0%, 62% { opacity: 0; transform: translateY(0.4em); } 64%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ckd-in-04 { animation-name: ckd-in-04; }
.ckd-in-10 { animation-name: ckd-in-10; }
.ckd-in-12 { animation-name: ckd-in-12; }
.ckd-in-15 { animation-name: ckd-in-15; }
.ckd-in-16 { animation-name: ckd-in-16; }
.ckd-in-20 { animation-name: ckd-in-20; }
.ckd-in-24 { animation-name: ckd-in-24; }
.ckd-in-25 { animation-name: ckd-in-25; }
.ckd-in-28 { animation-name: ckd-in-28; }
.ckd-in-30 { animation-name: ckd-in-30; }
.ckd-in-33 { animation-name: ckd-in-33; }
.ckd-in-38 { animation-name: ckd-in-38; }
.ckd-in-41 { animation-name: ckd-in-41; }
.ckd-in-44 { animation-name: ckd-in-44; }
.ckd-in-45 { animation-name: ckd-in-45; }
.ckd-in-49 { animation-name: ckd-in-49; }
.ckd-in-54 { animation-name: ckd-in-54; }
.ckd-in-60 { animation-name: ckd-in-60; }
.ckd-in-62 { animation-name: ckd-in-62; }
@keyframes ckd-gone-12 { 0%, 12% { opacity: 1; } 14%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-15 { 0%, 15% { opacity: 1; } 17%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-20 { 0%, 20% { opacity: 1; } 22%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-25 { 0%, 25% { opacity: 1; } 27%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-28 { 0%, 28% { opacity: 1; } 30%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-33 { 0%, 33% { opacity: 1; } 35%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-41 { 0%, 41% { opacity: 1; } 43%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-gone-49 { 0%, 49% { opacity: 1; } 51%, 95% { opacity: 0; } 100% { opacity: 1; } }
.ckd-gone-12 { animation-name: ckd-gone-12; }
.ckd-gone-15 { animation-name: ckd-gone-15; }
.ckd-gone-20 { animation-name: ckd-gone-20; }
.ckd-gone-25 { animation-name: ckd-gone-25; }
.ckd-gone-28 { animation-name: ckd-gone-28; }
.ckd-gone-33 { animation-name: ckd-gone-33; }
.ckd-gone-41 { animation-name: ckd-gone-41; }
.ckd-gone-49 { animation-name: ckd-gone-49; }
@keyframes ckd-hl-15 { 0%, 15% { background-color: transparent; } 16% { background-color: var(--ckd-flash); } 27%, 100% { background-color: transparent; } }
@keyframes ckd-hl-25 { 0%, 25% { background-color: transparent; } 26% { background-color: var(--ckd-flash); } 37%, 100% { background-color: transparent; } }
@keyframes ckd-hl-33 { 0%, 33% { background-color: transparent; } 34% { background-color: var(--ckd-flash); } 45%, 100% { background-color: transparent; } }
@keyframes ckd-hl-41 { 0%, 41% { background-color: transparent; } 42% { background-color: var(--ckd-flash); } 53%, 100% { background-color: transparent; } }
@keyframes ckd-hl-49 { 0%, 49% { background-color: transparent; } 50% { background-color: var(--ckd-flash); } 61%, 100% { background-color: transparent; } }
.ckd-hl-15 { animation-name: ckd-hl-15; }
.ckd-hl-25 { animation-name: ckd-hl-25; }
.ckd-hl-33 { animation-name: ckd-hl-33; }
.ckd-hl-41 { animation-name: ckd-hl-41; }
.ckd-hl-49 { animation-name: ckd-hl-49; }
@keyframes ckd-fade-46 { 0%, 46% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.ckd-fade-46 { animation-name: ckd-fade-46; }
@keyframes ckd-wipe-40 { 0%, 40% { clip-path: inset(0 0 100% 0); } 52%, 95% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
.ckd-wipe-40 { animation-name: ckd-wipe-40; }

@media (prefers-reduced-motion: reduce) {
  .ckd-t { animation: none !important; }
  .ckd-v [class*="ckd-gone-"] { opacity: 0; }
  .ckd-v [class*="ckd-in-"], .ckd-v [class*="ckd-fade-"] { opacity: 1; transform: none; }
  .ckd-v [class*="ckd-wipe-"] { clip-path: none; }
}