/* Isolated companion: no global element or form rules. */
.tk-pet{--pet-size:144px;--pet-lift:18px;position:fixed;right:max(10px,env(safe-area-inset-right));bottom:calc(var(--pet-lift) + env(safe-area-inset-bottom));width:var(--pet-size);height:var(--pet-size);z-index:95;pointer-events:none;font-family:var(--font-body,Onest,sans-serif);color:#111}
.tk-pet[hidden],.tk-pet [hidden]{display:none!important}
.tk-pet.is-obstructed{visibility:hidden;pointer-events:none}
.tk-pet-character{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tk-pet-character:focus-visible{outline:3px dashed #7890c0;outline-offset:-6px}
.tk-pet-motion,.tk-pet-sprite{display:block;width:100%;height:100%}
.tk-pet-motion{animation:tk-pet-idle 3.6s steps(3,end) infinite;transform-origin:50% 94%}
.tk-pet-sprite{background-image:url('/10-klass/evgeniy-pixel-sheet.png');background-repeat:no-repeat;background-size:300% 200%;background-position:0 0;image-rendering:pixelated;transform:scaleX(var(--pet-facing,1))}
.tk-pet[data-frame="1"] .tk-pet-sprite{background-position:50% 0}
.tk-pet[data-frame="2"] .tk-pet-sprite{background-position:100% 0}
.tk-pet[data-frame="3"] .tk-pet-sprite{background-position:0 100%}
.tk-pet[data-frame="4"] .tk-pet-sprite{background-position:50% 100%}
.tk-pet[data-frame="5"] .tk-pet-sprite{background-position:100% 100%}
.tk-pet[data-state="wave"] .tk-pet-motion{animation:tk-pet-wave .7s steps(3,end) 3}
.tk-pet[data-state="cheer"] .tk-pet-motion{animation:tk-pet-cheer .8s steps(4,end) 2}
.tk-pet-dismiss{position:absolute;right:6px;top:2px;width:30px;height:30px;border:1px solid #e9e9e7;background:#f7f7f5;color:#7c7c7c;font-size:22px;line-height:1;cursor:pointer;pointer-events:auto;z-index:2;opacity:0}
.tk-pet:hover .tk-pet-dismiss,.tk-pet:focus-within .tk-pet-dismiss{opacity:1}
.tk-pet-bubble{position:absolute;right:16px;bottom:calc(var(--pet-size) - 4px);width:248px;max-width:calc(100vw - 36px);pointer-events:auto;padding-bottom:10px}
.tk-pet-bubble.is-beside{right:calc(var(--pet-size) - 12px);bottom:0;padding-bottom:0}
.tk-pet-bubble.is-beside::after{right:-6px;bottom:28px;transform:rotate(-90deg)}
.tk-pet-bubble::after{content:'';position:absolute;right:37px;bottom:3px;width:9px;height:9px;background:#fff;border-right:3px solid #111;border-bottom:3px solid #111;box-shadow:3px 3px 0 #111}
.tk-pet-bubble-inner{position:relative;background:#fff;border:3px solid #111;padding:18px 16px 16px;box-shadow:4px 4px 0 #111;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.tk-pet-name{display:block;margin:0 18px 8px 0;font-size:12px;line-height:1.4;color:#5d74a6;font-weight:800}
.tk-pet-message{margin:0 0 12px;font-size:15px;line-height:1.45;font-weight:500}
.tk-pet-bot{display:block;padding:10px 12px;background:#eaf6c3;border:2px solid #111;font-size:14px;font-weight:800;line-height:1.4;text-decoration:none;text-align:center}
.tk-pet-bot:hover{background:#b4d6fb}
.tk-pet-bubble-close{position:absolute;top:7px;right:7px;width:28px;height:28px;border:0;background:transparent;color:#7c7c7c;font-size:22px;line-height:1;cursor:pointer}
.tk-pet button:focus-visible,.tk-pet a:focus-visible{outline:3px solid #7890c0;outline-offset:2px}
.tk-pet[data-state="cheer"] .tk-pet-name{color:#111}
.tk-pet.is-paused .tk-pet-motion{animation-play-state:paused}
@keyframes tk-pet-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tk-pet-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}}
@keyframes tk-pet-cheer{0%,100%{transform:translateY(0)}35%{transform:translateY(-10px)}65%{transform:translateY(-3px)}}
@media(max-width:760px),(pointer:coarse){
  .tk-pet{--pet-size:92px;--pet-lift:90px;right:4px}
  .tk-pet-dismiss{opacity:1;width:28px;height:28px;top:-6px;right:0}
  .tk-pet-bubble{right:12px;width:230px}
  .tk-pet-bubble-close{width:36px;height:36px;top:3px;right:3px}
  .tk-pet-name{margin-right:26px}
}
/* Lift over the site toast / sticky bar (set from evgeniy-pet.js). */
.tk-pet{transition:transform .2s ease-out}
@media(prefers-reduced-motion:reduce){.tk-pet .tk-pet-motion{animation:none!important;transform:none!important}.tk-pet{transition:none}}
/* Greeting pill above the head (one-off hint to scroll to the content; see data-hello in evgeniy-pet.js). */
.tk-pet-hello{position:absolute;right:6px;bottom:calc(var(--pet-size) + 4px);display:block;padding:9px 12px 8px;background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #111;color:#111;text-decoration:none;text-align:left;white-space:nowrap;pointer-events:auto;line-height:1.25;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.tk-pet-hello b{display:block;font-size:14px;font-weight:800}
.tk-pet-hello span{display:block;margin-top:2px;font-size:13px;font-weight:600}
.tk-pet-hello i{display:inline-block;font-style:normal;font-weight:800;animation:tk-pet-nudge 1.1s ease-in-out infinite}
/* contextual tip (data-tip): narrow, wraps into lines, so it fits the gap right of the demo tasks column */
.tk-pet-hello[data-tip]{box-sizing:border-box;width:150px;white-space:normal}
.tk-pet-hello[data-tip] b{font-size:13.5px;line-height:1.25}
.tk-pet-hello[data-tip] span{font-size:12.5px;line-height:1.3;margin-top:4px}
.tk-pet-hello:hover{background:#eaf6c3}
.tk-pet-hello::after{content:'';position:absolute;right:26px;bottom:-9px;width:9px;height:9px;background:#fff;border-right:3px solid #111;border-bottom:3px solid #111;box-shadow:3px 3px 0 #111}
@keyframes tk-pet-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.tk-pet-hello i{animation:none}}
/* Hover hint on the close button (see data-dismiss-tip in evgeniy-pet.js). Sits left of the × at the top of the character. */
.tk-pet-tip{position:absolute;right:42px;top:2px;padding:7px 11px;background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #111;color:#111;font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;pointer-events:none;z-index:3}
.tk-pet-tip::after{content:'';position:absolute;right:-8px;top:8px;width:9px;height:9px;background:#fff;border-right:3px solid #111;border-top:3px solid #111;transform:rotate(45deg)}
/* Phones and narrow windows: next to the smaller «×»; shown on hover with a mouse, on tap (with «Да») on touch screens */
@media (max-width:760px),(pointer:coarse){
  /* above the smaller companion (not over it), the arrow points down at its «×» */
  .tk-pet-tip{right:0;top:auto;bottom:calc(100% + 12px)}
  .tk-pet-tip::after,.tk-pet-tip.is-confirm::after{right:9px;top:auto;bottom:-8px;border:0;border-right:3px solid #111;border-bottom:3px solid #111;transform:rotate(45deg)}
}
/* Confirmation on touch screens: the line plus a «Да» button that hides the companion */
.tk-pet-tip.is-confirm{display:flex;align-items:center;gap:10px;width:max-content;max-width:212px;padding:7px 7px 7px 11px;
  white-space:normal;pointer-events:auto;line-height:1.25}
/* The question with «Да» (touch) always stands above the companion, on any screen — never over its face */
.tk-pet-tip.is-confirm{right:0;top:auto;bottom:calc(100% + 12px)}
.tk-pet-tip.is-confirm::after{right:9px;top:auto;bottom:-8px;border:0;border-right:3px solid #111;border-bottom:3px solid #111;transform:rotate(45deg)}
.tk-pet-tip-yes{flex:none;min-width:48px;min-height:38px;padding:0 10px;border:2px solid #111;background:#eaf6c3;color:#111;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
.tk-pet-tip-yes:active{background:#b4d6fb}
/* Narrow bubble above the head when the regular and side bubbles would cover a form (width set from evgeniy-pet.js) */
.tk-pet-bubble.is-narrow{right:6px}
.tk-pet-bubble.is-narrow .tk-pet-bubble-inner{padding:14px 11px 12px}
.tk-pet-bubble.is-narrow .tk-pet-name{margin-right:22px}
.tk-pet-bubble.is-narrow .tk-pet-message{font-size:13.5px;line-height:1.4;margin-bottom:10px}
.tk-pet-bubble.is-narrow .tk-pet-bot{padding:8px 9px;font-size:12.5px}
.tk-pet-bubble.is-narrow::after{right:47px}
/* Compact bubble (no name line, tighter padding) — the last try before the companion keeps quiet next to a form */
.tk-pet-bubble.is-compact .tk-pet-name{display:none}
.tk-pet-bubble.is-compact .tk-pet-bubble-inner{padding:12px 34px 11px 13px}
.tk-pet-bubble.is-compact .tk-pet-message{margin-bottom:9px}
.tk-pet-bubble.is-compact .tk-pet-bot{padding-top:8px;padding-bottom:8px}
/* Narrow greeting / tip pill in the strip next to a form (width set from evgeniy-pet.js) */
.tk-pet-hello.is-narrow{box-sizing:border-box;white-space:normal}
.tk-pet-hello.is-narrow b{font-size:13.5px;line-height:1.25}
.tk-pet-hello.is-narrow span{font-size:12.5px;line-height:1.3;margin-top:4px}