:root {
    --bg: #1a1033;
    --bg2: #3b2360;
    --card: #271a47;
    --text: #f2eefc;
    --muted: #b7abd6;
    --green: #4fc064;
    --green-soft: #a9e2a0;
    --halo: #ffd54f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 420px);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

header.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0;
}
header.nav .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none;
}
header.nav .brand img { width: 34px; height: 34px; border-radius: 8px; }
header.nav nav a {
    color: var(--muted); text-decoration: none; margin-left: 22px; font-size: 0.95rem;
}
header.nav nav a:hover, header.nav nav a.active { color: var(--green-soft); }

.hero { text-align: center; padding: 48px 0 40px; }
.hero img.appicon {
    width: 128px; height: 128px; border-radius: 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.hero h1 { font-size: 2.6rem; margin: 20px 0 8px; letter-spacing: -0.5px; }
.hero p.tag { font-size: 1.25rem; color: var(--green-soft); font-weight: 600; }
.hero p.sub { color: var(--muted); max-width: 560px; margin: 12px auto 0; }
.hero .counter {
    display: inline-block; margin-top: 28px; padding: 18px 34px;
    background: var(--card); border-radius: 18px; border: 1px solid rgba(255,255,255,0.08);
}
.hero .counter .label { font-size: 0.9rem; color: var(--muted); }
.hero .counter .num { font-size: 3.4rem; font-weight: 900; color: var(--green); line-height: 1.1; }

.badge-soon {
    display: inline-block; margin-top: 24px; padding: 10px 22px;
    border: 1px solid var(--muted); border-radius: 999px; color: var(--muted); font-size: 0.95rem;
}

.cta { margin-top: 28px; }
.btn-store {
    display: inline-block; padding: 14px 30px;
    background: var(--green); color: #10261a; text-decoration: none;
    border-radius: 999px; font-weight: 700; font-size: 1.05rem;
    box-shadow: 0 8px 24px rgba(79,192,100,0.25);
}
.btn-store:hover { background: var(--green-soft); }
.cta-sub { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
.cta-beta { margin-top: 4px; color: var(--muted); font-size: 0.92rem; }
.cta-beta a { color: var(--green-soft); }

section.features { padding: 30px 0 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card {
    background: var(--card); border-radius: 16px; padding: 24px;
    border: 1px solid rgba(255,255,255,0.07);
}
.card .emoji { font-size: 2rem; }
.card h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.card p { color: var(--muted); font-size: 0.95rem; }

.note {
    margin: 40px 0; padding: 20px 24px; background: rgba(255, 213, 79, 0.08);
    border: 1px solid rgba(255, 213, 79, 0.25); border-radius: 14px;
    color: var(--muted); font-size: 0.95rem;
}
.note a { color: var(--halo); }

main.doc { padding: 24px 0 40px; }
main.doc h1 { font-size: 2rem; margin-bottom: 6px; }
main.doc p.updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }
main.doc h2 { font-size: 1.25rem; margin: 30px 0 10px; color: var(--green-soft); }
main.doc p, main.doc li { color: var(--text); }
main.doc ul { padding-left: 22px; margin: 10px 0; }
main.doc li { margin: 6px 0; }
main.doc a { color: var(--green-soft); }
main.doc .qa { background: var(--card); border-radius: 14px; padding: 20px 24px; margin: 14px 0; border: 1px solid rgba(255,255,255,0.07); }
main.doc .qa h3 { font-size: 1.05rem; margin-bottom: 6px; }
main.doc .qa p, main.doc .qa li { color: var(--muted); font-size: 0.97rem; }

footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 40px; padding: 26px 0 40px;
    color: var(--muted); font-size: 0.9rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
footer a { color: var(--muted); text-decoration: none; margin-left: 18px; }
footer a:hover { color: var(--green-soft); }

/* ==========================================================================
   Monkey Joe
   One rig, six states, injected by joe.js into any [data-joe] element.
   Proportions and timing are deliberate: head ~55% of his height, stub limbs
   drawn behind the torso, pose-to-pose timing with holds, and a decaying
   wobble in the tuft/ears/tail after the body has stopped.
   ========================================================================== */

.mk {
    --t: 1;                       /* time multiplier */
    --joe: #3FBF6A;
    --joe-d: #2A8B4C;
    --face: #E4EFD8;
    --back: cubic-bezier(.34, 1.56, .64, 1);
    --snap: cubic-bezier(.2, .85, .25, 1);
    --drop: cubic-bezier(.55, 0, .85, .3);
    display: block; width: 100%; overflow: visible;
}
.mk g { transform-box: view-box; }

.mk .torso, .mk .skull, .mk .ear { fill: var(--joe); }
.mk .belly, .mk .face, .mk .ear-in { fill: var(--face); }
.mk .limb, .mk .foot { fill: var(--joe-d); }
.mk .limb-s { stroke: var(--joe-d); stroke-linecap: round; fill: none; }
.mk .tail { stroke: var(--joe-d); stroke-linecap: round; fill: none; }
.mk .tuft { stroke: var(--joe-d); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mk .white { fill: #fff; }
.mk .pupil { fill: #14231A; }
.mk .glint { fill: #fff; }
.mk .lid { fill: var(--face); transform: scaleY(0); }
.mk .brow { stroke: #16291C; stroke-width: 9.5; stroke-linecap: round; fill: none; }
.mk .eye-line { stroke: #14231A; stroke-width: 6.5; stroke-linecap: round; fill: none; }
.mk .mouth { fill: #1B3324; }
.mk .nose { fill: #93AF95; }
.mk .digit { stroke: #1F6B3A; stroke-width: 2; stroke-linecap: round; fill: none; opacity: .3; }
.mk .shadow { fill: #0B0420; opacity: .4; }
.mk .prop { display: none; }

/* joints, in viewBox units */
.mk .pop { transform-origin: 110px 246px; }
.mk .rig { transform-origin: 110px 246px; }
.mk .sq { transform-origin: 110px 246px; }
.mk .shadow { transform-origin: 110px 246px; }
.mk .hips { transform-origin: 110px 232px; }
.mk .chest { transform-origin: 110px 220px; }
.mk .head { transform-origin: 110px 146px; }
.mk .tuft-g { transform-origin: 110px 46px; }
.mk .tail1 { transform-origin: 80px 216px; }
.mk .tail2 { transform-origin: 62px 204px; }
.mk .tail3 { transform-origin: 48px 188px; }
.mk .leg-l { transform-origin: 96px 214px; }
.mk .leg-r { transform-origin: 124px 214px; }
.mk .arm-l { transform-origin: 76px 168px; }
.mk .arm-r { transform-origin: 144px 168px; }
.mk .fore-l { transform-origin: 65px 188px; }
.mk .fore-r { transform-origin: 155px 188px; }
.mk .ear-l, .mk .tw-l { transform-origin: 70px 90px; }
.mk .ear-r, .mk .tw-r { transform-origin: 150px 90px; }
.mk .lid-l { transform-origin: 92px 80px; }
.mk .lid-r { transform-origin: 128px 80px; }
.mk .eyes, .mk .pupils { transform-origin: 110px 98px; }
.mk .brow-l { transform-origin: 92px 74px; }
.mk .brow-r { transform-origin: 128px 74px; }
.mk .jaw { transform-origin: 110px 122px; }

/* expressions are swaps, not animations */
.mk .ev, .mk .m-smile, .mk .m-grin, .mk .m-flat, .mk .m-o, .mk .m-frown { display: none; }
.mk .e-open { display: block; }
.mk[data-state="proud"] .e-open, .mk[data-state="roast"] .e-open { display: none; }
.mk[data-state="proud"] .e-happy, .mk[data-state="roast"] .e-squint { display: block; }

.mk[data-state="idle"] .m-smile,
.mk[data-state="notes"] .m-smile,
.mk[data-state="proud"] .m-grin,
.mk[data-state="roast"] .m-grin,
.mk[data-state="hangxiety"] .m-o,
.mk[data-state="facepalm"] .m-frown,
.mk[data-state="phone"] .m-flat,
.mk[data-state="quiet"] .m-frown { display: block; }

.mk[data-state="notes"] .p-clipboard,
.mk[data-state="notes"] .p-pen,
.mk[data-state="proud"] .p-spark,
.mk[data-state="hangxiety"] .p-hands,
.mk[data-state="facepalm"] .p-palm,
.mk[data-state="phone"] .p-phone,
.mk[data-state="hangxiety"] .p-sweat { display: block; }

/* ---- idle: bounce, settle, then hold for a fifth of the cycle */
@keyframes joe-breathe {
    0%        { transform: translateY(0) scale(1,1); animation-timing-function: ease-in-out; }
    42%       { transform: translateY(-2.2px) scale(.994,1.012); animation-timing-function: ease-in-out; }
    78%, 100% { transform: translateY(0) scale(1,1); }
}
@keyframes joe-head {
    0%   { transform: rotate(0deg) translateY(0); animation-timing-function: ease-in-out; }
    27%  { transform: rotate(-1.6deg) translateY(1.1px); animation-timing-function: ease-in-out; }
    58%  { transform: rotate(1.1deg) translateY(-.7px); animation-timing-function: ease-in-out; }
    82%  { transform: rotate(-.4deg) translateY(.2px); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg) translateY(0); }
}
@keyframes joe-chest {
    0%   { transform: rotate(0deg); animation-timing-function: ease-in-out; }
    38%  { transform: rotate(.8deg); animation-timing-function: ease-in-out; }
    71%  { transform: rotate(-.55deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg); }
}
/* decaying oscillation — secondary motion after the body stops */
@keyframes joe-wobble {
    0%, 10%   { transform: rotate(0deg); animation-timing-function: ease-out; }
    28%       { transform: rotate(-13deg); }
    45%       { transform: rotate(8deg); }
    60%       { transform: rotate(-4.5deg); }
    73%       { transform: rotate(2deg); }
    84%, 100% { transform: rotate(0deg); }
}
@keyframes joe-wobble-s {
    0%, 10%   { transform: rotate(0deg); animation-timing-function: ease-out; }
    30%       { transform: rotate(-7deg); }
    48%       { transform: rotate(4deg); }
    64%       { transform: rotate(-2deg); }
    80%, 100% { transform: rotate(0deg); }
}
@keyframes joe-blink {
    0%, 91%, 100% { transform: scaleY(0); animation-timing-function: cubic-bezier(.4,0,.3,1); }
    92.4% { transform: scaleY(1); }
    94.2% { transform: scaleY(0); }
    95.6% { transform: scaleY(1); }
    97.2% { transform: scaleY(0); }
}
@keyframes joe-glance {
    0%, 34%   { transform: translate(0,0); animation-timing-function: var(--snap); }
    40%, 56%  { transform: translate(calc(var(--gx, -4.5) * 1px), calc(var(--gy, 1) * 1px)); }
    62%, 100% { transform: translate(0,0); }
}
@keyframes joe-twitch {
    0%, 91%, 100% { transform: rotate(0deg); animation-timing-function: var(--snap); }
    93%   { transform: rotate(-11deg); }
    95.5% { transform: rotate(4deg); }
    97.5% { transform: rotate(-2deg); }
}
@keyframes joe-shadow-idle {
    0%   { transform: scale(1); opacity: .4; }
    32%  { transform: scale(.93); opacity: .33; }
    60%  { transform: scale(1.03); opacity: .42; }
    80%, 100% { transform: scale(1); opacity: .4; }
}

/* Idle used to run EVERY part on one 2.4s cycle, which is exactly what made
   him read as a looping GIF: the whole body pulsed in lockstep, forever, on a
   beat you could tap along to. Now each part has its own non-harmonic period
   (4.6 / 5.3 / 5.9 / 6.3 / 7.1 / 8.3 / 9.1 …). Their least common multiple is
   effectively minutes long, so the combined motion never visibly repeats.
   joe.js also gives each instance a random phase (--p) and re-aims the glance,
   so two Joes on a page are never in sync and no two visits look the same. */
.mk[data-state="idle"] .sq     { animation: joe-breathe calc(4.6s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -4.6s); }
.mk[data-state="idle"] .chest  { animation: joe-chest   calc(5.9s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -5.9s); }
.mk[data-state="idle"] .head   { animation: joe-head    calc(7.1s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -7.1s); }
.mk[data-state="idle"] .tuft-g { animation: joe-sway    calc(6.3s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -6.3s); }
.mk[data-state="idle"] .ear-l  { animation: joe-sway-s  calc(8.3s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -8.3s); }
.mk[data-state="idle"] .ear-r  { animation: joe-sway-s  calc(9.1s * var(--t)) infinite reverse; animation-delay: calc(var(--p, 0) * -9.1s); }
/* the tail keeps its stagger — that's follow-through, not sync */
.mk[data-state="idle"] .tail1  { animation: joe-sway-s  calc(5.3s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -5.3s); }
.mk[data-state="idle"] .tail2  { animation: joe-sway-s  calc(5.3s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -5.3s - .22s); }
.mk[data-state="idle"] .tail3  { animation: joe-sway-s  calc(5.3s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -5.3s - .44s); }
.mk[data-state="idle"] .pupils { animation: joe-glance  calc(9.7s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -9.7s); }
.mk[data-state="idle"] .shadow { animation: joe-shadow-idle calc(4.6s * var(--t)) infinite; animation-delay: calc(var(--p, 0) * -4.6s); }

/* gentle sways replace the old springy wobble for the resting state */
@keyframes joe-sway {
    0%   { transform: rotate(0deg); animation-timing-function: ease-in-out; }
    33%  { transform: rotate(-3.4deg); animation-timing-function: ease-in-out; }
    69%  { transform: rotate(2.2deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg); }
}
@keyframes joe-sway-s {
    0%   { transform: rotate(0deg); animation-timing-function: ease-in-out; }
    36%  { transform: rotate(-1.9deg); animation-timing-function: ease-in-out; }
    72%  { transform: rotate(1.2deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg); }
}

/* ---- accents: one-shot, fired by joe.js on a random 9–20s timer. An
   unpredictable event is what actually breaks the loop illusion — the eye
   stops being able to predict him. */
@keyframes joe-acc-shift {
    0%   { transform: rotate(0deg) translateX(0); animation-timing-function: var(--snap); }
    22%  { transform: rotate(-1.4deg) translateX(-2.5px); animation-timing-function: ease-in-out; }
    64%  { transform: rotate(.9deg) translateX(1.6px); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg) translateX(0); }
}
@keyframes joe-acc-perk {
    0%   { transform: rotate(0deg) translateY(0); animation-timing-function: var(--back); }
    18%  { transform: rotate(2.6deg) translateY(-3px); animation-timing-function: ease-in-out; }
    46%  { transform: rotate(-1.8deg) translateY(-1px); animation-timing-function: ease-in-out; }
    74%  { transform: rotate(.7deg) translateY(-.3px); animation-timing-function: ease-out; }
    100% { transform: rotate(0deg) translateY(0); }
}
.mk.acc-shift .rig { animation: joe-acc-shift calc(3.1s * var(--t)) 1 both; }
.mk.acc-perk  .rig { animation: joe-acc-perk  calc(2.3s * var(--t)) 1 both; }

/* ---- accessibility: some people get motion sick, and this is a page about
   feeling rough in the morning. Hold a still, friendly pose. */
@media (prefers-reduced-motion: reduce) {
    .mk *, .mk { animation: none !important; transition: none !important; }
}
.mk[data-state="idle"] .lids,
.mk[data-state="notes"] .lids  { animation: joe-blink calc(4.9s * var(--t)) infinite; }
.mk .tw-r { animation: joe-twitch calc(7.3s * var(--t)) infinite; }
.mk .tw-l { animation: joe-twitch calc(11.9s * var(--t)) infinite; }

/* ---- notes: soft double tap, then a long hold. Amused, not stern. */
@keyframes joe-pen {
    0%, 40% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
    48%  { transform: rotate(10deg); animation-timing-function: cubic-bezier(.5,0,.8,.3); }
    55%  { transform: rotate(-24deg); animation-timing-function: var(--back); }
    62%  { transform: rotate(-17deg); animation-timing-function: cubic-bezier(.5,0,.8,.3); }
    68%  { transform: rotate(-22deg); animation-timing-function: ease-in-out; }
    78%  { transform: rotate(-18deg); animation-timing-function: ease-in-out; }
    90%, 100% { transform: rotate(0deg); }
}
@keyframes joe-read {
    0%, 22%   { transform: rotate(-1deg) translateY(0); animation-timing-function: ease-in-out; }
    32%, 58%  { transform: rotate(-8deg) translateY(2.5px); }
    70%, 100% { transform: rotate(1.5deg) translateY(0); }
}
.mk[data-state="notes"] .sq     { animation: joe-breathe calc(3.4s * var(--t)) infinite; }
.mk[data-state="notes"] .fore-r { animation: joe-pen calc(2.9s * var(--t)) infinite; }
.mk[data-state="notes"] .head   { animation: joe-read calc(4.8s * var(--t)) infinite; }
.mk[data-state="notes"] .tuft-g { animation: joe-wobble-s calc(2.9s * var(--t)) infinite; }
.mk[data-state="notes"] .tail1  { animation: joe-wobble-s calc(1.9s * var(--t)) infinite; }
.mk[data-state="notes"] .brow-r { transform: translateY(-4px) rotate(-7deg); }
.mk[data-state="notes"] .arm-l  { transform: rotate(14deg); }
.mk[data-state="notes"] .fore-l { transform: rotate(24deg); }
.mk[data-state="notes"] .arm-r  { transform: rotate(-18deg); }

/* ---- roast: leans in, points, chuckles. Wry, not manic. */
@keyframes joe-lean {
    0%   { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(5px,-1px) rotate(2deg); }
}
@keyframes joe-laugh {
    0%   { transform: translateY(0) scale(1,1); animation-timing-function: cubic-bezier(.3,0,.4,1); }
    40%  { transform: translateY(-2.6px) scale(.982,1.028); animation-timing-function: var(--drop); }
    100% { transform: translateY(0) scale(1.014,.988); }
}
@keyframes joe-laugh-head {
    0%   { transform: rotate(1.6deg) translateY(0); animation-timing-function: ease-in-out; }
    45%  { transform: rotate(-2deg) translateY(1px); }
    100% { transform: rotate(1.6deg) translateY(0); }
}
@keyframes joe-point {
    0%   { transform: rotate(-118deg); animation-timing-function: ease-in-out; }
    45%  { transform: rotate(-130deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(-118deg); }
}
@keyframes joe-jaw {
    0%   { transform: scaleY(1); animation-timing-function: ease-in-out; }
    45%  { transform: scaleY(1.1); }
    100% { transform: scaleY(1); }
}
.mk[data-state="roast"] .rig    { animation: joe-lean calc(.42s * var(--t)) var(--back) forwards; }
.mk[data-state="roast"] .sq     { animation: joe-laugh calc(.52s * var(--t)) infinite; }
.mk[data-state="roast"] .head   { animation: joe-laugh-head calc(.52s * var(--t)) infinite; animation-delay: calc(.1s * var(--t)); }
.mk[data-state="roast"] .arm-r  { animation: joe-point calc(1.04s * var(--t)) infinite; }
.mk[data-state="roast"] .jaw    { animation: joe-jaw calc(.52s * var(--t)) infinite; }
.mk[data-state="roast"] .tuft-g { animation: joe-wobble-s calc(1.04s * var(--t)) infinite; }
.mk[data-state="roast"] .tail1  { animation: joe-wobble-s calc(1.04s * var(--t)) infinite; }
.mk[data-state="roast"] .chest  { transform: rotate(-2deg); }
.mk[data-state="roast"] .fore-r { transform: rotate(-22deg); }
.mk[data-state="roast"] .arm-l  { transform: rotate(30deg); }
.mk[data-state="roast"] .fore-l { transform: rotate(16deg); }
.mk[data-state="roast"] .brow-l { transform: translateY(4px) rotate(11deg); }
.mk[data-state="roast"] .brow-r { transform: translateY(4px) rotate(-11deg); }

/* ---- proud: crouch, launch, apex, slam, two decaying rebounds */
@keyframes joe-hop {
    0%   { transform: translateY(0) scale(1,1); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
    9%   { transform: translateY(8px) scale(1.18,.8); animation-timing-function: linear; }
    15%  { transform: translateY(7px) scale(1.16,.82); animation-timing-function: cubic-bezier(.1,.8,.3,1); }
    25%  { transform: translateY(-18px) scale(.8,1.26); animation-timing-function: cubic-bezier(.4,0,.5,1); }
    40%  { transform: translateY(-36px) scale(.96,1.06); animation-timing-function: ease-in-out; }
    52%  { transform: translateY(-32px) scale(.98,1.03); animation-timing-function: var(--drop); }
    64%  { transform: translateY(-6px) scale(.88,1.16); animation-timing-function: cubic-bezier(.7,0,.9,.4); }
    70%  { transform: translateY(5px) scale(1.26,.76); animation-timing-function: var(--back); }
    79%  { transform: translateY(-7px) scale(.93,1.09); animation-timing-function: var(--drop); }
    87%  { transform: translateY(2px) scale(1.1,.92); animation-timing-function: var(--back); }
    94%  { transform: translateY(-2px) scale(.98,1.03); animation-timing-function: ease-out; }
    100% { transform: translateY(0) scale(1,1); }
}
@keyframes joe-cheer-l {
    0%   { transform: rotate(24deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
    12%  { transform: rotate(-12deg); animation-timing-function: var(--back); }
    30%  { transform: rotate(152deg); animation-timing-function: ease-in-out; }
    62%  { transform: rotate(163deg); animation-timing-function: var(--drop); }
    78%  { transform: rotate(112deg); animation-timing-function: var(--back); }
    92%  { transform: rotate(32deg); animation-timing-function: ease-out; }
    100% { transform: rotate(24deg); }
}
@keyframes joe-cheer-r {
    0%   { transform: rotate(-24deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
    12%  { transform: rotate(12deg); animation-timing-function: var(--back); }
    30%  { transform: rotate(-152deg); animation-timing-function: ease-in-out; }
    62%  { transform: rotate(-163deg); animation-timing-function: var(--drop); }
    78%  { transform: rotate(-112deg); animation-timing-function: var(--back); }
    92%  { transform: rotate(-32deg); animation-timing-function: ease-out; }
    100% { transform: rotate(-24deg); }
}
@keyframes joe-head-hop {
    0%, 8% { transform: rotate(0deg) translateY(0); animation-timing-function: ease-in-out; }
    22%  { transform: rotate(0deg) translateY(5px); }
    42%  { transform: rotate(-2deg) translateY(-4px); }
    68%  { transform: rotate(1deg) translateY(-2px); }
    76%  { transform: rotate(0deg) translateY(6px); }
    88%  { transform: rotate(0deg) translateY(-2px); }
    100% { transform: rotate(0deg) translateY(0); }
}
@keyframes joe-twinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(-30deg); animation-timing-function: var(--back); }
    45%      { opacity: 1; transform: scale(1.2) rotate(14deg); }
}
@keyframes joe-tuck {
    0%, 12% { transform: rotate(0deg); animation-timing-function: var(--back); }
    30%, 55% { transform: rotate(-14deg); animation-timing-function: var(--snap); }
    72%, 100% { transform: rotate(0deg); }
}
/* the shadow is what tells your eye how high he went */
@keyframes joe-shadow-hop {
    0%   { transform: scale(1); opacity: .4; animation-timing-function: var(--snap); }
    12%  { transform: scale(1.12); opacity: .48; animation-timing-function: cubic-bezier(.3,0,.4,1); }
    40%  { transform: scale(.5); opacity: .16; animation-timing-function: ease-in-out; }
    56%  { transform: scale(.56); opacity: .18; animation-timing-function: var(--drop); }
    70%  { transform: scale(1.16); opacity: .5; animation-timing-function: var(--back); }
    88%  { transform: scale(.98); opacity: .38; }
    100% { transform: scale(1); opacity: .4; }
}
.mk[data-state="proud"] .sq     { animation: joe-hop calc(1.3s * var(--t)) infinite; }
.mk[data-state="proud"] .arm-l  { animation: joe-cheer-l calc(1.3s * var(--t)) infinite; animation-delay: calc(.04s * var(--t)); }
.mk[data-state="proud"] .arm-r  { animation: joe-cheer-r calc(1.3s * var(--t)) infinite; animation-delay: calc(.08s * var(--t)); }
.mk[data-state="proud"] .head   { animation: joe-head-hop calc(1.3s * var(--t)) infinite; animation-delay: calc(.05s * var(--t)); }
.mk[data-state="proud"] .leg-l  { animation: joe-tuck calc(1.3s * var(--t)) infinite; }
.mk[data-state="proud"] .leg-r  { animation: joe-tuck calc(1.3s * var(--t)) infinite reverse; }
.mk[data-state="proud"] .tuft-g { animation: joe-wobble calc(1.3s * var(--t)) infinite; }
.mk[data-state="proud"] .tail1  { animation: joe-wobble-s calc(.65s * var(--t)) infinite; }
.mk[data-state="proud"] .shadow { animation: joe-shadow-hop calc(1.3s * var(--t)) infinite; }
.mk[data-state="proud"] .fore-l { transform: rotate(18deg); }
.mk[data-state="proud"] .fore-r { transform: rotate(-18deg); }
.mk[data-state="proud"] .p-spark > * { animation: joe-twinkle calc(1.3s * var(--t)) infinite; }
.mk[data-state="proud"] .p-spark > *:nth-child(2) { animation-delay: calc(.34s * var(--t)); }
.mk[data-state="proud"] .p-spark > *:nth-child(3) { animation-delay: calc(.68s * var(--t)); }

/* ---- quiet: one long sigh, one slow blink, and nothing else */
@keyframes joe-sigh {
    0%   { transform: translateY(0) scale(1,1); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
    18%  { transform: translateY(-2.5px) scale(.975,1.042); animation-timing-function: linear; }
    28%  { transform: translateY(-2.2px) scale(.98,1.038); animation-timing-function: cubic-bezier(.5,0,.6,1); }
    82%, 100% { transform: translateY(0) scale(1,1); }
}
@keyframes joe-slow-blink {
    0%, 74%, 100% { transform: scaleY(0); animation-timing-function: cubic-bezier(.4,0,.4,1); }
    79%, 85% { transform: scaleY(1); }
}
.mk[data-state="quiet"] .rig    { transform: translateY(6px); }
.mk[data-state="quiet"] .sq     { animation: joe-sigh calc(6.6s * var(--t)) infinite; }
.mk[data-state="quiet"] .lids   { animation: joe-slow-blink calc(8.1s * var(--t)) infinite; }
.mk[data-state="quiet"] .lid    { transform: scaleY(.34); }
.mk[data-state="quiet"] .chest  { transform: rotate(-2deg); }
.mk[data-state="quiet"] .head   { transform: rotate(-6deg) translateY(4px); }
.mk[data-state="quiet"] .tuft-g { transform: rotate(16deg); }
.mk[data-state="quiet"] .tail1  { transform: rotate(32deg); }
.mk[data-state="quiet"] .tail2  { transform: rotate(16deg); }
.mk[data-state="quiet"] .pupils { transform: translate(-4px,4px); }
.mk[data-state="quiet"] .brow-l { transform: translateY(-3px) rotate(-15deg); }
.mk[data-state="quiet"] .brow-r { transform: translateY(-3px) rotate(15deg); }
.mk[data-state="quiet"] .arm-l  { transform: rotate(13deg); }
.mk[data-state="quiet"] .arm-r  { transform: rotate(-13deg); }
.mk[data-state="quiet"] .ear-l  { transform: rotate(11deg); }
.mk[data-state="quiet"] .ear-r  { transform: rotate(-11deg); }
.mk[data-state="quiet"] .shadow { transform: scale(.94); opacity: .34; }

/* ---- Captain Paranoia: Joe's rig, desaturated and vibrating */
@keyframes joe-jitter {
    0%, 100% { transform: translate(0,0); }
    25% { transform: translate(-1.6px,.8px); }
    50% { transform: translate(1.3px,-.6px); }
    75% { transform: translate(.7px,1px); }
}
@keyframes joe-dart {
    0%, 16%   { transform: translate(-5px,0); }
    20%, 42%  { transform: translate(5px,-1px); }
    46%, 64%  { transform: translate(-4px,1.5px); }
    68%, 100% { transform: translate(3px,.5px); }
}
@keyframes joe-bead {
    0%   { opacity: 0; transform: translateY(-6px); }
    22%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(18px); }
}
.mk[data-state="hangxiety"] .rig    { animation: joe-jitter calc(.2s * var(--t)) steps(2) infinite; }
.mk[data-state="hangxiety"] .pupils { animation: joe-dart calc(1.8s * var(--t)) steps(1) infinite; }
.mk[data-state="hangxiety"] .eyes   { transform: scale(1.14); }
.mk[data-state="hangxiety"] .arm-l  { transform: rotate(163deg); }
.mk[data-state="hangxiety"] .fore-l { transform: rotate(14deg); }
.mk[data-state="hangxiety"] .arm-r  { transform: rotate(-163deg); }
.mk[data-state="hangxiety"] .fore-r { transform: rotate(-14deg); }
.mk[data-state="hangxiety"] .brow-l { transform: translateY(-8px) rotate(18deg); }
.mk[data-state="hangxiety"] .brow-r { transform: translateY(-8px) rotate(-18deg); }
.mk[data-state="hangxiety"] .p-sweat > * { animation: joe-bead calc(1.8s * var(--t)) ease-in infinite; }
.mk[data-state="hangxiety"] .torso,
.mk[data-state="hangxiety"] .skull,
.mk[data-state="hangxiety"] .ear { fill: #96C2A2; }
.mk[data-state="hangxiety"] .limb, .mk[data-state="hangxiety"] .foot { fill: #74A882; }
.mk[data-state="hangxiety"] .limb-s,
.mk[data-state="hangxiety"] .tail, .mk[data-state="hangxiety"] .tuft { stroke: #74A882; }

/* ---- entrance and poke */
@keyframes joe-pop-in {
    0%   { transform: scale(.6,.7) translateY(14px); animation-timing-function: var(--back); }
    55%  { transform: scale(1.08,1.05) translateY(-3px); animation-timing-function: ease-in-out; }
    75%  { transform: scale(.98,.99) translateY(1px); animation-timing-function: ease-out; }
    100% { transform: scale(1,1) translateY(0); }
}
.mk.popping .pop { animation: joe-pop-in calc(.62s * var(--t)) 1; }
@keyframes joe-poke {
    0%   { transform: scale(1,1); animation-timing-function: cubic-bezier(.2,0,.4,1); }
    18%  { transform: scale(1.22,.78); animation-timing-function: var(--back); }
    42%  { transform: scale(.88,1.16); animation-timing-function: cubic-bezier(.4,0,.5,1); }
    62%  { transform: scale(1.1,.92); animation-timing-function: var(--back); }
    80%  { transform: scale(.96,1.04); animation-timing-function: ease-out; }
    100% { transform: scale(1,1); }
}
.mk.poked .sq { animation: joe-poke calc(.72s * var(--t)) 1 !important; }
.mk.poked .tuft-g { animation: joe-wobble calc(.72s * var(--t)) 1 !important; }
[data-joe] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .mk, .mk * { animation: none !important; }
}

/* ---- where Joe sits on the page --------------------------------------- */

.joe-hero {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 28px; flex-wrap: wrap;
}
.joe-hero .joe-slot { width: 150px; flex: none; }
.joe-hero .counter { margin-top: 0; }

.card .joe-slot { width: 58px; }
.card .emoji,
.card .emoji-row {
    display: flex; align-items: flex-end; gap: 4px;
    min-height: 58px; line-height: 1;
}

.pact { margin: 34px 0 10px; }
.pact .card { padding: 28px 26px; }
.pact-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pact-row .joe-slot { width: 168px; flex: none; margin: 0 auto; }
.pact-lines { flex: 1 1 320px; }
.pact-lines h3 { font-size: 1.3rem; margin-bottom: 4px; }
.pact-lines ul { list-style: none; margin: 14px 0 0; padding: 0; }
.pact-lines li {
    color: var(--text); font-size: 0.97rem; margin: 0 0 10px;
    padding-left: 14px; border-left: 2px solid var(--green);
}
.pact-lines p.pact-ask { color: var(--muted); font-size: 0.95rem; margin-top: 16px; }
.pact-lines p.pact-tag {
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 1.15rem; font-weight: 700; color: var(--green-soft); line-height: 1.35;
}

/* ---- facepalm (a 2-out-of-5 morning) and phone (checking the sent folder) */
@keyframes joe-sag {
    0%   { transform: translateY(0) scale(1,1); animation-timing-function: cubic-bezier(.3,0,.5,1); }
    30%  { transform: translateY(2px) scale(1.015,.985); animation-timing-function: ease-in-out; }
    100% { transform: translateY(0) scale(1,1); }
}
.mk[data-state="facepalm"] .sq     { animation: joe-sag calc(4.4s * var(--t)) infinite; }
.mk[data-state="facepalm"] .head   { transform: rotate(-9deg) translateY(4px); }
.mk[data-state="facepalm"] .chest  { transform: rotate(-3deg); }
.mk[data-state="facepalm"] .arm-r  { transform: rotate(-152deg); }
.mk[data-state="facepalm"] .fore-r { transform: rotate(-34deg); }
.mk[data-state="facepalm"] .arm-l  { transform: rotate(14deg); }
.mk[data-state="facepalm"] .tuft-g { transform: rotate(12deg); }
.mk[data-state="facepalm"] .tail1  { transform: rotate(30deg); }
.mk[data-state="facepalm"] .lid    { transform: scaleY(.5); }
.mk[data-state="facepalm"] .brow-l { transform: translateY(-3px) rotate(-13deg); }
.mk[data-state="facepalm"] .brow-r { transform: translateY(-3px) rotate(13deg); }
.mk[data-state="facepalm"] .shadow { transform: scale(.95); opacity: .34; }

@keyframes joe-screen { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes joe-scroll-eyes {
    0%, 40%   { transform: translate(3.5px,3px); animation-timing-function: var(--snap); }
    48%, 88%  { transform: translate(3.5px,1px); }
    96%, 100% { transform: translate(3.5px,3px); }
}
.mk[data-state="phone"] .sq     { animation: joe-breathe calc(4s * var(--t)) infinite; }
.mk[data-state="phone"] .pupils { animation: joe-scroll-eyes calc(2.6s * var(--t)) infinite; }
.mk[data-state="phone"] .p-phone .screen { animation: joe-screen calc(2.6s * var(--t)) infinite; }
.mk[data-state="phone"] .arm-r  { transform: rotate(-64deg); }
.mk[data-state="phone"] .fore-r { transform: rotate(-48deg); }
.mk[data-state="phone"] .arm-l  { transform: rotate(12deg); }
.mk[data-state="phone"] .head   { transform: rotate(6deg) translateY(2px); }
.mk[data-state="phone"] .brow-l { transform: translateY(-4px) rotate(9deg); }
.mk[data-state="phone"] .brow-r { transform: translateY(-4px) rotate(-9deg); }
.mk[data-state="phone"] .tuft-g { animation: joe-wobble-s calc(4s * var(--t)) infinite; }

/* ---- hangxiety extras: blanket, shivers, last night's debris */
.mk .blanket { fill: #5C6675; }
.mk .blanket-fold { fill: none; stroke: #47505D; stroke-width: 3; stroke-linecap: round; }
.mk .shiver { fill: none; stroke: var(--muted); stroke-width: 3.5; stroke-linecap: round; opacity: .55; }

@keyframes joe-shiver-pulse {
    0%, 100% { opacity: .25; transform: translateX(0); }
    50%      { opacity: .7; transform: translateX(-2px); }
}
.mk[data-state="hangxiety"] .p-blanket,
.mk[data-state="hangxiety"] .p-shiver,
.mk[data-state="hangxiety"] .p-debris { display: block; }
.mk[data-state="hangxiety"] .p-shiver { animation: joe-shiver-pulse calc(.6s * var(--t)) ease-in-out infinite; }
/* the blanket hides the arms, so drop them out of the way */
.mk[data-state="hangxiety"] .arm-l  { transform: rotate(150deg); }
.mk[data-state="hangxiety"] .arm-r  { transform: rotate(-150deg); }