#hts-clippy[hidden]{display:none!important}
#hts-clippy{
  --excite:0;--gaze-x:0deg;--gaze-y:0deg;--body-scale:1;--vibration:0;
  --eye-width:34.15%;--eye-gap:12.2%;--eye-left-x:9.76%;--eye-right-x:56.1%;
  --eye-left-y:37.56%;--eye-right-y:37.56%;
  --eye-lx:0px;--eye-ly:0px;--eye-rx:0px;--eye-ry:0px;--eye-lscale:1;--eye-rscale:1;--eye-lrot:0deg;--eye-rrot:0deg;
  --brow-width:30.7%;--brow-left-x:8.9%;--brow-right-x:55.3%;--brow-left-y:22.44%;--brow-right-y:22.44%;
  --brow-lx:0px;--brow-ly:0px;--brow-rx:0px;--brow-ry:0px;--brow-lrot:-28deg;--brow-rrot:28deg;
  position:fixed;z-index:2147482000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 28px));min-height:250px;
  pointer-events:none;background:transparent!important;border:0!important;box-shadow:none!important;color:#29232f;font:14px/1.5 Arial,sans-serif;
  display:flex;align-items:center;gap:10px;animation:hts-clip-enter .45s ease-out}
#hts-clippy *{box-sizing:border-box}
#hts-clippy .hts-clippy-character{position:relative;flex:0 0 176px;width:176px;pointer-events:none;transform-origin:50% 84%;animation:hts-clip-float 3.1s ease-in-out infinite,hts-clip-look 5.5s ease-in-out infinite}
#hts-clippy .hts-clippy-character::before{content:'';position:absolute;inset:10% 12% 5%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.7),rgba(255,255,255,.18) 28%,rgba(91,67,124,.12) 55%,rgba(0,0,0,0) 73%);filter:blur(12px);opacity:.7;transform:scale(1.08);z-index:0}
#hts-clippy .hts-clippy-stack{position:relative;width:100%;aspect-ratio:1/1;isolation:isolate}
#hts-clippy .hts-layer{position:absolute;inset:auto;display:block;object-fit:contain;pointer-events:none;transform-origin:50% 50%}
#hts-clippy .hts-layer.body{inset:0;width:100%;height:100%;z-index:1;transform:perspective(560px) rotateY(var(--gaze-x)) rotateX(var(--gaze-y)) scale(calc(var(--body-scale) + var(--excite)*.06));transition:transform .16s linear,filter .24s ease;filter:drop-shadow(0 0 1px rgba(255,255,255,.98)) drop-shadow(0 0 2px rgba(37,30,56,.72)) drop-shadow(0 0 10px rgba(255,255,255,.24)) drop-shadow(0 10px 12px rgba(21,18,30,.18)) drop-shadow(0 18px 22px rgba(21,18,30,.16))}
#hts-clippy .hts-layer.eye{z-index:2;width:var(--eye-width);height:var(--eye-width);transition:transform .09s linear;animation:hts-clip-blink 6.4s linear infinite}
#hts-clippy .hts-layer.eye.left{left:var(--eye-left-x);top:var(--eye-left-y);transform:translate(var(--eye-lx),var(--eye-ly)) rotate(var(--eye-lrot)) scale(var(--eye-lscale))}
#hts-clippy .hts-layer.eye.right{left:var(--eye-right-x);top:var(--eye-right-y);transform:translate(var(--eye-rx),var(--eye-ry)) rotate(var(--eye-rrot)) scale(var(--eye-rscale))}
#hts-clippy .hts-layer.brow{z-index:3;width:var(--brow-width);height:10%;transition:transform .11s linear}
#hts-clippy .hts-layer.brow.left{left:var(--brow-left-x);top:var(--brow-left-y);transform:translate(var(--brow-lx),var(--brow-ly)) rotate(var(--brow-lrot))}
#hts-clippy .hts-layer.brow.right{left:var(--brow-right-x);top:var(--brow-right-y);transform:translate(var(--brow-rx),var(--brow-ry)) rotate(var(--brow-rrot))}
#hts-clippy .hts-clippy-dialog{position:relative;pointer-events:auto;background:rgba(255,255,255,.95);backdrop-filter:blur(7px);border:1px solid #ddd5e4;border-top:3px solid #f15b5a;box-shadow:0 14px 35px rgba(38,25,48,.16);border-radius:12px;padding:18px 18px 15px;min-width:205px;max-width:235px}
#hts-clippy .hts-clippy-dialog:before{content:'';position:absolute;left:-9px;top:32px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-left:1px solid #ddd5e4;border-bottom:1px solid #ddd5e4}
#hts-clippy strong{display:block;color:#4b286d;line-height:1.3;font-size:14px;padding-right:16px}
#hts-clippy p{font-size:13px!important;line-height:1.5!important;margin:8px 0!important;color:#29232f!important}
#hts-clippy .hts-clippy-link{font-size:13px;color:#4b286d;text-decoration:underline;text-underline-offset:3px;font-weight:700}
#hts-clippy .hts-clippy-close{position:absolute;top:1px;right:5px;border:0;background:transparent;font:23px Arial,sans-serif;color:#4b286d;cursor:pointer;padding:3px 6px}
#hts-clippy button:focus-visible,#hts-clippy a:focus-visible{outline:3px solid #f15b5a;outline-offset:3px}
#hts-clippy-pointer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147481999;overflow:visible;filter:drop-shadow(1px 2px 1px rgba(60,0,0,.2));display:none}
#hts-clippy .hts-clippy-character.hts-clippy-shiver:not(.hts-clippy-hop):not(.hts-clippy-signal){animation:hts-clip-vibrate calc(.24s - var(--vibration)*.19s) linear infinite!important}
#hts-clippy-glass-tap{position:fixed;z-index:2147482002;width:62px;height:72px;pointer-events:none;display:none;transform:translate(-50%,-50%)}
#hts-clippy-glass-tap.is-knocking{display:block}
#hts-clippy-glass-tap .hts-knuckle{position:absolute;left:9px;top:12px;width:23px;height:46px;border-radius:16px 16px 10px 10px;transform-origin:50% 90%;background:linear-gradient(90deg,#d5a18b,#ffdbc4 55%,#dfb39d);border:1px solid #bd8e7c;box-shadow:2px 5px 8px #3a263355;animation:hts-glass-knuckle .65s ease-in-out both}
#hts-clippy-glass-tap .hts-knuckle::before{content:'';position:absolute;top:3px;left:5px;width:11px;height:13px;border:1px solid #e9acaa;background:#f4c4b8;border-radius:50%}
#hts-clippy-glass-tap .hts-glass-ring{position:absolute;left:31px;top:11px;width:25px;height:25px;border:2px solid rgba(255,255,255,.88);border-radius:50%;box-shadow:0 0 1px #444,0 0 9px rgba(155,188,213,.7);opacity:0;animation:hts-glass-ripple .65s ease both}
#hts-clippy-admin-test,#hts-clippy-admin-settings{position:fixed;bottom:22px;z-index:2147482001;border:1px solid #4b286d;border-radius:999px;background:#fff;color:#4b286d;padding:9px 13px;font:600 13px Arial,sans-serif;box-shadow:0 6px 20px #241a3133;text-decoration:none}
#hts-clippy-admin-test{right:20px;cursor:pointer}
#hts-clippy-admin-settings{right:148px}
@keyframes hts-clip-enter{from{opacity:0;transform:translate(-50%,-45%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hts-clip-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes hts-clip-look{0%,40%,100%{rotate:-4deg}55%,70%{rotate:7deg}}
@keyframes hts-clip-blink{0%,91%,100%{scale:1 1}93%{scale:1 .15}95%{scale:1 1}97%{scale:1 .1}99%{scale:1 1}}
@keyframes hts-clip-double-hop{0%{transform:translateY(0) rotate(0deg)}12%{transform:translateY(-14px) rotate(-4deg)}24%{transform:translateY(0) rotate(2deg)}38%{transform:translateY(-22px) rotate(5deg)}56%{transform:translateY(0) rotate(-2deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes hts-clip-attention{0%{transform:rotate(-15deg) translateY(40px) scale(.75);opacity:0}50%{transform:rotate(12deg) translateY(-12px) scale(1.1);opacity:1}75%{transform:rotate(-6deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
@keyframes hts-clip-eager{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -11px;rotate:5deg}}
@keyframes hts-clip-thrilled{0%,100%{translate:0 0;rotate:-8deg}35%{translate:0 -13px;rotate:8deg}70%{translate:0 -5px;rotate:-5deg}}
@keyframes hts-clip-curious{0%,100%{translate:0 0;rotate:-4deg}25%{translate:0 -4px;rotate:2deg}50%{translate:0 -8px;rotate:6deg}75%{translate:0 -3px;rotate:-2deg}}
@keyframes hts-clip-surprised{0%,100%{translate:0 0;rotate:-8deg}30%{translate:0 -14px;rotate:8deg}55%{translate:0 -8px;rotate:-3deg}80%{translate:0 -11px;rotate:5deg}}
@keyframes hts-clip-vibrate{0%,100%{translate:0 0;rotate:0deg}25%{translate:calc(var(--vibration)*-3px) calc(var(--vibration)*2px);rotate:calc(var(--vibration)*-2deg)}50%{translate:calc(var(--vibration)*3px) 0;rotate:calc(var(--vibration)*2deg)}75%{translate:calc(var(--vibration)*-2px) calc(var(--vibration)*-2px);rotate:calc(var(--vibration)*-1deg)}}
@keyframes hts-glass-knuckle{0%,100%{transform:translateX(-12px) rotate(-30deg)}25%,63%{transform:translateX(4px) rotate(-12deg)}42%,84%{transform:translateX(-7px) rotate(-25deg)}}
@keyframes hts-glass-ripple{0%,16%,49%{opacity:0;scale:.3}26%,65%{opacity:1;scale:1}40%,90%,100%{opacity:0;scale:1.8}}
#hts-clippy .hts-clippy-character.hts-clippy-hop{animation:hts-clip-double-hop 1.2s cubic-bezier(.27,.93,.43,1) 1!important}
#hts-clippy .hts-clippy-character.hts-clippy-signal{animation:hts-clip-attention .85s cubic-bezier(.2,1.5,.5,1) 1,hts-clip-float 3.1s ease-in-out .85s infinite,hts-clip-look 5.5s ease-in-out .85s infinite}
#hts-clippy .hts-clippy-character.hts-clippy-excited:not(.hts-clippy-hop):not(.hts-clippy-signal){animation:hts-clip-eager 1.05s ease-in-out infinite}
#hts-clippy .hts-clippy-character.hts-clippy-very-excited:not(.hts-clippy-hop):not(.hts-clippy-signal){animation:hts-clip-thrilled .55s ease-in-out infinite}
#hts-clippy .hts-clippy-character.hts-clippy-curious:not(.hts-clippy-hop):not(.hts-clippy-signal){animation:hts-clip-curious 1.8s ease-in-out infinite}
#hts-clippy .hts-clippy-character.hts-clippy-surprised:not(.hts-clippy-hop):not(.hts-clippy-signal){animation:hts-clip-surprised .7s ease-in-out infinite}
@media(max-width:520px){#hts-clippy{width:min(340px,calc(100vw - 20px));gap:0}#hts-clippy .hts-clippy-character{flex-basis:120px;width:120px}#hts-clippy .hts-clippy-dialog{min-width:0;max-width:220px}}
@media(prefers-reduced-motion:reduce){#hts-clippy,#hts-clippy .hts-clippy-character,#hts-clippy .hts-clippy-character.hts-clippy-hop,#hts-clippy .hts-clippy-character.hts-clippy-signal,#hts-clippy .hts-clippy-character.hts-clippy-excited,#hts-clippy .hts-clippy-character.hts-clippy-very-excited,#hts-clippy .hts-clippy-character.hts-clippy-curious,#hts-clippy .hts-clippy-character.hts-clippy-surprised,#hts-clippy .hts-layer.eye{animation:none!important}#hts-clippy .hts-layer,#hts-clippy .hts-clippy-dialog{transition:none!important}#hts-clippy-glass-tap{display:none!important}}
/* 3.0: anchored panel, explicit actions, quiet character and readable library. */
#hts-clippy{width:min(540px,calc(100vw - 16px));min-height:0;align-items:flex-end;gap:0;animation:none;transform:none;left:auto;top:auto;right:20px;bottom:75px}
#hts-clippy .hts-clippy-character{flex:0 0 115px;width:115px;animation:none!important;translate:0 0;rotate:0deg}
#hts-clippy .hts-clippy-dialog{width:100%;max-width:none;min-width:0;padding:12px;max-height:calc(100dvh - 90px);overflow:auto;background:#fff}
#hts-clippy .hts-clippy-dialog:before{display:none}
#hts-clippy .clippy-toolbar{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #eee;margin-bottom:9px;padding-bottom:6px}
#hts-clippy .clippy-toolbar button{border:0;background:transparent;color:#4b286d;padding:4px 8px;font-size:16px}
#hts-clippy .clippy-drag{cursor:grab;touch-action:none;user-select:none}
#hts-clippy .clippy-drag:active{cursor:grabbing}
#hts-clippy .clippy-actions,#hts-clippy .clippy-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
#hts-clippy button{cursor:pointer;font:inherit;color:#4b286d;background:#faf8fc;border:1px solid #d8cfe0;padding:5px 8px;border-radius:7px;line-height:1.4}
#hts-clippy .clippy-actions button{font-size:12px}
#hts-clippy .clippy-detail{margin-top:12px;border-top:1px solid #ddd;padding-top:8px}
#hts-clippy .clippy-detail[hidden],#hts-clippy [hidden]{display:none!important}
#hts-clippy h3{font-size:16px;line-height:1.3;margin:4px 0 8px;color:#4b286d}
#hts-clippy label{display:block;font-size:13px;margin:8px 0}
#hts-clippy input:not([type=checkbox]),#hts-clippy textarea,#hts-clippy select{display:block;width:100%;max-width:100%;font:inherit;padding:8px;border:1px solid #bfb3c9;border-radius:5px;background:#fff;color:#29232f;margin:4px 0}
#hts-clippy input[type=checkbox]{margin-left:8px}
#hts-clippy textarea{min-height:85px;resize:vertical}
#hts-clippy .clippy-entry{padding:12px 0;border-bottom:1px solid #eee;overflow-wrap:anywhere}
#hts-clippy .clippy-entry>a{display:block;font-weight:bold;color:#4b286d}
#hts-clippy .clippy-entry button{margin:3px;font-size:12px}
#hts-clippy blockquote{padding:6px 10px;margin:6px 0;border-left:3px solid #f15b5a;font-size:13px;max-height:120px;overflow:auto}
#hts-clippy .clippy-status:empty{display:none}
#hts-clippy .clippy-status{font-size:12px!important;color:#4b286d!important}
#hts-clippy-launcher{position:fixed;right:16px;bottom:16px;z-index:2147482001;background:#4b286d;color:#fff;border:2px solid #fff;border-radius:30px;padding:9px 15px;font:600 14px/1.5 Arial,sans-serif;box-shadow:0 4px 16px #241a3133;cursor:pointer}
#hts-clippy.clippy-still .hts-layer,#hts-clippy.clippy-still .hts-clippy-character{animation:none!important;transition:none!important}
#hts-clippy-pointer{width:100vw;height:100dvh}
#hts-clippy-admin-test,#hts-clippy-admin-settings{bottom:65px}
@media(max-width:520px){#hts-clippy .hts-clippy-character{flex-basis:65px;width:65px}#hts-clippy .hts-clippy-dialog{max-width:none}#hts-clippy .clippy-actions button{font-size:11px}#hts-clippy{width:calc(100vw - 16px)}}
.clippy-capture{display:inline-block;margin-left:8px;border:1px solid #d8cfe0;border-radius:5px;background:#fff;color:#4b286d;padding:2px 6px;font:11px/1.4 Arial,sans-serif;cursor:pointer}
.clippy-capture:focus-visible{outline:3px solid #f15b5a;outline-offset:2px}

#hts-clippy .clippy-destination-link{display:block;margin:8px 0;padding:7px 10px;border:1px solid #d8cfe0;border-radius:6px;color:#4b286d;text-decoration:underline;overflow-wrap:anywhere}

/* RC3: independent anchoring, elongated body, visible brows and proximity. */
#hts-clippy{right:auto;bottom:auto}
#hts-clippy .hts-clippy-stack{aspect-ratio:1 / 1.3}
#hts-clippy .hts-layer.body{object-fit:fill;filter:drop-shadow(1px 0 0 #4b286d) drop-shadow(-1px 0 0 #4b286d) drop-shadow(0 1px 0 #4b286d) drop-shadow(0 -1px 0 #4b286d) drop-shadow(0 0 3px white) drop-shadow(0 5px 7px #241a3155)}
#hts-clippy .hts-layer.brow{height:40%}
#hts-clippy .hts-clippy-character{animation:hts-clip-look 5.5s ease-in-out infinite!important}
#hts-clippy .hts-clippy-character.clippy-proximity{animation:hts-clip-vibrate var(--shiver-period,.42s) linear infinite!important}
#hts-clippy .hts-clippy-character.clippy-proximity .hts-layer.body{filter:drop-shadow(0 0 1px #4b286d) drop-shadow(0 0 3px white) drop-shadow(0 0 5px #f15b5a)}
#hts-clippy .clippy-more-actions{display:flex;flex-wrap:wrap;gap:5px}
#hts-clippy.clippy-still .hts-clippy-character{animation:none!important}
@media(prefers-reduced-motion:reduce){#hts-clippy .hts-clippy-character{animation:none!important}}
#hts-clippy .hts-layer.eye{height:auto;aspect-ratio:1}
#hts-clippy .hts-layer.brow{object-fit:fill}

/* RC4: independent internal loop and composable motion layers. */
#hts-clippy .hts-clippy-character{animation:none!important;transition:transform .16s ease-out}
#hts-clippy .hts-clippy-stack{transform-origin:50% 75%}
#hts-clippy .hts-layer.body.clippy-wire{transform:none;clip-path:none;overflow:visible;object-fit:contain}
#hts-clippy .hts-layer.eye{animation:none!important}
#hts-clippy.clippy-still .hts-clippy-character{transform:none!important;translate:none!important;rotate:none!important}
@media(prefers-reduced-motion:reduce){#hts-clippy .hts-clippy-character{transform:none!important;translate:none!important;rotate:none!important}}

/* RC6: elongated close-wound wire and fixed eyeballs with independent pupils. */
#hts-clippy .hts-clippy-stack{aspect-ratio:205 / 310}
#hts-clippy .hts-layer.eye.left,#hts-clippy .hts-layer.eye.right{transform:none;transition:none;overflow:visible}

/* Hats share the character's stack, including its spin and tilt. */
#hts-clippy .clippy-hat{position:absolute;width:64%;height:auto;left:18%;top:-15%;z-index:5;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 1px #fff) drop-shadow(0 3px 3px #241a3144)}
#hts-clippy .clippy-detail select{display:block;max-width:100%;margin-top:6px;padding:7px;border:1px solid #d8cfe0;border-radius:6px;background:#fff;color:#4b286d}
