.world{height:640px;margin-top:18px;background:none;overflow:visible;isolation:isolate}.world:before{display:none}.scene-ground{position:absolute;inset:90px 14px 55px;border-radius:50%;background:radial-gradient(ellipse,#e3efe4 0%,#eff5ec 54%,#f8faf8 72%);z-index:-1;transform:rotate(-3deg)}.character{position:absolute;width:164px;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);padding:0 5px 8px;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:24px;touch-action:manipulation;z-index:1;perspective:500px;mix-blend-mode:normal}.character-art{display:block;width:160px;height:160px;background-image:url('cartoon-crew-transparent.webp');background-size:300% 300%;background-position:var(--sprite-x) var(--sprite-y);mix-blend-mode:normal;transform-origin:50% 90%;transition:transform .22s ease;position:relative;pointer-events:none}.character:hover .character-art,.character:focus-visible .character-art{transform:rotate(var(--lean,-5deg)) translateY(-5px)}.character-name{font-size:16px;font-weight:700;letter-spacing:-.3px;background:#f8faf8b0;border-radius:12px;padding:3px 10px;transition:background .2s}.character[aria-pressed=true] .character-name{background:#d9e9d9;color:#244f35}.character-caption{font-size:13px;line-height:1.4;color:var(--muted);margin-top:3px;white-space:nowrap}.character.bo{left:50%;top:52%;width:210px;z-index:2}.character.bo .character-art{width:220px;height:220px}.character.bo .character-name{font-size:21px}.character.flomo{left:12%;top:31%}.character.obsidian{left:32%;top:22%}.character.chatgpt{left:68%;top:22%}.character.claude{left:88%;top:31%}.character.omi{left:11%;top:75%}.character.calendar{left:31%;top:84%}.character.github{left:69%;top:84%}.character.codex{left:89%;top:75%}.speech{position:absolute;z-index:10;width:230px;padding:15px 30px 16px 17px;border:1.5px solid #aec4ac;border-radius:20px;background:#fffefa;box-shadow:0 8px 25px #25452b10;pointer-events:auto;animation:hello .23s ease-out;transform:translate(-50%,-100%)}.speech[hidden]{display:none}.speech:after{content:'';position:absolute;left:calc(50% - 7px);bottom:-8px;width:13px;height:13px;background:#fffefa;border-right:1.5px solid #aec4ac;border-bottom:1.5px solid #aec4ac;transform:rotate(45deg)}#speech-name{font-size:12px;font-weight:700;letter-spacing:.4px;color:#628269}.speech p{font-size:15px;line-height:1.5;margin:5px 0 0;color:#2c4536}.speech button{position:absolute;right:4px;top:4px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;font-size:22px;color:#657969;cursor:pointer}.speech button:hover{background:#e9f0e6}.character.hopping .character-art{animation:hop .68s cubic-bezier(.25,.7,.35,1)}.character.nodding .character-art{animation:nod .65s ease-in-out}.character .spark{position:absolute;top:13%;left:75%;color:#d09a22;font-size:26px;pointer-events:none;animation:spark .8s ease-out forwards}.detail{margin-top:36px}@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(4px) scale(1.05,.94)}48%{transform:translateY(-24px) rotate(-7deg) scale(.96,1.04)}70%{transform:translateY(0) rotate(4deg)}84%{transform:translateY(-7px) rotate(-2deg)}}@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(5deg)}65%{transform:rotate(-5deg)}}@keyframes hello{from{opacity:0;margin-top:7px}to{opacity:1;margin-top:0}}@keyframes spark{0%{opacity:0;transform:scale(.5) translateY(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.1) translateY(-40px)}}@media(max-width:850px){.world{height:640px}.character{width:133px}.character-art{width:136px;height:136px}.character.bo{width:178px}.character.bo .character-art{width:190px;height:190px}.character.flomo{left:12%;top:30%}.character.claude{left:88%;top:30%}.character.omi{left:12%;top:71%}.character.codex{left:88%;top:71%}.character-name{font-size:14px}.character-caption{font-size:12px;white-space:normal;text-align:center}.character.obsidian{left:34%;top:16%}.character.chatgpt{left:66%;top:16%}.character.calendar{left:33%;top:83%}.character.github{left:67%;top:83%}}
@media(max-width:600px){.world{height:auto;min-height:0;padding:0 12px 40px;margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0}.scene-ground{inset:120px 0 0;border-radius:100px;background:linear-gradient(180deg,#eff5ec80,#e8f1e9 55%,#f8faf8)}.character,.character.bo,.character.flomo,.character.obsidian,.character.chatgpt,.character.claude,.character.omi,.character.codex,.character.calendar,.character.github{position:relative;top:auto;left:auto;transform:none;width:100%;min-width:0;padding:0 1px 8px}.character.bo{grid-row:1;grid-column:1/-1;width:100%;margin-bottom:5px}.character.bo .character-art{width:230px;height:230px}.character-art{width:clamp(92px,28vw,158px);height:clamp(92px,28vw,158px)}.character-name{font-size:14px;padding:3px 7px}.character-caption{font-size:12px;max-width:104px;margin:auto;line-height:1.4}.character.bo .character-caption{max-width:190px}.character.github{grid-column:1}.character.calendar{grid-column:3}.speech{width:210px}.detail{margin-top:24px}.character .spark{left:68%}.character.bo .spark{left:65%;top:25%}}
@media(prefers-reduced-motion:reduce){.character-art,.speech,.spark{animation:none!important;transition:none!important}.character:hover .character-art,.character:focus-visible .character-art{transform:none}.character .spark{display:none}}

/* The companions have their own rhythms; Bo stays still in the middle. */
.character.bo{top:50%}
.character:not(.bo) .character-art{animation:var(--idle,crew-stroll) var(--tempo,5s) ease-in-out var(--phase,0s) infinite;will-change:transform}
.character.flomo{--tempo:4.6s;--phase:-1.1s}
.character.obsidian{--idle:crew-sway;--tempo:3.8s;--phase:-2s}
.character.chatgpt{--idle:crew-bounce;--tempo:3.7s;--phase:-.7s}
.character.claude{--tempo:5.2s;--phase:-3s}
.character.codex{--idle:crew-sway;--tempo:3.2s;--phase:-1.2s}
.character.omi{--idle:crew-bounce;--tempo:4.3s;--phase:-2.4s}
.character.github{--tempo:5.8s;--phase:-4s}
.character.calendar{--idle:crew-sway;--tempo:4.1s;--phase:-.4s}
.character:not(.bo):hover .character-art,.character:not(.bo):focus-visible .character-art{animation-play-state:paused}
.character:not(.bo).hopping .character-art{animation:hop .68s cubic-bezier(.25,.7,.35,1)}
.character.bo .character-art,.character.bo:hover .character-art,.character.bo:focus-visible .character-art{animation:none!important;transform:none!important;transition:none!important}





@keyframes crew-stroll{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(9px,-7px) rotate(4deg)}25%{transform:translate(15px,0) rotate(0)}37%{transform:translate(7px,-7px) rotate(-4deg)}50%{transform:translate(0,0) rotate(0)}62%{transform:translate(-9px,-7px) rotate(-4deg)}75%{transform:translate(-15px,0) rotate(0)}87%{transform:translate(-7px,-7px) rotate(4deg)}}
@keyframes crew-sway{0%,100%{transform:rotate(-6deg)}25%{transform:rotate(0) translateY(-5px)}50%{transform:rotate(6deg)}75%{transform:rotate(0) translateY(-5px)}}
@keyframes crew-bounce{0%,45%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(3px) scale(1.04,.96)}25%{transform:translateY(-16px) rotate(-4deg)}38%{transform:translateY(0) scale(1.03,.97)}62%{transform:translateY(2px) scale(1.03,.97)}75%{transform:translateY(-10px) rotate(4deg)}88%{transform:translateY(0)}}
@media(max-width:600px){
 .world{grid-template-rows:repeat(3,auto);gap:25px 0;padding-top:25px;padding-bottom:70px;align-items:center}
 .character.bo{top:auto;grid-row:2;grid-column:2;margin:0;width:100%}
 .character.bo .character-art{width:clamp(100px,31vw,175px);height:clamp(100px,31vw,175px)}
 .character.bo .character-name{font-size:18px}
 .character.bo .character-caption{max-width:105px}
 .character.flomo{grid-area:1/1}.character.obsidian{grid-area:1/2}.character.chatgpt{grid-area:1/3}
 .character.claude{grid-area:2/1}.character.codex{grid-area:2/3}
 .character.omi{grid-area:3/1}.character.github{grid-area:3/2}.character.calendar{grid-area:3/3}
 .scene-ground{inset:20px 0 60px}
}
@media(prefers-reduced-motion:reduce){.character:not(.bo) .character-art{animation:none!important;transform:none!important;will-change:auto}}

.character.muse{left:50%;top:14%;--idle:crew-bounce;--tempo:4.8s;--phase:-1.7s}
.character.muse .character-art{width:136px;height:136px;background-image:url('muse-character-transparent.webp');background-size:100% 100%;background-position:center}
#detail-source{display:inline-block;margin-top:12px;font-size:13px;color:#3b7150;text-underline-offset:3px}
#detail-source[hidden]{display:none}
@media(min-width:601px) and (max-width:850px){.character.obsidian{left:29%;top:20%}.character.chatgpt{left:71%;top:20%}.character.muse{top:13%}.character.muse .character-caption{max-width:110px}}
@media(max-width:600px){
 .world{display:block;height:700px;padding:0;margin-top:22px}
 .world .character{position:absolute;width:28%;max-width:150px;transform:translate(-50%,-50%);margin:0;padding:0 2px 8px}
 .world .character-art{width:clamp(85px,26vw,138px);height:clamp(85px,26vw,138px)}
 .world .character.bo{left:50%;top:50%;width:32%;max-width:170px}
 .world .character.bo .character-art{width:clamp(108px,31vw,165px);height:clamp(108px,31vw,165px)}
 .world .character.muse{left:50%;top:12%}
 .world .character.obsidian{left:19%;top:24%}.world .character.chatgpt{left:81%;top:24%}
 .world .character.flomo{left:17%;top:46%}.world .character.claude{left:83%;top:46%}
 .world .character.omi{left:18%;top:68%}.world .character.codex{left:82%;top:68%}
 .world .character.calendar{left:32%;top:87%}.world .character.github{left:68%;top:87%}
 .scene-ground{inset:25px 0 40px}
}

#detail-description a{color:#3b7150;text-decoration:underline;text-underline-offset:3px}

/* Granola listens, sways, and perks up with the rest of the crew. */
.character.bo.has-3d{mix-blend-mode:normal}
.character.bo.has-3d .character-art{background-image:none;mix-blend-mode:normal;pointer-events:auto;cursor:grab;touch-action:pan-y}
.character.bo.has-3d.rotating .character-art{cursor:grabbing}
.character.bo .character-art canvas{display:none;width:100%;height:100%;touch-action:pan-y}
.character.bo.has-3d .character-art canvas{display:block}
.character.bo.has-3d .character-caption{white-space:normal;max-width:200px;text-align:center;font-size:12px}
.character.granola{left:50%;top:86%;--idle:granola-notes;--tempo:4.7s;--phase:-1.3s;mix-blend-mode:normal}
.character.granola .character-art{width:144px;height:144px;background-image:url('granola-character.png');background-size:contain;background-repeat:no-repeat;background-position:center;mix-blend-mode:normal}
.character.granola[aria-pressed=true] .character-name{background:#f5e5ac;color:#594b24}
@keyframes granola-notes{0%,100%{transform:rotate(-3deg) translateY(0)}18%{transform:rotate(3deg) translateY(-4px)}28%{transform:rotate(1deg) translateY(-2px)}38%{transform:rotate(3deg) translateY(-4px)}52%{transform:rotate(-2deg) translateY(0)}70%{transform:rotate(-4deg) translateY(-8px)}84%{transform:rotate(1deg) translateY(-2px)}}
@media(min-width:601px) and (max-width:850px){
 .character.calendar{left:26%}.character.github{left:74%}
 .character.granola .character-art{width:136px;height:136px}
 .character.granola .character-caption{max-width:122px}
}
@media(max-width:600px){
 .world .character.calendar{left:18%;top:87%}
 .world .character.github{left:82%;top:87%}
 .world .character.granola{left:50%;top:87%}
 .world .character.granola .character-art{width:clamp(85px,26vw,138px);height:clamp(85px,26vw,138px)}
}