.mkin{--teal:#8ACDD3;--green:#00745F;--pink:#EC4F9A;--plum:#8E1F64;position:absolute;right:clamp(16px,5vw,72px);top:50%;z-index:5;box-sizing:border-box;width:100%;max-width:400px;padding:30px 28px 26px;border-radius:32px;background:var(--teal);color:var(--plum);font-family:"museo-sans","Museo Sans",ui-rounded,"Segoe UI",sans-serif;line-height:1.3;box-shadow:0 24px 60px -20px rgba(0,60,70,.45);opacity:0;transform:translate(40px,-50%) rotate(2deg)}
.mkin *{box-sizing:border-box}
@media (max-width:820px){.mkin{position:relative;right:auto;top:auto;margin:-60px auto 24px;transform:translateY(30px)}}
.mkin-logo{display:block;width:100%;height:auto;margin:0 0 16px;overflow:visible}
.mkin-logo g{transform-box:fill-box;transform-origin:center;opacity:0}
.mkin.is-on .mkl-s{animation:mkl-spin 1s cubic-bezier(.34,1.56,.64,1) .5s both,mkl-rot 14s linear 1.6s infinite}
.mkin.is-on .mkl-3{animation:mkl-pop .7s cubic-bezier(.34,1.56,.64,1) .8s both}
.mkin.is-on .mkl-g{animation:mkl-slide .7s cubic-bezier(.22,1,.36,1) .9s both}
.mkin.is-on .mkl-y{transform-origin:left center;animation:mkl-flip .8s cubic-bezier(.34,1.56,.64,1) 1.05s both,mkl-sway 3.2s ease-in-out 2s infinite}
@keyframes mkl-spin{from{opacity:0;transform:scale(0) rotate(-140deg)}to{opacity:1;transform:none}}
@keyframes mkl-rot{to{transform:rotate(360deg)}}
@keyframes mkl-pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes mkl-slide{from{opacity:0;transform:translateX(-30%)}to{opacity:1;transform:none}}
@keyframes mkl-flip{from{opacity:0;transform:rotate(-25deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes mkl-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.mkin-h{font-family:"museo","Museo",ui-rounded,"Segoe UI",sans-serif;font-weight:700;margin:0;line-height:1}
.mkin-mark{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.mkin-3{position:relative;width:64px;height:64px;flex:none}
.mkin-3 svg{position:absolute;inset:0;width:100%;height:100%}
.mkin-3 span{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;color:var(--pink);font-family:"museo","Museo",ui-rounded,sans-serif;font-weight:700}
.mkin-pills{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mkin-pill{display:inline-block;padding:4px 14px 6px;border-radius:99px;font-size:24px}
.mkin-pill--a{background:#FFC65E;color:#F07C00;transform:rotate(-6deg);transform-origin:left center}
.mkin-pill--b{background:#8FCB9B;color:var(--green)}
.mkin-tag{margin:0 0 18px;font-size:17px;font-weight:700;color:var(--plum);text-wrap:pretty}
.mkin-days{list-style:none;margin:0 0 18px;padding:12px 14px 12px 10px;border-radius:20px;background:rgba(255,255,255,.35);display:flex;flex-direction:column;gap:10px}
.mkin-row{display:flex;align-items:center;gap:12px;opacity:0}
.mkin-day{position:relative;width:54px;height:54px;flex:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mkin-row:hover .mkin-day{transform:rotate(20deg) scale(1.08)}
.mkin-day svg{position:absolute;inset:0;width:100%;height:100%}
.mkin-day b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:"museo","Museo",ui-rounded,sans-serif;font-size:14px}
.mkin-dn{display:block;font-family:"museo","Museo",ui-rounded,sans-serif;font-weight:700;font-size:18px;line-height:1.1}
.mkin-act{display:block;font-weight:700;font-size:14px;color:#1D1D1B}
.mkin-day{width:62px;height:62px}
.mkin-day b{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;line-height:1}
.mkin-day b small{font-size:9px;font-family:"museo-sans","Museo Sans",ui-rounded,sans-serif;font-weight:700;margin-bottom:2px;letter-spacing:.02em}
.mkin-txt{min-width:0}
.mkin-act{transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkin-act.is-out{opacity:0;transform:none}
.mkin-act.is-pre{opacity:0;transform:translateX(-8px);transition:none}
.mkin-cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 18px;text-align:center}
.mkin-cd div{background:#fff;border-radius:14px;padding:8px 2px 6px}
.mkin-cd b{display:block;font-family:"museo","Museo",ui-rounded,sans-serif;font-size:24px;color:var(--green);font-variant-numeric:tabular-nums}
.mkin-cd small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.mkin-live{display:none;margin:0 0 18px;font-family:"museo","Museo",ui-rounded,sans-serif;font-weight:700;font-size:22px;color:var(--green)}
.mkin.is-live .mkin-cd{display:none}.mkin.is-live .mkin-live{display:block}
.mkin-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:99px;background:var(--pink);color:#fff;font-family:"museo","Museo",ui-rounded,sans-serif;font-weight:700;font-size:18px;text-decoration:none;transition:background .2s}
.mkin-cta:hover{background:var(--plum);color:#fff}
.mkin-cta i{font-size:.9em;transition:transform .2s}.mkin-cta:hover i{transform:translateX(4px)}
.mkin-free{position:absolute;right:-22px;top:-30px;width:104px;height:104px;opacity:0}
.mkin-free>div{position:absolute;inset:0}
.mkin-free svg{position:absolute;inset:0;width:100%;height:100%}
.mkin-free span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:"museo","Museo",ui-rounded,sans-serif;font-weight:700;font-size:15px;line-height:1.15;color:#1D1D1B}
@media (max-width:480px){.mkin-free{right:-6px;width:88px;height:88px}.mkin-free span{font-size:13px}}
.mkin-s{opacity:0}
.mkin.is-on{animation:mkin-in .8s cubic-bezier(.22,1,.36,1) .2s both}
.mkin.is-on .mkin-s{animation:mkin-up .6s cubic-bezier(.22,1,.36,1) both}
.mkin.is-on .mkin-tag{animation-delay:1.2s}.mkin.is-on .mkin-days{animation-delay:1.3s}.mkin.is-on .mkin-s:has(.mkin-cd){animation-delay:1.9s}.mkin.is-on .mkin-cta{animation-delay:2.05s}
.mkin.is-on .mkin-row{animation:mkin-up .6s cubic-bezier(.22,1,.36,1) calc(1.4s + var(--i)*.15s) both}
.mkin.is-on .mkin-row .mkin-day{animation:mkin-spin .9s cubic-bezier(.34,1.56,.64,1) calc(1.4s + var(--i)*.15s) both}
.mkin.is-on .mkin-free{animation:mkin-pop .8s cubic-bezier(.34,1.56,.64,1) 2.2s both}
.mkin.is-on .mkin-free>div{animation:mkin-wob 3s ease-in-out 3s infinite}
@keyframes mkin-in{to{opacity:1;transform:translate(0,-50%)}}
@media (max-width:820px){@keyframes mkin-in{to{opacity:1;transform:none}}}
@keyframes mkin-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mkin-spin{from{transform:scale(0) rotate(-120deg)}to{transform:none}}
@keyframes mkin-pop{0%{opacity:0;transform:scale(0) rotate(-60deg)}70%{opacity:1;transform:scale(1.1) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes mkin-wob{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-8deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.mkin,.mkin *{animation:none!important;opacity:1!important}.mkin{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce) and (max-width:820px){.mkin{transform:none}}
.mkin--inline{position:relative;right:auto;top:auto;margin:0 auto;transform:translateY(30px)}
.mkin--inline.is-on{animation-name:mkin-in-inline}
@keyframes mkin-in-inline{to{opacity:1;transform:none}}
.mkin-act:empty{display:none}