/* The floating layer of Koda (app/koda.js): fixed above the page, below the modal dialogs; the presence animations (hide, peek, appear), the edge tab, the mute mark and the header button. */
.koda-layer{position:fixed;inset:0;z-index:80;pointer-events:none}
.koda-layer[hidden]{display:none}
.koda.koda-layer .bubhost{position:absolute;inset:0;pointer-events:none}
.koda.koda-layer .bub{pointer-events:auto;position:absolute;left:0;top:0;width:min(var(--bw,330px),calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:visible}
.koda.koda-layer .bub.long{overflow:auto}
.koda.koda-layer .float{position:fixed;right:auto;bottom:auto;pointer-events:auto}
.koda.koda-layer .float .badge{top:2px;left:2px}
.koda.koda-layer .row.small{margin-top:6px}
.koda.koda-layer .row.small button{font-size:12px;padding:3px 9px}
.koda.koda-layer .mutebadge{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#10132b;border:1px solid var(--k-line);color:var(--k-dim);display:flex;align-items:center;justify-content:center}
.koda.koda-layer .mutebadge[hidden]{display:none}
/* hide: it waves, squashes and sinks into the nearest edge; peek: only the top of the stem and the tail look out; appear: it jumps up from the edge */
.koda.koda-layer .float.is-hiding{animation:koda-hide .75s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes koda-hide{0%{transform:none}18%{transform:scale(1.08,.9)}35%{transform:translate(0,-14px) scale(.95,1.06)}100%{transform:translate(var(--hx),var(--hy)) scale(.6)}}
.koda.koda-layer .float.is-hidden{display:none}
.koda.koda-layer .float.is-peeking{transform:translate(var(--px),var(--py));transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.koda.koda-layer .float.is-appearing{animation:koda-appear .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes koda-appear{0%{transform:translate(var(--hx),var(--hy)) scale(.6)}55%{transform:translate(0,-18px) scale(.92,1.1)}78%{transform:scale(1.08,.92)}100%{transform:none}}
.koda.koda-layer .koda-tab{position:fixed;pointer-events:auto;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--k-teal);background:#10132bf0;color:var(--k-teal);font:700 18px/1 system-ui;cursor:pointer;box-shadow:0 0 14px #19e3c855;display:flex;align-items:center;justify-content:center;padding:0}
.koda.koda-layer .koda-tab[hidden]{display:none}
.koda.koda-layer .koda-tab:hover,.koda.koda-layer .koda-tab:focus-visible{background:#1a2050;outline:2px solid var(--k-cyan);outline-offset:2px}
@media (max-width:700px){.koda.koda-layer .bub{width:min(330px,calc(100vw - 12px))}}
@media (prefers-reduced-motion:reduce){.koda.koda-layer .float.is-hiding{animation:none;opacity:0}.koda.koda-layer .float.is-appearing{animation:none}}
/* the header button (outside the layer) */
#btn-koda.on{color:var(--acc)}
/* a small note next to a field of the Properties panel: ask Koda about it */
.koda-ask{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;min-width:20px;margin-left:6px;padding:0;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--dim);font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.prop:hover .koda-ask,.prop:focus-within .koda-ask,.koda-ask:focus-visible{opacity:1}
.koda-ask:hover{color:var(--acc);border-color:var(--line)}
@media (pointer:coarse){.koda-ask{opacity:.7}}
/* the draft of Koda on the board: dashed ghosts of the blocks it would add */
.koda-ghosts{position:absolute;left:0;top:0;pointer-events:none}
.koda-ghost-lines{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.koda-ghost-lines path{fill:none;stroke:#ff4fd8;stroke-width:2;stroke-dasharray:6 5;opacity:.85}
.koda-ghost{position:absolute;pointer-events:auto;width:200px;padding:8px 10px;border:1.5px dashed #ff4fd8;border-radius:10px;background:color-mix(in srgb,#ff4fd8 12%,var(--panel2));color:var(--text);animation:koda-ghost-in .35s cubic-bezier(.3,1.5,.5,1) both}
.koda-ghost b{display:block;font-size:13px}.koda-ghost span{font-size:11px;color:var(--dim)}
.koda-ghost i{position:absolute;top:-9px;right:8px;font-style:normal;font-size:10px;background:#ff4fd8;color:#1a0a2a;border-radius:6px;padding:0 6px}
@keyframes koda-ghost-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.koda-ghost{animation:none}}

/* Koda's suggestion inside the source editor (app/koda-inline.js) */
.koda-inline{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.koda-inline .ki-content{position:absolute;left:0;right:0;top:0;will-change:transform;font-family:ui-monospace,Consolas,monospace}
.koda-inline .ki-del{position:absolute;left:0;right:0;background:#ff5d6c22;border-left:3px solid #ff5d6c;box-sizing:border-box}
.koda-inline .ki-add{position:absolute;left:8px;right:16px;margin:0;padding:0 8px 0 10px;font:inherit;white-space:pre;overflow:hidden;color:var(--text);background:color-mix(in srgb,#ff4fd8 14%,var(--panel));border-left:3px dashed #ff4fd8;border-radius:0 6px 6px 0;box-shadow:0 2px 10px #0006;animation:koda-ghost-in .3s cubic-bezier(.3,1.5,.5,1) both}
.koda-inline .ki-bar{position:absolute;bottom:10px;right:22px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 44px);padding:5px 8px;border-radius:12px;background:#10132bf2;border:1.5px solid #ff4fd8;color:#eef1ff;box-shadow:0 8px 24px #0009;pointer-events:auto;font:12px system-ui,Segoe UI,sans-serif}
.koda-inline .ki-tag{font:700 10px system-ui;letter-spacing:.14em;text-transform:uppercase;padding:1px 7px;border-radius:6px;background:#ff4fd822;color:#ff4fd8}
.koda-inline .ki-count{font-weight:600;white-space:nowrap}
.koda-inline .ki-bar button{font:inherit;color:#eef1ff;background:#1f2347;border:1px solid #3a3f6b;border-radius:8px;padding:3px 10px;cursor:pointer}
.koda-inline .ki-accept{border-color:#19e3c8;color:#19e3c8}
.koda-inline .ki-bar button:hover:not(:disabled){border-color:#2de2ff}
.koda-inline .ki-input{min-width:0;width:170px;background:#0c0e1d;color:#eef1ff;border:1px solid #3a3f6b;border-radius:8px;padding:3px 8px;font:inherit}
.koda-inline .ki-input:focus{outline:2px solid #2de2ff;outline-offset:1px}
.koda-inline.ki-busy .ki-count::after{content:" … Koda is working";font-weight:400;color:#9aa0c8}
@media (max-width:700px){.koda-inline .ki-bar{flex-wrap:wrap;right:8px;max-width:calc(100% - 16px)}.koda-inline .ki-input{width:120px}}
/* the language switch in Koda's menu */
.koda .seg{display:inline-flex;margin-left:auto;border:1px solid var(--k-line);border-radius:8px;overflow:hidden}
.koda .seg button{border:0;border-radius:0;padding:3px 9px;font-size:12px;background:#1f2347;color:var(--k-dim)}
.koda .seg button+button{border-left:1px solid var(--k-line)}
.koda .seg button.on{background:#2a2160;color:var(--k-text);box-shadow:inset 0 -2px 0 var(--k-pink)}

.koda code{font:12px ui-monospace,Consolas,monospace;padding:0 4px;border-radius:4px;background:#ffffff14;color:#cfd6ff}
.koda-inline .ki-ghost{position:absolute;white-space:pre;padding:0 8px;border-radius:5px;border:1px dashed #ff4fd8;background:color-mix(in srgb,#ff4fd8 16%,var(--panel));color:var(--text);box-shadow:0 2px 8px #0005;pointer-events:none;box-sizing:border-box;font-style:italic}
.koda-gaze{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:79;overflow:visible;--gz-pulse:0}
.koda-gaze .gz{--gc:#2ff3d6;fill:none}
.koda-gaze .gz-glow{fill:none;stroke:var(--gc);stroke-linecap:round;stroke-width:calc(5px + var(--gz-pulse) * 6px);opacity:calc(.16 + var(--gz-pulse) * .28);filter:blur(3px)}
.koda-gaze .gz-line{fill:none;stroke:var(--gc);stroke-linecap:round;stroke-width:calc(1.8px + var(--gz-pulse) * 1.2px);stroke-dasharray:2 9;animation:koda-gz-flow 1.1s linear infinite;filter:drop-shadow(0 0 4px var(--gc))}
.koda-gaze .gz-end{fill:var(--gc);filter:drop-shadow(0 0 6px var(--gc));transform-box:fill-box;transform-origin:center;animation:koda-gz-ring 1.6s ease-in-out infinite}
.koda-gaze .gz-aim{--gc:#7df9ff}.koda-gaze .gz-aim .gz-line{stroke-dasharray:1 7;stroke-width:2.4px}
.koda-gaze .gz-glance{--gc:#ff4fd8}.koda-gaze .gz-glance .gz-line{stroke-width:1.2px;stroke-dasharray:1 6;animation-duration:.8s}.koda-gaze .gz-glance .gz-glow{stroke-width:3px;opacity:.14}
@keyframes koda-gz-flow{to{stroke-dashoffset:-22}}
@keyframes koda-gz-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.koda-gaze .gz-line,.koda-gaze .gz-end{animation:none}}
.koda .pet[data-vibe=full] .all{animation:none}
.koda .pet[data-vibe]{transform-origin:50% 92%}
body.koda-picking,body.koda-picking *{cursor:crosshair !important}
.koda .taghead{display:flex;align-items:center;gap:8px}
.koda .kbwrap{display:inline-flex}
.koda .kb{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--k-line);background:#ffffff0d;color:var(--k-cyan);display:grid;place-items:center;cursor:help}
.koda .kb:hover,.koda .kb[aria-expanded=true]{background:#2ff3d625;border-color:var(--k-cyan)}
.koda .kb-pop{position:absolute;left:12px;right:12px;top:44px;z-index:7;padding:8px 10px;border-radius:10px;background:#0b0e24;border:1px solid var(--k-cyan);box-shadow:0 8px 22px #000a;font-size:12px;line-height:1.4;color:#cfd6ff;display:flex;flex-direction:column;gap:6px}
.koda .kb-pop[hidden]{display:none}
.koda .kb-pop a{color:var(--k-cyan);text-decoration:none;font-weight:600}.koda .kb-pop a:hover{text-decoration:underline}
.koda .pet .lens{opacity:0;pointer-events:none}
.koda .pet[data-emo=scan] .lens{opacity:1;filter:drop-shadow(0 0 5px #7df9ff)}
.koda .pet[data-emo=scan] .lensbody{animation:koda-lens 2.6s ease-in-out infinite}
.koda .pet[data-emo=scan] .e-open .pupil{animation:koda-scan 1.3s ease-in-out infinite}
.koda .pet[data-emo=scan] .all{animation:koda-tilt 2.2s ease-in-out infinite}
@keyframes koda-lens{0%,100%{transform:translate(48px,140px) scale(1.55) rotate(-8deg)}25%{transform:translate(108px,112px) scale(1.55) rotate(6deg)}50%{transform:translate(170px,128px) scale(1.55) rotate(-4deg)}75%{transform:translate(120px,150px) scale(1.55) rotate(8deg)}}
@keyframes koda-scan{0%,100%{transform:translate(-3.2px,0)}50%{transform:translate(3.2px,0)}}
@media (prefers-reduced-motion:reduce){.koda .pet[data-emo=scan] .lensbody,.koda .pet[data-emo=scan] .e-open .pupil{animation:none}}
.koda .kb{min-width:0;flex:none;box-sizing:border-box;line-height:0}
.koda .bub.k-thought .tdetail{display:block;margin-top:5px;max-width:390px;font-size:11.5px;line-height:1.35;color:#9aa3d6;font-style:italic;white-space:normal;animation:koda-ghost-in .3s ease both}
.koda .bub.k-thought .tdetail[hidden]{display:none}
.koda .chg li{display:flex;align-items:flex-start;gap:8px;transition:opacity .2s}
.koda .chg li .what{flex:1;min-width:0;overflow-wrap:anywhere}
.koda .chg li.off{opacity:.45}.koda .chg li.off .what{text-decoration:line-through}
.koda .opt{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;border:1px solid var(--k-gold);color:var(--k-gold);font:600 10.5px/16px system-ui;font-style:normal;letter-spacing:.04em;text-transform:uppercase;cursor:help;vertical-align:1px}
.koda .optnote{margin:4px 0 0;font-size:11.5px}
.koda .sw2{position:relative;flex:none;width:34px;height:20px;margin-top:1px;cursor:pointer}
.koda .sw2 input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.koda .sw2 .track{position:absolute;inset:0;border-radius:11px;background:#ffffff1f;border:1px solid #ffffff33;transition:background .2s,border-color .2s,box-shadow .2s}
.koda .sw2 .track i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#cfd6ff;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s}
.koda .sw2 input:checked+.track{background:#2de2ff33;border-color:var(--k-cyan);box-shadow:0 0 8px #2de2ff55}
.koda .sw2 input:checked+.track i{transform:translateX(14px);background:var(--k-cyan)}
.koda .sw2 input:focus-visible+.track{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.koda .sw2 .track,.koda .sw2 .track i{transition:none}}
.koda .pethost{position:relative}
.koda .pethost>svg{position:relative;z-index:1}
.koda .aura{position:absolute;left:-14%;right:-14%;top:-10%;bottom:-4%;pointer-events:none;z-index:0;opacity:0;--lvl:0;--pulse:0}
.koda .aura .glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 62%,#2de2ffb0,#ff4fd860 46%,transparent 72%);opacity:calc(.3 + var(--lvl) * .7);transform:scale(calc(.9 + var(--pulse) * .12 + var(--lvl) * .1));filter:blur(9px)}
.koda .aura .eq{position:absolute;left:12%;right:12%;bottom:5%;height:36%;display:flex;align-items:flex-end;gap:3px}
.koda .aura .eq i{flex:1;height:100%;border-radius:3px 3px 1px 1px;background:linear-gradient(to top,#2de2ff,#ff4fd8);box-shadow:0 0 7px #2de2ff,0 0 15px #ff4fd866;transform-origin:50% 100%;transform:scaleY(.08)}
.koda .pet[data-vibe=full] .note2{opacity:1;transform:none}
.koda .pet[data-vibe=full] .beam{stroke-dashoffset:0}
.koda .pet[data-vibe=full] .walkers{opacity:1}
.koda .pet[data-vibe=full] .h1{animation:koda-hop 1.2s cubic-bezier(.3,1.4,.5,1) infinite}
.koda .pet[data-vibe=full] .h2{animation:koda-hop 1.2s cubic-bezier(.3,1.4,.5,1) .6s infinite}
@media (prefers-reduced-motion:reduce){.koda .aura{display:none}}
.koda .aura{--lean:0}
.koda .aura .glow{transform:translateX(calc(var(--lean) * 3%)) scale(calc(.9 + var(--pulse) * .18 + var(--lvl) * .12));filter:blur(9px) hue-rotate(calc(var(--lean) * 28deg));opacity:calc(.28 + var(--lvl) * .55 + var(--pulse) * .3)}
.koda .aura .ring{position:absolute;left:8%;right:8%;top:6%;bottom:12%;border-radius:50%;border:2px solid #7df9ff;box-shadow:0 0 14px #2de2ff,inset 0 0 14px #ff4fd855;opacity:0}
.koda .pet[data-vibe=out] .note2{opacity:1;transform:none}
.koda .pet[data-vibe=out] .beam{stroke-dashoffset:0}
.koda .pet[data-vibe=out] .walkers{opacity:1}
.koda .bub.k-thought .twork{margin:9px 0 0;padding:0;border:0;max-width:400px;font-size:11.5px;line-height:1.4;color:#8d96cc}
.koda .bub.k-thought .twork summary{display:flex;align-items:flex-start;gap:8px;padding:0;margin:0;border:0;list-style:none;cursor:pointer;color:#8d96cc;font-style:normal;font-weight:400}
.koda .bub.k-thought .twork summary::-webkit-details-marker{display:none}
.koda .bub.k-thought .twork .wk{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.koda .bub.k-thought .twork .chev{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ffffff12;color:var(--k-cyan);font:400 11px/1 system-ui;transition:transform .2s}
.koda .bub.k-thought .twork summary:hover .chev{background:#2de2ff25}
.koda .bub.k-thought .twork[open] .chev{transform:rotate(180deg)}
.koda .bub.k-thought .twork[open] .wk{-webkit-line-clamp:unset;display:block}
.koda .bub.k-thought .twork p{margin:7px 0 0;padding:7px 10px;border-radius:10px;background:#0b0e2699;border:1px solid #ffffff14;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.45 ui-monospace,Consolas,monospace;font-style:normal;color:#b9c0ee;max-height:150px;overflow:auto}
.koda .bub.k-thought p.twork.flat{margin:9px 0 0;padding:0;max-width:268px;font-size:11.5px;line-height:1.4;color:#8d96cc}
.koda button.opt{appearance:none;background:transparent;margin-top:0}
.koda .opt-pop{position:absolute;left:12px;right:12px;z-index:8;padding:8px 10px;border-radius:10px;background:#0b0e24;border:1px solid var(--k-gold);box-shadow:0 8px 22px #000a;font:400 12px/1.4 system-ui;letter-spacing:0;text-transform:none;font-style:normal;color:#cfd6ff;white-space:normal}
.koda .opt-pop[hidden]{display:none}
.koda .chk{margin:5px 0 0;font-size:11.5px;color:#7ff0b4;display:flex;gap:6px;align-items:baseline}.koda .chk b{font-weight:700}

/* a patch of several changes: grouped per block, pages when there are many */
.koda .bub.k-draft .sum{margin:0 0 8px;color:#8d96cc;font-size:12.5px}
.koda .chgs .grp{border:1px solid #ffffff1c;border-radius:14px;margin:8px 0;overflow:hidden;background:#ffffff06;transition:border-color .15s}
.koda .tctl{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.koda .tctl .trow{display:flex;gap:8px;justify-content:flex-end}
.koda .koda-building{display:flex;align-items:center;gap:10px;margin:8px 0;padding:7px 10px;border:1px solid #2de2ff55;border-radius:12px;background:#2de2ff12;font-size:13px}
.koda .koda-building .spin{width:14px;height:14px;border:2px solid #2de2ff55;border-top-color:#2de2ff;border-radius:50%;animation:koda-spin .8s linear infinite}
.koda .koda-building button{margin-left:auto}
.koda .deciding{opacity:.6}
@keyframes koda-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.koda .koda-building .spin{animation-duration:3s}}
.koda .chgs .grp:hover{border-color:#2de2ff}
.koda .chgs .gh{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#ffffff0a}
.koda .chgs .gh .t{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.koda .chgs .gh .kind,.koda .chgs .card .kind{font-size:11px;color:#8d96cc;text-transform:uppercase;letter-spacing:.05em}
.koda .chgs .dot{width:9px;height:9px;border-radius:50%;flex:none;background:#2de2ff;box-shadow:0 0 8px currentColor;color:#2de2ff}
.koda .chgs .new .dot,.koda .chgs .pd.new{background:#7ff0b4;color:#7ff0b4}
.koda .chgs .gone .dot,.koda .chgs .pd.gone{background:#ff7a90;color:#ff7a90}
.koda .chgs .grp ul.chg{margin:0;padding:2px 6px 4px}
.koda .chgs .pager{margin-top:6px}
.koda .chgs .viewport{overflow:hidden;border-radius:14px;touch-action:pan-y;outline-offset:2px}
.koda .chgs .track{display:flex;transition:transform .28s cubic-bezier(.3,1,.4,1)}
.koda .chgs .pg{flex:none;width:100%;padding:0 1px;min-width:0}
.koda .chgs .pg.overview{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.koda .chgs .card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:9px 10px;border-radius:12px;border:1px solid #ffffff1c;background:#ffffff08;color:inherit;font:inherit;cursor:pointer}
.koda .chgs .card:hover{border-color:#2de2ff;background:#2de2ff12}
.koda .chgs .card .t{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.koda .chgs .pbar{display:flex;align-items:center;gap:6px;margin-top:6px}
.koda .chgs .pbar .mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.koda .chgs .count{font-size:11.5px;color:#8d96cc;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.koda .chgs .dots2{display:flex;gap:5px}
.koda .chgs .pd{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:#2de2ff66;cursor:pointer}
.koda .chgs .pd.overview{background:#ffffff55}
.koda .chgs .pd[aria-selected=true]{transform:scale(1.5);box-shadow:0 0 8px currentColor}
.koda .chgs .arr{width:32px;height:32px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0d;color:#2de2ff;font:700 18px/1 system-ui;cursor:pointer;padding:0}
.koda .chgs .arr:hover:not(:disabled){background:#2de2ff25}
.koda .chgs .arr:disabled{opacity:.3;cursor:default}
/* the neon button: its own look on purpose, nothing of the theme (fixed colours: dark, the colours of the logo, its teal note) */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.koda button.letsgo{--a:0deg;--spin:5s;position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:10px 18px 10px 11px;border-radius:18px;cursor:pointer;color:#fff;font:inherit;border:2px solid transparent;background:linear-gradient(#0a0d26,#0a0d26) padding-box,conic-gradient(from var(--a),#2de2ff,#19e3c8,#ff4fd8,#ffffff,#2de2ff) border-box;box-shadow:0 0 14px #ff4fd855,0 0 34px #2de2ff33,inset 0 0 18px #ff4fd822;animation:k-spin var(--spin) linear infinite,k-breathe 2.4s ease-in-out infinite,k-sway 3.2s ease-in-out infinite;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
@keyframes k-spin{to{--a:360deg}}
@keyframes k-breathe{50%{box-shadow:0 0 22px #ff4fd88a,0 0 54px #2de2ff55,inset 0 0 24px #ff4fd833}}
@keyframes k-sway{0%,100%{rotate:-2.5deg;scale:1}25%,75%{scale:1.05}50%{rotate:2.5deg;scale:1}}
@keyframes k-swayh{0%,100%{rotate:-5deg;scale:1.02}25%,75%{scale:1.15}50%{rotate:5deg;scale:1.02}}
.koda button.letsgo .n{width:34px;height:34px;border-radius:50%;background:#070a1c;color:#19e3c8;font-size:23px;display:grid;place-items:center;text-shadow:0 0 6px #19e3c8,0 0 14px #19e3c8aa;border:2px solid #19e3c8;box-shadow:0 0 14px #19e3c8aa,inset 0 0 10px #19e3c855;animation:k-bob 1.2s ease-in-out infinite;transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes k-bob{50%{transform:translateY(-2px) rotate(-8deg)}}
.koda button.letsgo .l{font:800 16px/1.1 system-ui;text-align:left;text-shadow:0 0 8px #2de2ff,0 0 18px #2de2ff88}
.koda button.letsgo .l small{display:block;font:600 10.5px system-ui;margin-top:3px;letter-spacing:.04em;color:#bfc8ff;text-shadow:none}
.koda button.letsgo .eq{display:flex;gap:3px;align-items:flex-end;height:22px;margin-left:4px}
.koda button.letsgo .eq i{width:4px;height:6px;border-radius:2px;background:linear-gradient(#2de2ff,#ff4fd8);box-shadow:0 0 8px #2de2ff}
.koda button.letsgo .sh{position:absolute;top:0;bottom:0;width:46px;left:-60px;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);border-radius:16px;transition:left .6s;pointer-events:none}
.koda button.letsgo .pt{position:absolute;bottom:80%;left:var(--x);font-size:15px;color:#19e3c8;text-shadow:0 0 8px #19e3c8;opacity:0;pointer-events:none}
.koda button.letsgo:hover,.koda button.letsgo:focus-visible{--spin:1.4s;transform:translateY(-3px);box-shadow:0 0 26px #ff4fd8cc,0 0 70px #2de2ff88,0 0 120px #19e3c855,inset 0 0 26px #ff4fd844;animation:k-spin var(--spin) linear infinite}
.koda button.letsgo:hover .n,.koda button.letsgo:focus-visible .n{transform:rotate(-18deg) scale(1.22);animation:none}
.koda button.letsgo:hover .sh{left:120%}
.koda button.letsgo:hover .eq i{animation:k-eq .5s ease-in-out infinite alternate}
.koda button.letsgo .eq i:nth-child(2){animation-delay:.1s!important}.koda button.letsgo .eq i:nth-child(3){animation-delay:.2s!important}.koda button.letsgo .eq i:nth-child(4){animation-delay:.05s!important}.koda button.letsgo .eq i:nth-child(5){animation-delay:.15s!important}
@keyframes k-eq{from{height:5px}to{height:22px}}
.koda button.letsgo:hover .pt{animation:k-fly 1.1s ease-out var(--d) infinite}
@keyframes k-fly{0%{opacity:0;transform:translateY(14px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-34px) rotate(24deg) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.koda button.letsgo,.koda button.letsgo *{animation:none!important}}
/* the blocks of a patch on the canvas: what changes is lit, the rest steps back */
body.koda-patch .node:not(.koda-pm){opacity:.45;filter:saturate(.6)}
.node.koda-pm{box-shadow:0 0 0 1px #2de2ff,0 0 22px #2de2ff55!important}
.node.koda-pm-gone{box-shadow:0 0 0 1px #ff7a90,0 0 22px #ff7a9055!important}
.koda .taghead{margin-bottom:6px}
.koda .taghead .tag{margin-bottom:0;line-height:20px;padding-top:0;padding-bottom:0}
.koda .taghead .kb{width:22px;height:22px}
.koda button.letsgo .sh{inset:0;width:auto;left:0;overflow:hidden;background:none;transform:none;border-radius:16px}
.koda button.letsgo .sh::after{content:"";position:absolute;top:0;bottom:0;width:46px;left:-70px;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);transition:left .6s}
.koda button.letsgo:hover .sh{left:0}
.koda button.letsgo:hover .sh::after{left:120%}
.koda .bub.k-draft .row:has(.letsgo){margin-top:16px}
.koda .taghead .kb{display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box}
.koda .kb svg{display:block;margin:0;flex:none}
/* variants of a block: tabs A, B, C with what each changes and a listen button (also for the original) */
.koda .vars .vtabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.koda .vars .vt{flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:30px;border-radius:10px;border:1px solid #ffffff22;background:#ffffff0d;color:inherit;font:700 14px system-ui;cursor:pointer;padding:0 10px}
.koda .vars .vt[aria-selected=true]{border-color:#2de2ff;background:#2de2ff22;box-shadow:0 0 10px #2de2ff55}
.koda .vars .vbody p{margin:0 0 6px}
.koda .vars .vplay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.koda .vars .vlisten{border-radius:12px;border:1px solid #19e3c8;background:#19e3c81a;color:inherit;padding:6px 12px;font:inherit;cursor:pointer}
.koda .vars .vlisten.orig{border-color:#ffffff33;background:#ffffff0d}
.koda .vans{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#ffffff0d;border-left:3px solid #19e3c8}
.koda .vars ~ .row,.koda .vars ~ .other{margin-top:8px}

/* constructing: a real build has a hard hat and three variations (hammer with bricks and a cone, a saw with dust, a crane with a swinging brick), a preview build a hard hat and three too (blueprint with a pencil and a spirit level, a tape measure, a compass); they change as the build makes progress */
.koda .pet .cons{opacity:0;pointer-events:none;transition:opacity .25s}
.koda .pet[data-emo=build] .cons,.koda .pet[data-emo=sketch] .cons{opacity:1}
.koda .pet[data-emo=build] .cons .prev,.koda .pet[data-emo=sketch] .cons .real{display:none}
.koda .pet .cons .v{opacity:0;transition:opacity .35s}
.koda .pet:not([data-cv]) .cons .v0,.koda .pet[data-cv="0"] .cons .v0,.koda .pet[data-cv="1"] .cons .v1,.koda .pet[data-cv="2"] .cons .v2{opacity:1}
.koda .pet[data-emo=build] .hammer{transform-origin:150px 178px;animation:k-hammer .7s cubic-bezier(.5,0,.8,.4) infinite}
.koda .pet[data-emo=build] .spk{transform-origin:162px 150px;animation:k-spark .7s steps(1) infinite}
.koda .pet[data-emo=build] .brick{transform-box:fill-box;transform-origin:center bottom;animation:k-brick 2.4s ease-out infinite}
.koda .pet[data-emo=build] .brick:nth-child(2){animation-delay:.6s}.koda .pet[data-emo=build] .brick:nth-child(3){animation-delay:1.2s}
.koda .pet[data-emo=build] .cone{transform-box:fill-box;transform-origin:center bottom;animation:k-cone 1.6s ease-in-out infinite}
.koda .pet[data-emo=build] .saw{animation:k-saw .45s ease-in-out infinite alternate}
.koda .pet[data-emo=build] .dust circle{animation:k-dust .9s ease-in infinite}
.koda .pet[data-emo=build] .dust circle:nth-child(2){animation-delay:.25s}.koda .pet[data-emo=build] .dust circle:nth-child(3){animation-delay:.5s}
.koda .pet[data-emo=build] .rope{transform-origin:200px 117px;animation:k-rope 2.2s ease-in-out infinite}
.koda .pet[data-emo=build]:not([data-cv]) .all,.koda .pet[data-emo=build][data-cv="0"] .all{animation:k-hit .7s ease-in-out infinite}
.koda .pet[data-emo=build][data-cv="1"] .all{animation:k-hit .45s ease-in-out infinite}
.koda .pet[data-emo=build][data-cv="2"] .all{animation:koda-tilt 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .plan{transform-box:fill-box;transform-origin:center;animation:k-plan 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .draw{stroke-dasharray:60;animation:k-draw 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .pencil{animation:k-pencil 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .lvb{animation:k-level 2.2s ease-in-out infinite}
.koda .pet[data-emo=sketch] .tape{transform-origin:158px 186px;animation:k-tape 2.4s ease-in-out infinite}
.koda .pet[data-emo=sketch] .legs{transform-origin:150px 190px;animation:k-legs 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .arc{stroke-dasharray:140;animation:k-arc 2.6s ease-in-out infinite}
.koda .pet[data-emo=sketch] .all{animation:koda-tilt 2.2s ease-in-out infinite}
@keyframes k-hammer{0%{transform:rotate(-70deg)}55%{transform:rotate(12deg)}62%,100%{transform:rotate(-70deg)}}
@keyframes k-spark{0%,54%{opacity:0}55%,70%{opacity:1}71%,100%{opacity:0}}
@keyframes k-hit{0%,100%{transform:translateY(0)}56%{transform:translateY(2.5px)}}
@keyframes k-brick{0%{transform:translateY(-26px);opacity:0}18%{transform:translateY(0);opacity:1}30%{transform:scaleY(.8)}38%,86%{transform:scaleY(1);opacity:1}100%{opacity:0}}
@keyframes k-cone{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes k-saw{from{transform:translateX(-8px)}to{transform:translateX(14px)}}
@keyframes k-dust{0%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes k-rope{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes k-plan{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-3px)}}
@keyframes k-draw{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}
@keyframes k-pencil{0%{transform:translate(138px,162px)}60%{transform:translate(176px,142px)}100%{transform:translate(138px,162px)}}
@keyframes k-level{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes k-tape{0%{transform:scaleX(.15)}60%,100%{transform:scaleX(1)}}
@keyframes k-legs{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(14deg)}}
@keyframes k-arc{0%{stroke-dashoffset:140}60%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.koda .pet[data-emo=build] *,.koda .pet[data-emo=sketch] *{animation:none!important}}

/* unsafe mode: a red headband, sharper eyes and a tighter, more purposeful movement */
.koda .pet .band,.koda .pet .sharp{opacity:0;pointer-events:none;transition:opacity .25s}
.koda .pet[data-risk=unsafe] .band{opacity:1}
.koda .pet[data-risk=unsafe][data-eyes=open] .sharp,.koda .pet[data-risk=unsafe][data-eyes=wide] .sharp{opacity:1}
.koda .pet[data-risk=unsafe][data-eyes=open] .eye,.koda .pet[data-risk=unsafe][data-eyes=wide] .eye{transform-box:fill-box;transform-origin:center;transform:scaleY(.7)}
.koda .pet[data-risk=unsafe] .pupil{transform-box:fill-box;transform-origin:center;transform:scale(.82)}
.koda .pet[data-risk=unsafe] .band .tails{transform-origin:30px 8px;animation:k-tails 1.3s ease-in-out infinite}
.koda .pet[data-risk=unsafe][data-emo=neutral] .all,.koda .pet[data-risk=unsafe][data-emo=think] .all,.koda .pet[data-risk=unsafe][data-emo=talk] .all{animation:k-bob-sharp 1.7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes k-tails{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@keyframes k-bob-sharp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.koda .pet[data-risk=unsafe] .band .tails,.koda .pet[data-risk=unsafe] .all{animation:none}}

/* the draft / live pill in the bubble: blue (draft) or red (live), until the first reply; after that a small dot says which it was */
.koda .riskpill{align-self:flex-start;margin:8px 0 0;display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 3px;border-radius:11px;border:1px solid #5b8cff66;background:#0b0e24cc;color:#9db8ff;font:600 10px/14px system-ui;letter-spacing:.04em;cursor:pointer;opacity:.78;z-index:3;transition:opacity .15s,border-color .2s,color .2s}
.koda .riskpill:hover,.koda .riskpill:focus-visible{opacity:1}
.koda .riskpill i{width:14px;height:14px;border-radius:50%;background:#5b8cff;box-shadow:0 0 6px #5b8cff;transition:background .2s,box-shadow .2s,transform .2s}
.koda .riskpill[aria-checked=true]{border-color:#ff4a5f88;color:#ff9aa6}
.koda .riskpill[aria-checked=true] i{background:#ff4a5f;box-shadow:0 0 6px #ff4a5f;transform:translateX(0)}
.koda .kmodelchip[hidden]{display:none}
.koda .kmodelchip{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10.5px/1.5 system-ui;padding:0 9px;border-radius:999px;border:1px solid var(--k-cyan);background:#08201fdd;color:var(--k-cyan);cursor:pointer}
.koda .riskpill[hidden],.koda .riskdot[hidden]{display:none}
.koda .riskdot{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#5b8cff;box-shadow:0 0 5px #5b8cff;opacity:.7;pointer-events:none}
.koda .riskdot.unsafe{background:#ff4a5f;box-shadow:0 0 5px #ff4a5f}

/* the transformation between draft and live: rings and sparks from the head, the headband ties on, a short flash; own pictures only, so it goes with every other animation */
.koda .pet .xform{opacity:0;pointer-events:none;--xc:#ff4a5f}
.koda .pet[data-xf=off] .xform{--xc:#5b8cff}
.koda .pet .xform circle{fill:none;stroke:var(--xc);stroke-width:4;transform-origin:0 0;opacity:0}
.koda .pet .xform .xs path{stroke:var(--xc);stroke-width:3.5;stroke-linecap:round;fill:none}
.koda .pet .xform .xs{transform-origin:0 0;opacity:0}
.koda .pet[data-xf] .xform{opacity:1}
.koda .pet[data-xf=on] .xr1{animation:k-xring .6s cubic-bezier(.1,.7,.3,1) both}
.koda .pet[data-xf=on] .xr2{animation:k-xring .6s cubic-bezier(.1,.7,.3,1) .14s both;stroke:#ffd166}
.koda .pet[data-xf=on] .xs{animation:k-xspark .65s cubic-bezier(.1,.8,.3,1) both}
.koda .pet[data-xf=off] .xr1{animation:k-xin .55s ease-in both}
.koda .pet[data-xf=off] .xs{animation:k-xspark .5s ease-out both;--xs:.7}
.koda .pet[data-xf=on]{animation:k-xflash .6s ease-out}
.koda .pet[data-xf=on] .band .bi{transform-origin:-31px 8px;animation:k-tie .5s cubic-bezier(.2,1.5,.4,1) .12s both}
.koda .pet .band{transition:opacity .35s}
.koda .pet[data-risk=unsafe] .eye,.koda .pet .eye{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes k-xring{0%{transform:scale(.4);opacity:.95;stroke-width:7}100%{transform:scale(5.2);opacity:0;stroke-width:1}}
@keyframes k-xin{0%{transform:scale(5);opacity:0}70%{opacity:.8}100%{transform:scale(.4);opacity:0}}
@keyframes k-xspark{0%{transform:rotate(0) scale(.4);opacity:1}100%{transform:rotate(45deg) scale(1.7);opacity:0}}
@keyframes k-xflash{0%{filter:brightness(1)}25%{filter:brightness(1.9) drop-shadow(0 0 12px #ff4a5f)}100%{filter:brightness(1)}}
@keyframes k-tie{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.koda .pet[data-xf] *,.koda .pet[data-xf]{animation:none!important}}

/* live: every emotion has its own sharper movement (a fighter's stance, snaps, holds and bows), where draft keeps the soft one; build and sketch keep their own pictures */
.koda .pet[data-risk=unsafe][data-emo=neutral] .all{animation:k-stance 2.4s cubic-bezier(.6,0,.2,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=think] .all{animation:k-focus 2.6s ease-in-out infinite}
.koda .pet[data-risk=unsafe][data-emo=talk] .all{animation:k-chop .5s steps(2,end) infinite alternate}
.koda .pet[data-risk=unsafe][data-emo=happy] .all{animation:k-kiai 1.3s cubic-bezier(.2,.9,.3,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=excited] .all{animation:k-jab .6s cubic-bezier(.2,.9,.3,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=love] .all{animation:k-bow 3s cubic-bezier(.5,0,.3,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=surprised] .all{animation:k-flinch 1.8s cubic-bezier(.2,1.2,.4,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=confused] .all,.koda .pet[data-risk=unsafe][data-emo=asking] .all,.koda .pet[data-risk=unsafe][data-emo=scan] .all{animation:k-turn 1.4s steps(1,end) infinite}
.koda .pet[data-risk=unsafe][data-emo=sad] .all{animation:k-kneel 3.2s cubic-bezier(.5,0,.3,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=sleepy] .all{animation:k-breathe 4s ease-in-out infinite}
.koda .pet[data-risk=unsafe][data-emo=angry] .all{animation:k-stomp .36s cubic-bezier(.5,0,.5,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=shy] .all{animation:k-bowdown 2.4s cubic-bezier(.5,0,.3,1) infinite}
.koda .pet[data-risk=unsafe][data-emo=jump] .all{animation:k-spin .95s cubic-bezier(.3,.9,.4,1) 2}
@keyframes k-stance{0%,100%{transform:translateY(0) scale(1.02,.98)}30%{transform:translateY(3px) scale(1.06,.93)}45%,70%{transform:translateY(3px) scale(1.06,.93)}80%{transform:translateY(-5px) scale(.97,1.04)}}
@keyframes k-focus{0%,100%{transform:rotate(-1.5deg) scale(1.02,.98)}50%{transform:rotate(1.5deg) translateY(-2px) scale(1,1)}}
@keyframes k-chop{0%{transform:translateX(-2px) rotate(-1.5deg)}100%{transform:translateX(2px) rotate(1.5deg) translateY(-2px)}}
@keyframes k-kiai{0%,100%{transform:scale(1.1,.88)}14%{transform:scale(1.12,.86) translateY(4px)}34%{transform:translateY(-30px) scale(.92,1.12)}52%{transform:translateY(0) scale(1.1,.88)}64%{transform:scale(1)}}
@keyframes k-jab{0%,100%{transform:translateX(-4px) rotate(-3deg) scale(1.04,.96)}30%{transform:translateX(14px) rotate(5deg) scale(.96,1.04)}45%{transform:translateX(10px) rotate(3deg)}}
@keyframes k-bow{0%,100%{transform:rotate(0)}30%,60%{transform:rotate(13deg) translateY(4px)}80%{transform:rotate(-2deg)}}
@keyframes k-flinch{0%,100%{transform:rotate(0)}6%{transform:translate(-12px,-10px) rotate(-13deg) scale(.95,1.08)}30%,50%{transform:translate(-6px,0) rotate(-6deg)}70%{transform:rotate(0)}}
@keyframes k-turn{0%{transform:rotate(-6deg)}33%{transform:rotate(5deg) translateX(4px)}66%{transform:rotate(-2deg) translateY(-4px)}}
@keyframes k-kneel{0%,100%{transform:translateY(2px) scale(1.03,.95)}35%,70%{transform:translateY(12px) scale(1.08,.86)}}
@keyframes k-breathe{0%,100%{transform:scale(1.02,.98)}50%{transform:scale(.99,1.025) translateY(-3px)}}
@keyframes k-stomp{0%,100%{transform:translateY(0) rotate(-1deg)}40%{transform:translateY(5px) scale(1.05,.92) rotate(1deg)}}
@keyframes k-bowdown{0%,100%{transform:rotate(0)}25%,55%{transform:rotate(9deg) translate(2px,6px)}80%{transform:rotate(0)}}
@keyframes k-spin{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-44px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}

/* the draft / live toggle: small and quiet, in the top corner of the bubble next to the cross */
.koda .bub button.riskpill:not(.x){position:absolute;top:11px;right:34px;margin:0;align-self:auto;gap:5px;padding:0 4px;height:16px;border:0;border-radius:8px;background:transparent;font:600 9.5px/16px system-ui;letter-spacing:.05em;color:#7f8fc7;opacity:.7}
.koda .bub button.riskpill:not(.x):hover,.koda .bub button.riskpill:not(.x):focus-visible{opacity:1;background:#ffffff10;border:0}
.koda .bub button.riskpill:not(.x) i{width:7px;height:7px;box-shadow:0 0 4px #5b8cff}
.koda .bub button.riskpill[aria-checked=true]:not(.x){color:#ff8f9c}
.koda .bub button.riskpill[aria-checked=true]:not(.x) i{box-shadow:0 0 4px #ff4a5f}

/* the note at the edge can be dragged: along the edge to move it, away from it to bring Koda out */
.koda.koda-layer .koda-tab{touch-action:none;cursor:grab;transition:box-shadow .15s,scale .15s}.koda.koda-layer .koda-tab:active{cursor:grabbing}
.koda.koda-layer .koda-tab.pulled{scale:1.25;box-shadow:0 0 0 3px #2de2ff55,0 0 18px #2de2ff99}
.koda.koda-layer .float svg:focus,.koda.koda-layer .float svg:focus-visible{outline:none;box-shadow:none}.koda.koda-layer .float svg:focus-visible{filter:drop-shadow(0 0 6px var(--k-cyan))}

.koda.koda-layer .bub .scroll{max-height:var(--bmax,min(46vh,420px));overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;overscroll-behavior:contain;padding-right:2px}
.koda.koda-layer .bub .grip{position:absolute;bottom:4px;right:4px;width:16px;height:16px;cursor:nwse-resize;opacity:.5;background:linear-gradient(135deg,transparent 0 46%,currentColor 46% 54%,transparent 54% 66%,currentColor 66% 74%,transparent 74%);border-bottom-right-radius:6px}
.koda.koda-layer .bub.grip-left .grip{right:auto;left:4px;cursor:nesw-resize;transform:scaleX(-1)}
.koda.koda-layer .bub .grip:hover,.koda.koda-layer .bub .grip:active{opacity:1}
.koda.koda-layer .bub .tbl{overflow-x:auto;margin:0 0 6px;max-width:100%}   /* sideways only when a table cannot do otherwise */
.koda.koda-layer .bub .tbl table{border-collapse:collapse;font-size:12px;width:100%}
.koda.koda-layer .bub .tbl th,.koda.koda-layer .bub .tbl td{border:1px solid #ffffff22;padding:3px 7px;text-align:left;vertical-align:top}
.koda.koda-layer .bub .tbl th{background:#ffffff12;font-weight:600;white-space:nowrap}
.koda.koda-layer .bub.k-answer{padding-right:12px}   /* the answer uses the whole width (the cross sits in the row of the tag) */
.koda.koda-layer .bub.k-answer .taghead{padding-right:26px}
.koda.koda-layer .bub .scroll h4{margin:10px 0 3px;font-size:13px;color:var(--k-cyan)}
.koda.koda-layer .bub .scroll ul,.koda.koda-layer .bub .scroll ol{margin:0 0 6px;padding-left:18px}
.koda.koda-layer .bub .scroll li{margin:0 0 4px}
.koda.koda-layer .bub summary:focus,.koda.koda-layer .bub summary:focus-visible{outline:none;box-shadow:none}
.koda.koda-layer .bub summary:focus-visible{color:var(--k-cyan)}
.koda.koda-layer .bub button:focus,.koda.koda-layer .bub button:focus-visible{outline:none;box-shadow:none}
.koda.koda-layer .bub button:not(.x):focus-visible{border-color:var(--k-cyan)}

/* the details of a proposal: a near fullscreen sheet with the explanation and the change, and Apply now */
.koda-details{position:fixed;inset:4vh 4vw;z-index:95;display:flex;flex-direction:column;border-radius:14px;background:#0b0e24;border:1px solid var(--k-cyan,#4fd);box-shadow:0 18px 60px #000c;color:#dfe5ff;font:14px/1.5 system-ui}
.koda-details .kd-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #ffffff22}
.koda-details .kd-fill{flex:1}
.koda-details .kd-body{flex:1;overflow:auto;padding:12px 18px}
.koda-details h4{margin:14px 0 4px;color:#7fe8ff}
.koda-details pre{white-space:pre-wrap;word-break:break-word;font:12px/1.45 ui-monospace,Consolas,monospace;background:#05071a;border-radius:8px;padding:10px}
.koda-details table{border-collapse:collapse}.koda-details th,.koda-details td{border:1px solid #ffffff22;padding:3px 8px}
.koda-details button{padding:6px 14px;border-radius:8px;border:1px solid #ffffff44;background:#1a1f45;color:#fff;cursor:pointer}
.koda-details button.go{background:#12b5a0;border-color:#12b5a0;color:#031}
.koda.koda-layer .bub.k-answer,.koda.koda-layer .bub.k-draft{font-size:14px;line-height:1.5}   /* the answer is long text: bigger */
.koda.koda-layer .bub.k-answer :is(p,li,span,h4){font-size:inherit}.koda.koda-layer .bub.k-answer code{font-size:.92em}
.koda.koda-layer .bub.k-answer details,.koda.koda-layer .bub.k-draft details{font-size:inherit}   /* the unfolded More is as big as the answer */
/* a maximized AMPLE Jam window (z-index 1001) must not hide Koda or the neon lines */
body:has(dialog.mls-panel[data-window="max"]) .koda-layer{z-index:1100}
body:has(dialog.mls-panel[data-window="max"]) .koda-gaze{z-index:1099}
/* Let's go: a gentle, excited wiggle on hover; the border does not spin and nothing flies around */
@keyframes k-wiggle{0%,100%{rotate:0deg;scale:1}20%{rotate:-1.6deg;scale:1.03}40%{rotate:1.6deg;scale:1.03}60%{rotate:-1deg;scale:1.02}80%{rotate:1deg;scale:1.02}}
.koda button.letsgo:hover,.koda button.letsgo:focus-visible{animation:k-wiggle .9s ease-in-out infinite;--spin:5s}
.koda button.letsgo:hover .pt{animation:none;opacity:0}

/* muted: tape over the mouth; one press makes Koda ask whether it may come off (the corner lifts), the second peels it off */
.koda.koda-layer .mouthtape{display:none}
.koda.koda-layer svg[data-muted="1"] .mouthtape{display:block}
.koda.koda-layer .tapeflap{transform-box:view-box;transform-origin:70px 185px}
.koda.koda-layer svg.tape-ask .tapeflap{animation:k-tape-ask .9s ease-in-out infinite}
.koda.koda-layer svg.tape-peel .tapeflap{animation:k-tape-peel .7s ease-in forwards}
@keyframes k-tape-ask{0%,100%{transform:rotate(0)}40%{transform:rotate(-14deg) translateY(-2px)}60%{transform:rotate(-10deg) translateY(-1px)}}
@keyframes k-tape-peel{0%{transform:rotate(-14deg)}35%{transform:rotate(-38deg) translate(-2px,-4px);opacity:1}100%{transform:rotate(-70deg) translate(-14px,-22px);opacity:0}}
@media (prefers-reduced-motion:reduce){.koda.koda-layer svg.tape-ask .tapeflap{animation:none;transform:rotate(-12deg)}.koda.koda-layer svg.tape-peel .tapeflap{animation:none;opacity:0}}

/* the thinking bubble is wider by default: what Koda works on reads on two lines, not five */
.koda.koda-layer .bub.k-thought{--bw:450px}

/* Let's go: the pointer stays on the button when it lifts and wiggles (its hit area reaches a few pixels past the edge), and a press answers at once while the draft is being kept */
.koda button.letsgo::before{content:"";position:absolute;inset:-6px;border-radius:24px}
.koda button.letsgo.busy{pointer-events:none;animation:none;transform:none;filter:saturate(.8) brightness(.9)}
.koda button.letsgo.busy .eq i{animation:k-eq .35s ease-in-out infinite alternate}