:root{
  --kr-content-max: 1240px;
  --octo-col: clamp(64px, 18vw, 150px);
  --octo-edge: max(0px, calc((100vw - var(--kr-content-max)) / 2 - var(--octo-col)));
}
.kr-octopus{ position:fixed; left:var(--octo-edge); top:50%; transform:translateY(-50%);
  width:var(--octo-col); z-index:6; pointer-events:none; display:none; }
.kr-octopus svg{ width:86%; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 6px 18px rgba(var(--kr-masc-ombre-rgb, 11,18,32),.25));
  transform-origin:right center; transition:filter .5s ease; }
.kr-octopus--deep svg{ filter:drop-shadow(0 0 16px color-mix(in srgb, var(--kr-masc-primary, #475569) 60%, transparent)) drop-shadow(0 0 34px color-mix(in srgb, var(--kr-masc-accent, #64748b) 28%, transparent)); }
.kr-octopus .octo-stage{ opacity:0; transition:opacity .45s ease; }
.kr-octopus .octo-stage.on{ opacity:1; }
.kr-octopus .octo-stage--final.on{ opacity:.88; }
.kr-octopus .octo-stage--final.on .octo-brain{ animation:kr-brain-pulse 3.2s ease-in-out infinite; }
@keyframes kr-brain-pulse{
  0%,100%{ filter:drop-shadow(0 0 2px color-mix(in srgb, var(--kr-masc-accent, #64748b) 30%, transparent)); }
  50%{ filter:drop-shadow(0 0 10px color-mix(in srgb, var(--kr-masc-accent, #64748b) 65%, transparent)); }
}
.kr-octo-arms{ position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none;
  display:none; }
.kr-octo-arms path{ fill:var(--kr-masc-primary, #475569); opacity:.07; transform-origin:0 50%; transform:scaleX(0);
  transition:transform .3s linear; }
.js .kr-octopus{ display:block; }
@media (min-width:1024px){
  .js .kr-octo-arms{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .kr-octo-arms{ display:none !important; }
  .kr-octopus .octo-stage{ transition:none; }
  .kr-octopus .octo-brain{ animation:none !important; }
}




.kr-octopus.kr-octopus--perch{ z-index:30; }
.kr-octopus.kr-octopus--perch .octo-stage{ opacity:0 !important; transition:none; }
.kr-octopus.kr-octopus--perch .octo-stage:first-of-type{ opacity:1 !important; }
.kr-octopus.kr-octopus--perch svg{ filter:drop-shadow(0 3px 8px rgba(var(--kr-masc-ombre-rgb, 11,18,32),.22)); }





.kr-zzz{ position:absolute; top:2%; right:-16%; width:72px; height:76px; display:none;
  font-family:var(--kr-masc-mono, ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace); font-weight:800; color:var(--kr-masc-primary, #475569); pointer-events:none;
  text-shadow:0 0 10px rgba(var(--kr-masc-halo-rgb, 255,255,255),.95), 0 0 3px rgba(var(--kr-masc-halo-rgb, 255,255,255),.9),
    0 2px 8px rgba(var(--kr-masc-ombre-rgb, 11,18,32),.35); }
.kr-octopus--sleep .kr-zzz{ display:block; }
.kr-zzz span{ position:absolute; left:0; bottom:0; opacity:0;
  animation:kr-zzz-float 3.6s ease-in-out infinite; }
.kr-zzz span:nth-child(1){ font-size:1.3rem; }
.kr-zzz span:nth-child(2){ font-size:1.9rem; left:18px; animation-delay:1.2s; }
.kr-zzz span:nth-child(3){ font-size:1.55rem; left:38px; animation-delay:2.4s; }
@keyframes kr-zzz-float{
  0%{ transform:translateY(0); opacity:0; }
  22%{ opacity:.92; }
  100%{ transform:translate(12px,-48px); opacity:0; }
}
.kr-octopus--sleep .octo-stage.on{ opacity:.72; }
.kr-octopus--sleep .octo-stage--final.on{ opacity:.6; }
.kr-octopus--sleep .octo-brain{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .kr-zzz span{ animation:none; opacity:.75; }
  .kr-zzz span:nth-child(2){ transform:translateY(-20px); }
  .kr-zzz span:nth-child(3){ transform:translateY(-40px); }
}













.kr-say-wrap{ position:fixed; top:0; left:calc(var(--octo-edge) + var(--octo-col) - 12px);
  z-index:18; pointer-events:none; will-change:transform;
  transition:transform .55s cubic-bezier(.22,.8,.3,1); }
.kr-say{ position:relative; width:min(260px, calc(100vw - var(--octo-col) - 40px));
  padding:.8rem .95rem .85rem; background:var(--kr-masc-bulle-fond, #fff);
  border:1.5px solid color-mix(in srgb, var(--kr-masc-primary, #475569) 65%, transparent); border-radius:18px;
  box-shadow:0 10px 30px rgba(var(--kr-masc-ombre-rgb, 11,18,32),.28), 0 0 18px color-mix(in srgb, var(--kr-masc-primary, #475569) 22%, transparent);
  opacity:0; transform:translateY(8px) scale(.94); transform-origin:16% 65%;
  transition:opacity .35s ease, transform .35s var(--ease,ease); pointer-events:none; }
.kr-say.on{ opacity:1; transform:none; }
.kr-tail{ position:absolute; left:0; top:0; width:100px; height:24px;
  transform-origin:0 50%; will-change:transform;
  opacity:0; transition:opacity .35s ease; }
.kr-say-wrap--on .kr-tail{ opacity:1; }
.kr-tail svg{ display:block; width:100%; height:100%; overflow:visible; }
.kr-tail path{ fill:var(--kr-masc-bulle-fond, #fff); stroke:color-mix(in srgb, var(--kr-masc-primary, #475569) 65%, transparent); stroke-width:1.5;
  stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.kr-say .who{ display:block; font-family:var(--kr-masc-mono, ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace); font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--kr-masc-primary, #475569); margin:0 0 .3rem; }
.kr-say .txt{ margin:0; font-size:.9rem; line-height:1.45; color:var(--kr-masc-ink-text, #0f172a); min-height:2.6em; }



.kr-say .ch{ visibility:hidden; position:relative; }
.kr-say .ch.on{ visibility:visible; }
.kr-say.typing .ch.cur::after{ content:"▍"; position:absolute; left:100%; top:0; color:var(--kr-masc-accent, #64748b); }
.kr-octopus--talk .octo-stage.on .octo-brain{ animation:kr-brain-pulse 1.7s ease-in-out infinite; }
@media (max-width:767.98px){
  .kr-say{ padding:.65rem .8rem .7rem; }
  .kr-say .txt{ font-size:.83rem; min-height:2.4em; }
  .kr-say .who{ font-size:.56rem; }
  

  .kr-splay{ transition:margin-top .45s ease; }
}
@media (prefers-reduced-motion:reduce){
  .kr-say-wrap{ transition:none; }
  .kr-say{ transform:none; transition:opacity .5s ease; }
  .kr-splay{ transition:none; }
}








.kr-say .kw-teal{ color:var(--kr-masc-kw-teal, #475569); font-weight:700; }
.kr-say .kw-rose{ color:var(--kr-masc-kw-rose, #475569); font-weight:700; }
.kr-say .kw-ind{ color:var(--kr-masc-kw-ind, #475569); font-weight:700; }
.kr-say .kw-cyan{ color:var(--kr-masc-kw-cyan, #475569); font-weight:700; }
.kr-say .kw-vio{ color:var(--kr-masc-kw-vio, #475569); font-weight:700; }
.kr-say .kw-b{ font-weight:800; }
.kr-say .kw-mono{ font-family:var(--kr-masc-mono, ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace); font-size:.92em; }
.kr-say .kw-serif{ font-family:Georgia, "Times New Roman", serif; font-style:italic; }
.kr-say .kw-disp{ font-family:"Arial Black", "Avenir Heavy", ui-sans-serif, sans-serif; letter-spacing:.02em; }
.kr-say .kw-sm{ font-size:.85em; }
.kr-say .kw-lg{ font-size:1.16em; }
.kr-say .kw-xl{ font-size:1.3em; }
.kr-say .kw-shake{ display:inline-block; animation:kr-w-shake .45s ease-in-out 3; }
@keyframes kr-w-shake{
  0%,100%{ transform:none; }
  25%{ transform:translate(-1px,.5px) rotate(-2deg); }
  75%{ transform:translate(1px,-.5px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){
  .kr-say .kwd, .kr-say .kw-shake{ animation:none; }
}





.kr-octopus{ transition:transform .5s ease-out; }                
.js .kr-octo-body{ animation:kr-octo-float 5.5s ease-in-out infinite; }
.kr-octo-react{ transform-origin:50% 82%; }                       


.octo-leg{ transform-box:fill-box; transform-origin:50% 0%; animation:kr-leg-wave 3.4s ease-in-out infinite; will-change:transform; }
.octo-leg:nth-child(2){ animation-delay:-.7s;  animation-duration:3.9s; }
.octo-leg:nth-child(3){ animation-delay:-1.4s; animation-duration:3.2s; }
.octo-leg:nth-child(4){ animation-delay:-2.1s; animation-duration:3.7s; }
@keyframes kr-leg-wave{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.kr-octopus--near .octo-leg{ animation-duration:1.2s !important; } 




.octo-leg--live{ animation:none !important; will-change:auto; }
@media (prefers-reduced-motion:reduce){ .octo-leg{ animation:none; } }




.kr-octo-grab{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; display:none; }
.js .kr-octo-grab{ display:block; }
.kr-grab-arm{ fill:var(--kr-masc-primary, #475569); stroke:none; opacity:0; filter:drop-shadow(0 2px 8px color-mix(in srgb, var(--kr-masc-primary, #475569) 40%, transparent)); }
.js .kr-grab-arm{ opacity:.5; }
.kr-grabbed{ animation:kr-grab-wobble .6s ease-in-out; }
@keyframes kr-grab-wobble{ 0%,100%{ transform:none; } 25%{ transform:translateY(-3px) rotate(-1.5deg); } 60%{ transform:translateY(2px) rotate(1.5deg); } }

@media (prefers-reduced-motion:reduce){ .kr-octo-grab{ display:none !important; } }



.kr-octo-draw{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; display:none; }
.js .kr-octo-draw.on{ display:block; }
.kr-draw-arm{ fill:var(--kr-masc-primary, #475569); stroke:none; opacity:0; filter:drop-shadow(0 2px 8px color-mix(in srgb, var(--kr-masc-primary, #475569) 40%, transparent)); }
.kr-draw-ink{ fill:none; stroke:var(--kr-masc-accent, #64748b); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; filter:drop-shadow(0 1px 5px color-mix(in srgb, var(--kr-masc-accent, #64748b) 55%, transparent)); }
.kr-draw-cap{ fill:var(--kr-masc-primary, #475569); font:600 12px/1.2 system-ui,-apple-system,sans-serif; opacity:0; }
@media (prefers-reduced-motion:reduce){ .kr-octo-draw{ display:none !important; } }
@keyframes kr-octo-float{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(4px,-7px); } 50%{ transform:translate(0,-4px); } 75%{ transform:translate(-4px,-8px); } } 
.kr-octopus--sleep .kr-octo-body{ animation-duration:9s; }       
.kr-octopus .octo-pupil{ transition:transform .12s ease-out; }   
@media (prefers-reduced-motion: reduce){ .js .kr-octo-body{ animation:none; } }