/* ColoringYes wordmark: a colored pencil drawing a warm scribble. */
body.wk .wk-logo.cy-brand{display:inline-flex;align-items:center;gap:7px;height:50px;font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,sans-serif;font-size:28px;font-weight:800;line-height:1;letter-spacing:-1.3px;text-transform:none;overflow:visible;flex-shrink:0;max-width:none}
.cy-brand-mark{display:block;width:48px;height:48px;flex:none;overflow:visible;color:var(--accent)}
.cy-brand-name{color:var(--ink);white-space:nowrap}.cy-brand-yes{color:#8961c8}.cy-brand-dot{color:#d58a34}
html[data-mode=dark] .cy-brand-yes{color:#bd9bef}html[data-mode=dark] .cy-brand-dot{color:#f0b76f}
.cy-brand-stroke{stroke-dasharray:1;stroke-dashoffset:0;animation:cy-logo-draw 1.5s ease both}
.cy-brand-pencil{transform-origin:22px 39px;animation:cy-pencil-draw 1.5s ease both}
.cy-brand-spark{transform-origin:10px 18px;animation:cy-logo-spark 1.5s ease both}
.cy-brand:hover .cy-brand-pencil,.cy-brand:focus-visible .cy-brand-pencil{animation:cy-pencil-wave .65s ease-in-out 2}
.cy-brand:hover .cy-brand-stroke,.cy-brand:focus-visible .cy-brand-stroke{animation:cy-logo-redraw 1.3s ease both}
.cy-brand:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:8px}
@keyframes cy-logo-draw{0%,15%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes cy-logo-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cy-pencil-draw{0%{transform:translate(-7px,2px) rotate(-12deg)}45%{transform:translate(1px,-1px) rotate(5deg)}75%{transform:translate(4px,0) rotate(-4deg)}100%{transform:none}}
@keyframes cy-pencil-wave{0%,100%{transform:rotate(0)}45%{transform:rotate(-10deg)}75%{transform:rotate(4deg)}}
@keyframes cy-logo-spark{0%,50%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
body.wk .wk-footer .cy-brand{font-size:26px}
@media(max-width:575px){body.wk .wk-logo.cy-brand{font-size:25px;gap:4px;height:44px}.cy-brand-mark{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.cy-brand *{animation:none!important;transition:none!important}}

/* Refined signature: a fan of three coloring pencils and an inked wordmark. */
body.wk .wk-logo.cy-brand{gap:9px;height:58px;letter-spacing:-1.1px;font-size:29px}
.cy-brand-mark{width:56px;height:56px;color:var(--accent)}
.cy-brand-wordmark{display:flex;flex-direction:column;gap:6px}
.cy-brand-name{display:block;line-height:1;font-weight:850}
.cy-brand-caption{font:650 8px/1.2 system-ui,sans-serif;letter-spacing:1.45px;color:var(--muted)}
.cy-brand-yes{position:relative;display:inline-block;color:#8052ba}
.cy-brand-yes::after{content:"";position:absolute;left:1px;right:2px;bottom:-3px;height:4px;background:linear-gradient(90deg,#e781a1,#efa951,#64b69e);border-radius:55% 35% 50% 40%;opacity:.85;transform:rotate(-3deg);transform-origin:left center;animation:cy-wordmark-color 1.2s ease both}
.cy-brand-dot{color:#d38a36}.cy-brand-pencil{transform-origin:31px 46px;animation:cy-center-pencil 1.2s cubic-bezier(.2,.8,.2,1) both}
.cy-brand-crayon{transform-box:fill-box;animation:cy-side-pencil 1.1s ease both}.cy-brand-crayon-mint{animation-delay:.1s}
.cy-brand-spark{transform-origin:53px 13px}
.cy-brand:hover .cy-brand-pencil,.cy-brand:focus-visible .cy-brand-pencil{animation:cy-center-wave .8s ease 1}
.cy-brand:hover .cy-brand-yes::after,.cy-brand:focus-visible .cy-brand-yes::after{animation:cy-wordmark-color .8s ease both}
.cy-brand:hover .cy-brand-spark{animation:cy-logo-spark .8s ease both}
@keyframes cy-center-pencil{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes cy-side-pencil{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes cy-center-wave{0%,100%{rotate:0deg}35%{rotate:-7deg}70%{rotate:5deg}}
@keyframes cy-wordmark-color{from{scale:0 1}to{scale:1 1}}
body.wk .wk-footer .cy-brand{font-size:28px}
@media(max-width:575px){body.wk .wk-logo.cy-brand{font-size:25px;gap:7px;height:52px}.cy-brand-mark{width:47px;height:47px}.cy-brand-caption{font-size:7px;letter-spacing:1.1px}.cy-brand-wordmark{gap:5px}}
@media(prefers-reduced-motion:reduce){.cy-brand *,.cy-brand *::after{animation:none!important;transition:none!important}}

