.robot-scene{position:absolute;inset:8px -30px 76px;opacity:0;pointer-events:none;touch-action:pan-y;cursor:grab;transition:opacity .4s}
.robot-scene:active{cursor:grabbing}.robot-scene canvas{display:block;width:100%;height:100%}.robot-scene:focus-visible{outline:2px solid var(--orange);outline-offset:-12px;border-radius:20px}.has-3d .robot-scene{opacity:1;pointer-events:auto}.has-3d .bot-render{visibility:hidden}.has-3d .orbit{opacity:.5}.hero-art .art-label{z-index:1;pointer-events:none}.hero-art .face-control{z-index:2;bottom:35px}.hero-art .art-footnote{bottom:0}.scene-hint{display:none;position:absolute;bottom:94px;left:0;right:0;text-align:center;font:9px var(--mono);color:var(--muted);pointer-events:none}.has-3d .scene-hint{display:block}.face-control #pause-robot{font-size:10px;background:transparent;border-color:var(--line);padding:10px}.face-control #pause-robot[hidden]{display:none}.hero-art .face-control{gap:10px}.hero-art .face-control>span{font-size:9px}
@media(max-width:700px){.hero-art{height:475px}.robot-scene{inset:0 -15px 80px}.hero-art .face-control{bottom:35px;gap:8px}.hero-art .face-control>span{display:none}.scene-hint{bottom:90px}.hero-art .art-label{top:0}.hero-art .art-footnote{font-size:8px}.has-3d .orbit{top:65px}}
@media(prefers-reduced-motion:reduce){.robot-scene{transition:none}}

.has-3d.hero-art{min-height:640px}
.has-3d .robot-scene{bottom:155px}
.has-3d .scene-hint{bottom:172px}
.expression-control{display:none;position:absolute;bottom:89px;left:0;right:0;z-index:3;justify-content:center;gap:9px}
.has-3d .expression-control{display:flex}
.expression-button{width:57px;min-height:65px;padding:5px 3px 6px;border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--muted);cursor:pointer;box-shadow:0 3px 0 #24281f12;transition:transform .18s,background .18s,box-shadow .18s}
.expression-button svg{display:block;width:40px;height:33px;margin:0 auto 3px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.expression-button span{display:block;font:9px var(--mono);white-space:nowrap}
.expression-button:hover{transform:translateY(-4px) rotate(-3deg);background:#e4e9d5;color:var(--ink);box-shadow:0 6px 0 #24281f12}
.expression-button[aria-pressed="true"]{background:var(--ink);color:var(--lime);border-color:var(--ink);box-shadow:0 3px 0 #24281f35;transform:translateY(-2px)}
.expression-button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
@media(max-width:700px){.has-3d.hero-art{height:550px;min-height:550px}.expression-control{gap:7px}.has-3d .scene-hint{bottom:169px}}
@media(prefers-reduced-motion:reduce){.expression-button{transition:none}}

.has-3d .face-control>span{display:none}
#groove-toggle{background:var(--lime);border-color:#a6bf80;font-size:11px;white-space:nowrap}
#groove-toggle[aria-pressed="true"]{background:var(--ink);color:var(--lime);border-color:var(--ink)}
#groove-toggle[hidden]{display:none}
@media(max-width:700px){.hero-art .face-control{gap:6px}.hero-art .face-control button{padding:10px 12px;font-size:11px}.face-control #pause-robot{padding:10px 8px;font-size:9px}}

.full-bot.has-3d{min-height:640px}.full-bot .robot-scene{z-index:1}.full-bot .art-label{z-index:2}.full-bot .face-control{bottom:35px}.full-bot .art-footnote{bottom:0}.full-bot .expression-control{z-index:3}
@media(max-width:700px){.full-bot.has-3d{height:550px;min-height:550px;padding:0}}

.full-bot .face-control{display:none}.full-bot.has-3d .face-control{display:flex}

/* Keep every action comfortably tappable and reserve distinct rows below the scene. */
.full-bot .face-control{min-height:44px;bottom:38px}
.full-bot .face-control button{min-height:44px}
.full-bot .expression-control{bottom:101px}
.full-bot .scene-hint{bottom:184px;line-height:1.6}
.full-bot .robot-scene{bottom:203px}
@media (hover:none){.expression-button:hover{transform:none;box-shadow:0 3px 0 #24281f12}}
@media(max-width:700px){
  .full-bot.has-3d{height:clamp(510px,calc(90vw + 230px),590px);min-height:0}
  .full-bot .robot-scene{inset:24px 0 205px}
  .full-bot .expression-control{gap:5px;bottom:105px}
  .expression-button{flex:1;max-width:62px;min-width:0;min-height:68px;padding:7px 1px}
  .expression-button svg{width:36px;height:33px}
  .expression-button span{font-size:10px}
  .full-bot .face-control{display:none;left:0;right:0;bottom:42px;gap:6px}
  .full-bot.has-3d .face-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .full-bot .face-control button,.full-bot .face-control #pause-robot{min-height:48px;padding:8px 5px;font-size:11px;line-height:1.35;white-space:normal}
  .full-bot .scene-hint{bottom:185px;font-size:9px}
  .full-bot .art-footnote{bottom:0;font-size:9px;max-width:100%}
  .full-bot .art-label{top:4px;letter-spacing:.8px}
}