/* Kanonik site demos (kx). Styles for the full demo (data-kx-demo) and the moments (data-kx-moment).
   Pairs with kx.js. Built for the site's dark ground; every colour comes from the tokens below. */
.kx-root{
  /* the new design's dark tokens (dashboard mockup v6, [data-theme="dark"]) */
  --kx-bg:#0E1217;--kx-panel:#161B22;--kx-panel-2:#1B212A;--kx-ink:#E7EBF0;--kx-ink-2:#A6AEBA;--kx-ink-3:#868F9C;--kx-line:#232B35;--kx-line-2:#323C48;
  --kx-ok:#3B9A5E;--kx-gold:#A9BCD3;--kx-gold-ink:#0E1217;--kx-gold-hover:#BCCBDF;--kx-focus:#83A6FF;--kx-r:2px;
  /* the new design's "Your AI" panel */
  --kx-ai:#161B22;--kx-ai-ink:#E7EBF0;--kx-ai-line:#2A333F;--kx-ai-bubble:#1F2630;
  --kx-sans:"Libre Franklin",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kx-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:relative;font-family:var(--kx-sans);color:var(--kx-ink)}
.kx-root *,.kx-root *::before,.kx-root *::after{box-sizing:border-box}

/* ---------- shared: cursor, ripple, trigger, caption ---------- */
.kx-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:30;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.kx-cursor.on{opacity:1}
.kx-cursor svg{display:block;width:22px;height:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));transition:transform .12s}
.kx-cursor.down svg{transform:scale(.86)}
.kx-ripple{position:absolute;z-index:29;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--kx-gold);pointer-events:none;animation:kx-rip .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes kx-rip{from{opacity:1;transform:scale(.25)}to{opacity:0;transform:scale(1.5)}}
.kx-trigger{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid var(--kx-gold);border-radius:var(--kx-r);background:var(--kx-gold);color:var(--kx-gold-ink);
  font:600 15px var(--kx-sans);cursor:pointer}
.kx-trigger:hover{background:var(--kx-gold-hover);border-color:var(--kx-gold-hover)}
.kx-trigger:focus-visible{outline:2px solid var(--kx-focus);outline-offset:2px}
.kx-trigger svg{width:14px;height:14px}
.kx-trigger[aria-busy="true"]{background:transparent;color:var(--kx-ink);border-color:var(--kx-line-2)}
.kx-caption{min-height:1.5em;font-size:14px;line-height:1.5;color:var(--kx-ink-2)}

/* ---------- full demo ---------- */
.kx-demo{max-width:1320px;margin:0 auto}
.kx-demo .kx-stage{position:relative;height:720px}
.kx-appwin{position:absolute;left:0;top:0;bottom:0;right:368px;border:1px solid var(--kx-line-2);border-radius:var(--kx-r);overflow:hidden;background:var(--kx-bg);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4)}
.kx-appwin iframe{display:block;width:100%;height:100%;border:0;background:var(--kx-bg);transform-origin:0 0}
.kx-appwin.kx-playing iframe{pointer-events:none}
.kx-chatwin{position:absolute;right:0;top:44px;width:380px;bottom:28px;z-index:5;border-radius:var(--kx-r);overflow:hidden;
  background:var(--kx-ai);color:var(--kx-ai-ink);border:1px solid var(--kx-ai-line);box-shadow:0 12px 32px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);display:flex;flex-direction:column}
.kx-cbar{padding:12px 16px;border-bottom:1px solid var(--kx-ai-line);font-size:13px}
.kx-cbar b{color:var(--kx-ai-ink);font-weight:700}
.kx-cbar{display:flex;align-items:center;gap:10px}
.kx-badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#A6AEBA;opacity:0;transition:opacity .4s}
.kx-badge.in{opacity:1}
.kx-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kx-ok)}
.kx-msg.run{align-self:stretch;max-width:none;display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.03em;color:#939BA8;padding:2px 0}
.kx-msg.run::before,.kx-msg.run::after{content:"";flex:1;border-top:1px solid var(--kx-ai-line)}
.kx-conn{display:flex;align-items:center;gap:10px;margin:12px 14px 4px;padding:10px 12px;border:1px solid var(--kx-ai-line);border-radius:var(--kx-r);background:var(--kx-ai-bubble)}
.kx-conn .k{width:26px;height:26px;border-radius:var(--kx-r);background:#0B0B0F;display:flex;align-items:center;justify-content:center;flex:none}
.kx-conn .k svg{width:15px;height:15px}
.kx-conn .t{font-size:13px;line-height:1.3}.kx-conn .t b{display:block;font-weight:700}.kx-conn .t span{color:#A6AEBA;font-size:12px}
.kx-conn .st{margin-left:auto;font-size:12px;color:var(--kx-ai-ink);display:flex;align-items:center;gap:6px}
.kx-conn .st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kx-ok)}
.kx-log{flex:1;overflow:hidden;position:relative}
.kx-log-in{position:absolute;left:0;right:0;top:0;padding:12px 16px 8px;display:flex;flex-direction:column;gap:12px;will-change:transform}
.kx-msg{font-size:14px;line-height:1.5;max-width:92%;opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.kx-msg.in,.kx-msg.pre{opacity:1;transform:none}
.kx-msg.u{align-self:flex-end;max-width:88%;background:var(--kx-ai-bubble);padding:8px 12px;border-radius:10px}
.kx-msg.a{color:var(--kx-ai-ink)}
.kx-msg.a b{font-weight:700}
.kx-msg.kn{border-left:2px solid var(--kx-gold);padding:2px 0 2px 10px}
.kx-msg.kn b{color:var(--kx-gold-hover);font-weight:700}
.kx-msg code{font-family:var(--kx-mono);font-size:12.5px}
.kx-tool{display:flex;align-items:center;gap:9px;font-size:12px;color:#A6AEBA;padding:1px 0;max-width:100%}
.kx-tool .ic{width:12px;height:12px;flex:none;border-radius:50%;border:1.5px solid #A6AEBA;border-top-color:transparent;animation:kx-spin .8s linear infinite}
.kx-tool.done .ic{animation:none;border:0;background:var(--kx-ok);position:relative}
.kx-tool.done .ic::after{content:"";position:absolute;left:4px;top:2px;width:3px;height:6px;border:solid #FFFFFF;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.kx-tool code{font-family:var(--kx-mono);font-size:11.5px;color:var(--kx-ai-ink)}
.kx-tool .res{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
@keyframes kx-spin{to{transform:rotate(360deg)}}
.kx-typing{display:flex;gap:4px;padding:4px 0;opacity:0;transition:opacity .3s}
.kx-typing.on{opacity:1}
.kx-typing i{width:6px;height:6px;border-radius:50%;background:#A6AEBA;animation:kx-bob 1.1s infinite}
.kx-typing i:nth-child(2){animation-delay:.15s}.kx-typing i:nth-child(3){animation-delay:.3s}
@keyframes kx-bob{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.kx-input{display:flex;align-items:center;gap:8px;margin:12px;padding:8px 8px 8px 12px;border:1px solid var(--kx-ai-line);border-radius:10px;background:#0E1217;transition:border-color .3s,box-shadow .3s}
.kx-input.focus{border-color:#3A4452;box-shadow:0 0 0 3px rgba(169,188,211,.14)}
.kx-input .tx{flex:1;min-width:0;font-size:14px;color:var(--kx-ai-ink);white-space:nowrap;overflow:hidden}
.kx-input .tx.ph{color:#939BA8}
.kx-input .caret{display:inline-block;width:1.5px;height:15px;background:var(--kx-ai-ink);vertical-align:-2px;margin-left:1px;animation:kx-blink 1s steps(1) infinite}
@keyframes kx-blink{50%{opacity:0}}
.kx-send{flex:none;width:32px;height:32px;border-radius:8px;border:0;background:var(--kx-ai-bubble);color:#939BA8;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .15s}
.kx-send.armed{background:var(--kx-gold);color:var(--kx-gold-ink)}
.kx-send.press{transform:scale(.9)}
.kx-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.kx-bar .kx-caption{flex:1 1 30ch}
.kx-live{font-size:13px;color:var(--kx-ink-3)}
@media (max-width:900px){
  .kx-demo .kx-stage{height:auto}
  .kx-appwin{position:relative;right:auto;height:640px}
  .kx-chatwin{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:380px;margin-top:-24px;margin-left:16px;margin-right:0}
}

/* The site swaps every piece for a static infographic below 900 px (kbuild .kxi); kx.js mounts only displayed pieces. */
@media (max-width:899.98px){[data-kx-demo],[data-kx-moment]{display:none!important}}

/* ---------- moments: a piece of the real app in an organic shape that fades into the page ---------- */
.kx-moment{display:grid;gap:14px;justify-items:start}
.kx-shape{position:relative;width:100%;aspect-ratio:var(--kx-ar,1.35);max-width:var(--kx-maxw,760px);overflow:hidden;
  -webkit-mask-image:var(--kx-mask);mask-image:var(--kx-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.kx-shape .kx-view{position:absolute;left:0;top:0;transform-origin:0 0}
.kx-shape iframe{display:block;border:0;background:var(--kx-bg)}
.kx-shape.kx-playing iframe{pointer-events:none}
.kx-shape .kx-cursor{z-index:6}
/* facade: the still of the first frame covers the shape until the live app has rendered under it */
.kx-shape .kx-poster{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:5;pointer-events:none;
  object-fit:cover;object-position:0 0;transition:opacity .2s,visibility 0s .2s}
.kx-ready .kx-shape .kx-poster{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.kx-shape .kx-poster{transition:none}}
.kx-chatwin.kx-chatwin-in{position:relative;right:auto;top:auto;bottom:auto;flex:none}
.kx-mbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-left:8%}
.kx-mbar .kx-caption{max-width:48ch}
@media (prefers-reduced-motion:reduce){.kx-msg,.kx-cursor,.kx-typing i,.kx-tool .ic{transition:none!important;animation:none!important}}

/* r3 (app audit issue 10): a moment in the light theme on a light page gets the app's light tokens for its
   own chrome (caption #4E525B 6.91:1, trigger #2743A3 with white 8.68:1, busy state in ink). */
.kx-root[data-kx-theme="light"]{--kx-bg:#EFF1F2;--kx-panel:#FFFFFF;--kx-panel-2:#F6F8F9;--kx-ink:#15171B;--kx-ink-2:#4E525B;--kx-ink-3:#5E636C;
  --kx-line:#E3E5E8;--kx-line-2:#D3D6DA;--kx-ok:#15612C;--kx-gold:#2743A3;--kx-gold-ink:#FFFFFF;--kx-gold-hover:#1F3787;--kx-focus:#2743A3}

/* ---------- demo-v2: a full-size demo is one laptop screen (1440 x 900) in a plain window ----------
   The window's title bar carries the caption (left) and one small Replay (right): the same control on every
   demo on the site. The AI chat of a scene (monitor) is tiled inside the same screen, in its own graphite
   dark, so the chat and the Kanonik app read as two different products side by side. */
.kx-win{position:relative;width:100%;max-width:var(--kx-native,1440px);border:1px solid var(--kx-line-2);border-radius:6px;overflow:hidden;background:var(--kx-bg)}
.kx-wbar{display:flex;align-items:center;gap:16px;min-height:48px;padding:7px 8px 7px 16px;background:var(--kx-panel-2);border-bottom:1px solid var(--kx-line-2)}
.kx-wbar .kx-caption{flex:1;min-width:0;margin:0;max-width:none;min-height:0;font-size:14px;line-height:1.4;color:var(--kx-ink-2)}
.kx-root .kx-replay,.kx-root .kx-replay[aria-busy="true"]{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:0;height:32px;padding:0 11px 0 9px;
  font:600 13.5px var(--kx-sans);color:var(--kx-ink);background:transparent;border:1px solid var(--kx-line-2);border-radius:4px;cursor:pointer;filter:none}
.kx-root .kx-replay:hover{background:transparent;border-color:var(--kx-ink-3)}
.kx-root .kx-replay:focus-visible{outline:2px solid var(--kx-focus);outline-offset:2px}
.kx-root .kx-replay svg{width:15px;height:15px}
.kx-win .kx-shape{max-width:none;border:0;border-radius:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
.kx-root{--kx-chat:#1F2024;--kx-chat-2:#2A2B30;--kx-chat-ink:#ECECEE;--kx-chat-ink-2:#A9AAB0;--kx-chat-line:#36373D;--kx-chat-field:#17181B}
.kx-chatwin.kx-chat-tile{flex:none;border:0;border-right:1px solid var(--kx-chat-line);border-radius:0;box-shadow:none;margin:0;
  --kx-ai:var(--kx-chat);--kx-ai-ink:var(--kx-chat-ink);--kx-ai-line:var(--kx-chat-line);--kx-ai-bubble:var(--kx-chat-2);
  --chat-field:var(--kx-chat-field);--chat-quiet:var(--kx-chat-ink-2);background:var(--kx-chat);color:var(--kx-chat-ink)}
.kx-chat-tile .kx-cbar{padding:16px 20px;font-size:14px}
.kx-chat-tile .kx-msg{font-size:15px}
.kx-chat-tile .kx-tool{font-size:13px}.kx-chat-tile .kx-tool code{font-size:12.5px}
.kx-chat-tile .kx-conn .t span,.kx-chat-tile .kx-badge{color:var(--kx-chat-ink-2)}
.kx-chat-tile .kx-conn .k{background:#0B0B0F}
.kx-chat-tile .kx-input{background:var(--kx-chat-field)}
.kx-shape:has(.kx-chat-tile) iframe{border:0!important;border-radius:0!important;box-shadow:none!important}